vue学习01
1. 创建一个Vue实例
官网-学习-教程-安装-（开发/生产版本）-与jQuery的引用相似
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js"></script> </head> <body> <div id="root"> <!-- v-on处理click事件 --> <!-- v-on:可以简写为@ --> <!-- v-bind 绑定数据，将title与data中title绑定 --> <!-- v-bind:可以简写为为 ： --> <div :title="title" @click="handClick">{{msg}}</div> <!-- v-model:用来进行双向数据绑定 --> <input v-model:value="content"/> <div>{{content}}</div> 姓：<input v-model:value="firstName"/> 名：<input v-model:value="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> <div v-if="show">你可以看到我吗</div> <button @click="handleShow">试试看喽</button> <!-- 循环展示 --> <ul> <!-- <li v-for="item of list">{{item}}</li> --> <!-- 加入key值，增强渲染效果，index表示的是下标，所以每一个index都是不一样的 --> <li v-for="(item,index) of list":key="index">{{item}}</li> </ul> </div> <script> /* 创建Vue实例 接管ID为root的元素*/ new Vue({ el:"#root", data:{ msg:"hello world", title:"this is hello world", content:"双向数据绑定", firstName:'', lastName:'', count:0, show:true, list:[1,2,3,4] }, // 计算属性：如果之前的计算内容没有改变，那么fullName就会显示上一次缓存的值，直到firstName或者lastName改变 computed:{ fullName: function(){ return this.firstName+" "+this.lastName; } }, methods:{ handClick:function(){ // alert('123'); this.msg="666"; }, handleShow:function(){ this.show=!this.show; } }, // 侦听器 watch: { // firstName:function(){ // this.count++; // }, // lastName:function(){ // this.count++; // } fullName:function(){ this.count++; } } }); </script> </body> </html>
2. 挂载点、模板、实例之间的关系
挂载点：div标签 对应el属性
模板：挂载点之内的内容，也可以写在实例的template属性里面
3. {{xxx}} 叫做插值表达式
属性的绑定
{{number}} 与 v-text="number"效果是一样的
v-html 会进行转义，可以输出HTML格式的内容。
v-on:click="hanleClick"
4. 只要是在模板里面使用了模板指令（v-on、@、v-bind），等号 后面就不再是字符串了，而是一个js的表达式
5. 双向数据绑定：
既可以通过数据来修改模板中的内容，又可以通过修改模板中 的内容来修改数据中的内容。
v-model
6. Vue中的计算属性和侦听器
7. v-if、v-show、v-for
如果v-if为false的话，会将v-if所在的标签从DOM树里面删除
如果v-show为false的，会将该标签的显示属性设置为display: none;
