v-html指令 使用v-html指令用于输出html代码 属性 HTML属性中的值使用v-bind\v-model指令
v-bind:与 v-model 的区别？ v-model是做数据双向绑定的指令 v-bind:只是将对应的值给填写到指定属性中 例如：v-bind：Value简单来说就是将值填写到指定属性中 然后value的值发生改变，并不会影响Vue实例中变量值
表达式 Vue提供了完全的JavaScript表达式支持，截取指定内容，动态生成id
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>插值</title> </head> <body> <div id="app"> <ul> <li> <h3>文本</h3> {{ msg }} </li> <li> <h3>v-html指令</h3> <div v-html="vueHtml"></div> </li> <li> <h3>属性</h3> <input type="text" :value="msg"/> </li> <li> <h3>表达式</h3> {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} </li> <li :id="'list-' + id">我的Id是js动态生成的</li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ msg :'hello vue', vueHtml:'<span style="font-size:40px;">Vue对html的解析</span>', str:'http://www.baidu.com', number:6, ok:true, id:5 }; } }); </script> </html>v-if|v-else|v-else-if 根据其后表达式的bool值进行判断是否渲染该元素 v-show 与v-if类似，能渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"也可以监听文本框内容，当文本框插入文本时执行相对应操作 v-for 类似JS的遍历，可以获取其他的每个属性和下标 动态参数 可以根据我们输入的内容改变按钮所执行的事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</title> </head> <body> <div id="app"> <ul> <li> <h3>条件指令（if elseif else）</h3> <input type="text" v-model="score" /> <div v-if="score>90">A</div> <div v-else-if="score>80">B</div> <div v-else-if="score>70">C</div> <div v-else-if="score>60">D</div> <div v-else="">E</div> </li> <li> <h3>V-Show</h3> <input type="text" v-model="show" /> <div v-show="show">滴滴</div> </li> <li> <h3>v-for</h3> <div v-for="item,index in arr"> {{item}},{{index}} </div> <div v-for="item,index in objArr"> {{item.name}},{{index}} </div> </li> <li> <h3>动态参数</h3> <input type="text" v-model="evname" /> <!-- dblclick 双击事件 --> <button v-on:[evname]="xxx">点我</button> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data() { return { msg: 'hello vue', score: 89, show: null, arr: [1, 4, 7, 9], objArr: [{ id: 's001', name: 'dd' }, { id: 's002', name: 'aa' }, { id: 's003', name: 'hh' }], evname:'click' }; }, methods:{ xxx(){ console.log('点我干哈'); } } }); </script> </html>局部过滤器 和表达式有点像，可以截取一段我们想要的文本返回，可以自定义它出现的文本，是截取后的还是截取前的 局部过滤器可串联 在过滤完一个条件后还可以继续再过滤一个条件 全局过滤器 过滤完的内容不仅在一个页面可用，其他页面也可以用，需要配置文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>过滤器</title> </head> <body> <div id="app"> <ul> <li> <h3>局部过滤器</h3> {{msg}} {{msg | a}} </li> <li> <h3>局部过滤器可串联</h3> {{msg}} {{msg | a | b}} </li> <li> <h3>全局过滤器</h3> {{msg}} {{msg | c}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.filter('c',function(v){ return v.substring(7); }); new Vue({ el: "#app", data() { return { msg: 'http://www.baidu.com', }; }, filters:{ a(v){ return v.substring(4); }, b(v){ return v.substring(3,12); } } }); </script> </html>计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新 computed:{}
监听属性 watch，我们可以通过 watch 来响应数据的变化 watch:{}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>计算属性及监听属性</title> </head> <body> <div id="app"> <ul> <li> <h3>计算属性</h3> 数量：<input type="text" v-model="num"> 单价：<input type="text" v-model="price" /> 计算总价：{{total}} </li> <h3>监听属性</h3> km：<input type="text" v-model="km"> m：<input type="text" v-model="m" /> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data() { return { num:1, price:16, km:1, m:1000 }; }, computed:{ //在计算属性定义的时候,是可以获取到vue实例中定义任何变量 total(){ return parseInt(this.num)*parseInt(this.price); } }, watch:{ km(v){ this.m=v*1000; }, m(v){ this.km = v/1000; } } }); </script> </html>欧克，今天的基本模板语法就是这样
