另外， v-on:click 也可以简写成: @click
var app = new Vue({ el:'#app', data:{ text:"Hello" }, methods:{ # 这个属性用来定义实例中的方法 changeText : function () { app.text = "World" } } }); // 或者可以采用 this.text 的方式来更改 text changeText : function () { this.text = "World" } 属性绑定 v-bind:title="title"为 title 属性后面的内容赋予了特殊的意义。例如此例中 “” 内的 title 表示Vue实例中的title变量的值
v-bind： 可以简写为 ： ：
计算属性 computed用来对变量进行一些运算操作。
优点：当参与运算的变量没有改变时，结果会采用上一次的缓存值
<div> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> </div>使用 computed 属性来定义参计算结果的函数
new Vue({ el:'#app', data:{ firstName:"", # 必须提前定义为 “” 否则页面会显示fullName为 undefined lastName:"" }, computed:{ # 定义计算属性 fullName : function () { return this.firstName + " " + this.lastName; # 返回字符串拼接结果 } } }); 侦听器 watch监听某个数据的变化，当它产生变化时，执行回调函数
watch: { # 定义侦听器 fullName : function () { # 侦听的变量为 fullName this.count ++ ; # 回调函数方法体 } } 练习1需求：如上面的动图，当输入框输入内容后，点击提交就会在下面的列表展示新添加的数据，如果用户没有写任何数据点击提交，提示他应该输入之后才能点击
<div> <input v-model="num" ref="id"/> <!-- 添加ref属性，以便使用Vue选择器来获取该输入框的 --> <button @click="add">提交</button> <ul> <!-- 添加key属性，提高遍历速度 --> <li v-for="(entity, index) in list":key="index">{{entity.num}}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data:{ num:"", list:[ {num:1}, {num:2}, {num:3}, {num:4} ] }, methods:{ add : function () { if(this.num){ this.list.push({num:this.num}); this.num = ""; # 添加完成后，删除原来的数据 }else { alert("请输入要添加的内容后重试！"); this.$refs.id.focus(); # vue语法，让输入框获得焦点，提高用户体验 } } } }); </script> 练习2完成 TodoList 中点击某个 li 删除它的功能
<div> <input v-model="num" ref="id"/> <button @click="add">提交</button> <ul> <todo-item v-for="(content, index) in list" :key="index" :content="content" 父组件向子组件传递数据 :index="index" @delete = "handleDelete" 父组件的订阅方法 ></todo-item> </ul> </div> <script> // 全局组件 Vue.component('todo-item', { props : ['content', 'index'], # 子组件接收数据 template: '<li @click="deleteItem">{{content}}</li>', # 绑定点击事件 methods:{ deleteItem:function () { this.$emit("delete", this.index); # 子组件向父组件发送消息，携带该 li 的index 数据 } } }); new Vue({ el: '#app', data: { num: "", list: [] }, methods: { add: function () { if (this.num) { this.list.push(this.num); this.num = ""; } else { alert("请输入要添加的内容后重试！"); this.$refs.id.focus(); } }, handleDelete : function (index) { # 父组件收到消息后执行删除方法，删除对应 index 的 li 标签 // alert(index); this.list.splice(index, 1); } } }); </script> Vue 脚手架工具 vue-cli 首先安装 node.js下载地址：
https://nodejs.org/en/download/
下载对应系统的版本，双击安装即可。安装完成后会自动添加全局变量。使用 node -v 来确认是否安装成功
安装 NPM(Node Package Manager)他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）
使用下面的命令来设置：
npm config set prefix "C:\develop\nodeJS\npm_modules" npm config set cache "c:\develop\nodeJS\npm_cache"安装淘宝的镜像。镜像默认是使用国外的网络来下载的。网速很慢，因此我们配置一个国内的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org安装完成后使用：cnpm -v 来查看