标签：fun bind htm ack ide 传值 guide npm rip
vue是一种mvvm的方式，比起jquery的mvp的方式，可以较少操作dom，代码量也少很多。
vue有两种方式，一种是工程化的方式，一种是像jquery那样使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
嵌在前端代码的方式。
前期学习和做一般项目时，可以用第二种方式。以后可以用第一种方式。
这里提供一个示例代码，即vue组件化和组件传值的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="todoValue"/> <button @click="handleBtnClick" >提交</button> </div> <ul> <todo-item v-bind:content="item" v-for="item in list" @delete="handleDelClick"> </todo-item> </ul></div> <script> Vue.component(‘todo-item‘, { props: [‘content‘], template:"<li @click=‘handleItemClick‘>{{content}}</li>", methods:{ handleItemClick:function(){ alert(‘aaa‘) } } }) var app = new Vue({ el: "#root", data: { todoValue:"", list:[] }, methods:{ handleBtnClick: function(){ this.list.push(this.todoValue) this.todoValue = "" }, handleDelClick:function(){ this.list = [] } } }) </script> </body> </html>
更多vue的方法，参考官网：
介绍 — Vue.js
https://cn.vuejs.org/v2/guide/index.html#%E8%B5%B7%E6%AD%A5
关于mvp与mvvm的本质区别
MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
GitHub - DMQ/mvvm: 剖析vue实现原理，自己动手实现mvvm
https://github.com/DMQ/mvvm
vue的组件通讯 - 一篇看懂极为表面朴实内在先进的vuejs组件技术-图灵社区
http://www.ituring.com.cn/article/273489
标签：fun bind htm ack ide 传值 guide npm rip
原文地址：https://www.cnblogs.com/stevenlii/p/9130123.html
