模板语法支持性很高，js所有数据类型都支持的，但是不支持输出语法 （ console.log alert ）
class object <div :class = "{[size]:true,[color]: true,[box]: true}"></div> <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div> arr <div :class = "[size,box,color]"></div> <div :class = "[class_flag?size:'',box,color]"></div> style object <div :style = "{width:'100px',height: '100px',background: 'blue'}"></div> <div :style = "style"></div> arr <div :style = "[style,border]"></div>指令基本介绍 就是绑定在Dom上的特殊属性，一般用"v-"标识,具有一定的功能，可以操作DOM元素
作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖格式： v-xxx = “mustache语法” v-xxx = “msg” v-xxx = “{{msg}}”
声明失渲染指令 1、v-html
将一个数据展示在一个DOM内容中，类似于 innerHTML( html属性 )防止脚本攻击 xss CSRF2、v-bind
单项数据绑定使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind格式： v-bind:DOMattr = “data”简写： :DOMattr = “data”3、v-text
非转义输出以上三个指令代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> //v-html <p v-html="a"></p> //v-bind <input type="text" v-bind:value="msg"> //v-bind 简写 <input type="text":value="msg"> //v-text <p v-text="a"></p> </div> </body> <script src="../dep/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"你好，我是一只噬元兽", a:"<strong>我是橘座</strong>", } }) </script> </html>运行结果 条件渲染指令 1、v-if
v-if 有三种使用形式单路分支双路分支多路分支v-if代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h3>v-if-单路分支</h3> <p v-if = "flag">我是单路分支</p> <hr> <h3>v-if双路分支</h3> <p v-if = "flag">分支一</p> <p v-else>分支二</p> <hr> <h3>v-if-多路分支</h3> <p v-if = 'type ==="A"'>分支一</p> <p v-else-if = 'type ==="B"'>分支二</p> <p v-else>分支三</p> </div> <script src="../dep/vue.js"></script> <script> new Vue({ el:"#app", data:{ flag:false, type:'A' } }) </script> </body> </html>2、v-show
v-show <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p v-show="flag">v-show</p> </div> <script src="../dep/vue.js"></script> <script> new Vue({ el:"#app", data:{ flag:false } }) </script> </body> </html>v-if VS v-show 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
template template标签如果放在模板的范围内使用，那么将来不会被解析渲染循环渲染指令 v-for 是用来做列表渲染的
格式 v-for = " xxx in(of) data " 举例： v-for = " item in(of) todos "
带参数的格式 v-for = " (item,index) in todos "
key( 留一部分 )
每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染
理想的key是使用数据中的id
**数据的更新检测 ** a. 使用以下方法操作数组，可以检测变动 push() pop() shift() unshift() splice() sort() reverse() b. filter(), concat() 和 slice() ,map(),新数组替换旧数组 c. 不能检测以下变动的数组 vm.items[indexOfItem] = newValue 解决 (1)Vue.set(example1.items, indexOfItem, newValue) vm.items.length = 0 解决 (1)splice
methods 方法
事件的添加使用的是 v-on:eventType = ‘事件处理程序’
事件处理程序往options里面的methods配置项中书写
<button v-on:click = "add"> + </button> new Vue({ el: '#app', data: { arr: [1,2,3,4] }, methods: { add () { this.arr.push(5) } } }) computed 计算属性 计算属性中存放的也是方法 计算属性的方法中必须要有返回值 计算属性的方法名可以像data选项中定义的数据一样使用代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h3>字符串渲染</h3> <ul> <li v-for="i in str">{{i}}</li> </ul> <hr> <h3>数组渲染</h3> <button v-on:click="add">点击添加数组项</button> <button @click="reduce">点击减少数组项</button> <button @click="replace">点击替换数组项</button> <button @click="clear">清空数组项</button> <ul> <li v-for="(value,index) in arr"><!--两个参数，第一个是值，第二个是索引--> <p>值：{{value}}</p> <p>索引：{{index}}</p> </li> </ul> <hr> <h3>数字渲染</h3> <ul> <li v-for = "value in num">{{value}}</li> </ul> <hr> <h3>对象渲染</h3> <ul> <li v-for = "(value,key,index) in obj" :key="key"><!--两个参数，第一个是值，第二个是键--> <p>值：{{value}}</p> <p>键：{{key}}</p> <p>索引:{{index}}</p> </li> </ul> <hr> <h3>json数据渲染</h3> <ul> <li v-for="item in json" :key="item.id"><!--此时渲染的结果为对象--> {{item}} <p v-for="value in item"> {{value}}<br> </li> </ul> <hr> <h3>json新数据渲染</h3> <ul> <li v-for="item in collect" :key="item.id"><!--此时渲染的结果为对象--> {{item}} <p v-for="value in item"> {{value}}<br> </li> </ul> </div> <script src="../dep/vue.js"></script> <script> new Vue({ el:"#app", data:{ str:"I am a cat", arr:[1,2,3,4,5,6,7], num:6, obj:{ name:"小可爱", age:18, hobby:"撸猫", }, json:[{ id:1, name:"猫猫", hobby:"吃鱼", url:"url1" },{ id:2, name:"幺幺", hobby:"睡觉", url:"url2" },{ id:3, name:"张狗子", hobby:"挨打", url:"url3" } ] }, methods:{ add () { this.arr.push(8) }, reduce (){ this.arr.pop() }, replace (){ // this.arr[0] = a; this.$set(this.arr,0,'aa') }, clear (){ this.arr.splice(0,this.arr.length) }, }, computed:{ collect(){// 这里存放的也是方法，但是这个方法是有返回值的，并且方法名还可以当做一个变量（相当于直接在data里面定义的数据）来使用 return this.json.filter((item) => { return item.id > 2 }) } } }) </script> </body> </html>