一、v-html
转义输出，也就是可以解析 xml 数据
1 <body> 2 <div id="app"> 3 <p v-html="xml"></p> 4 <p v-html="info"></p> 5 </div> 6 </body> 7 <script src="../../lib/vue.js"></script> 8 <script> 9 new Vue({ 10 el: '#app', 11 data: { 12 info: 'NBA事件', 13 xml: '<font style = "color: red;"> xml数据 <font>', 14 } 15 }) 16 </script>
效果：
二、v-text
非转义输出，也就是无法解析 xml 类型数据，v-text可以简写为{{}},并且支持逻辑运算
1 <body> 2 <div id="app"> 3 <p v-text="info"></p> 4 <p v-text="xml"></p> 5 </div> 6 </body> 7 <script src="../../lib/vue.js"></script> 8 <script> 9 new Vue({ 10 el: '#app', 11 data: { 12 info: 'NBA事件', 13 xml: '<font style = "color: red;"> xml数据 <font>', 14 } 15 }) 16 </script> 17
效果：
三、v-bind
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。
格式： v-bind:attr = 数据
简写形式 :attr = 数据
1 <body> 2 <div id="app"> 3 <img v-bind:src="img" alt=""> 4 <img :src="img" alt=""> 5 6 <h3> 类名的绑定 - 对象形式 </h3> 7 <p :class = "{size: true,red: redFlag,blue: blueFlag}"></p> 8 <p class = "font" :class = "{size: true,red: redFlag,blue: blueFlag}"> Wset </p> 9 <h3> 类名的绑定 - 数组形式 </h3> 10 <p :class = "['size','red']"></p> 11 <p :class = "[class1,class3]"></p> 12 13 <h3> 样式的绑定 - 对象形式 </h3> 14 <p :style = "{ 15 '100px', 16 height: '100px', 17 background: 'yellow' 18 }"></p> 19 <p :style = "styleObj1"></p> 20 <h3> 样式的绑定 - 数组形式 </h3> 21 <p :style = "[{ 22 '200px', 23 height: '200px' 24 },{ 25 background: 'purple' 26 }]"></p> 27 <p :style = 'styleObj2'></p> 28 <a :href=" url "> 百度 </a> 29 </div> 30 </body>
四、v-model
双向数据绑定model和view中的值进行同步变化
1 <body> 2 <div id="app"> 3 <input type="text" v-model="msg"> 4 <p> {{ msg }} </p> 5 </div> 6 </body> 7 <script src="../../../lib/vue.js"></script> 8 <script> 9 new Vue({ 10 el: '#app', 11 data: { 12 msg: 'Hello Vue' 13 } 14 }) 15 </script>
五、条件渲染
v-if
v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）
v-else-if
v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if块，可以链式的多次使用
v-else
使用 v-else 指令来表示 v-if 的“else 块”,但是必须紧跟在v-if或者v-else-if后面搭配一起使用
v-show（条件展示）
v-show指令是用来控制dom元素显示和隐藏的
v-if 和 v-show
1. 效果看起来一样
2. 区别：
v-if控制的是元素的存在与否
v-show控制的是元素的display:none属性频繁切换用 v-show，如果不是很频繁的切换，用 v-if 1 <body> 2 <div id="app"> 3 <h3> v-show </h3> 4 <p v-show="f"> 昨天很累 </p> 5 <h3> v-if - 单路分支 </h3> 6 <p v-if="f"> 今天很嗨 - 放假了 </p> 7 <h3> v-if - 双路分支 </h3> 8 <p v-if="f"> A </p> 9 <p v-else> B </p> 10 <h3> v-if - 多路分支 </h3> 11 <input type="text" v-model="type"> 12 <p v-if=" type == 'A' "> A </p> 13 <p v-else-if=" type == 'B' "> B </p> 14 <p v-else> C </p> 15 </div> 16 </body> 17 <script src="../../lib/vue.js"></script> 18 <script> 19 new Vue({ 20 el: '#app', 21 data: { 22 f: true, 23 type: 'A' 24 } 25 }) 26 </script>
六、v-for用于渲染列表列表渲染参数可以写三个，分别为 item key index列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识原因：key是唯一标识，删除列表某一项时，下一项不会继承被删项的样式。循环嵌套式，参数名称是可以一致的in / of 都可以使用
1 <body> 2 <div id="app"> 3 <ul> 4 <li v-for = "(item,index) of arr" :key = "index"> 5 {{ item }} -- {{ index }} 6 </li> 7 </ul> 8 9 <ul> 10 <li v-for = " item in 10" > {{ item }} </li> 11 </ul> 12 13 <ul> 14 <li v-for = "(item,key,index ) in obj" :key = "item.card"> 15 <p> item -- {{ item }} -- key -- {{ key }} -- index -- {{ index }}</p> 16 </li> 17 </ul> 18 19 <ul> 20 <li v-for = 'item in json' :key = "item.id"> 21 <h3> {{ item.type }} </h3> 22 <ul> 23 <li v-for = "brand in item.brands" :key = 'brand.id'> 24 <p> {{ brand.type }} </p> 25 </li> 26 </ul> 27 </li> 28 </ul> 29 30 </div> 31 </body> 32 <script src="../../lib/vue.js"></script> 33 <script> 34 /* movies 全局变量 */ 35 new Vue({ 36 el: '#app', 37 data: { 38 arr: [1,2,3,4], 39 obj: { 40 card: 1, 41 name: 'huangfengfeng', 42 age: 16, 43 sex: 'man' 44 }, 45 json: [ 46 { 47 id: 1, 48 type: '笔记本', 49 brands: [ 50 { 51 id: 1, 52 type: '苹果' 53 }, 54 { 55 id: 2, 56 type: '戴尔' 57 }, 58 { 59 id: 3, 60 type: '联想' 61 }, 62 { 63 id: 4, 64 type: '雷蛇' 65 } 66 ] 67 }, 68 { 69 id: 2, 70 type: '手机', 71 brands: [ 72 { 73 id: 1, 74 type: '华为' 75 }, 76 { 77 id: 2, 78 type: '小米' 79 }, 80 { 81 id: 3, 82 type: '联想' 83 }, 84 { 85 id: 4, 86 type: 'vivo' 87 } 88 ] 89 } 90 ] 91 } 92 }) 93 </script>
七、v-onv-on 指令用于绑定HTML事件
v-on:click = "方法名称" 简写为 @click = "方法名称"
事件处理程序我们都放在了methods选项中
1 <body> 2 <div id="app"> 3 <button v-on:click = "incremnt"> 点击 </button> 4 <button @click = "incremnt"> 点击 </button> 5 <p> {{ count }} </p> 6 </div> 7 </body> 8 <script src="../../lib/vue.js"></script> 9 <script> 10 new Vue({ 11 data: { 12 count: 0 13 }, 14 el: '#app', 15 methods: { 16 incremnt () { 17 this.count ++ 18 } 19 } 20 }) 21 </script>
1 <button @click = "arguEventHandler( n,$event )"> 事件参数里面有事件对象 </button>
事件参数里有事件对象要用$event
发布自定义事件：
1 var vm = new Vue({
定义事件：vm.$on( 事件名称，事件处理程序 )
触发事件：vm.$emit(事件名称，事件参数)
发布：
1 vm.$on('aa',function ( val ) { 2 console.log( 'aa' + val ) 3 })
Vue中：
1 methods: { 2 myEvent () { 3 vm.$emit('aa',20000) 4 },
触发：
1 <button @click = "myEvent"> 自定义事件 </button>
或者：
1 vm.$emit('aa', 100)
vm是一个全局变量，任何位置都能访问到，推荐使用
事件修饰符：
事件修饰符是用来修饰事件的，它的作用是更加便捷的来使用一些重复的代码,比如时间冒泡的阻止
.self：只能自己触发
1 <div class="small" @click.self="smallHandler"></div>
按键修饰符：
用来修饰键盘事件
.enter（.13）:键盘回车
1 <input type="text" @keyup.enter="getInputVal"> 2 <input type="text" @keyup.13="getInputVal">
八、v-pre
把标签内部的元素保留原格式输出
九、v-cloak
防闪烁
十、v-once
只加载一次 ，如果用到事件中就是事件只执行一次
十一、自定义指令
全局定义
Vue.directive( 指令名称, 指令的配置选项 )
每个选项中都有四个参数
bind: function (a,b,c,d){}当指令一写到dom元素中就触发了
inserted: function（elm,b,c,d）{}当指令绑定的dom元素插入到页面时就触发了
el就是插入到页面的元素
b为钩子函数
b里有修饰符
b.modifiers.stop（true或false）
通过修饰符控制触发某些事件
b里还有value值
b.value=’
c为vNode
d为oldVNode
1 Vue.directive(指令名称, 指令的配置选项) 2 /* v-focus */ 3 Vue.directive('focus', { 4 /* 每一个选项中都有四个参数 */ 5 bind: function() { //当指令绑定到dom元素时触发 6 console.log('bind') 7 }, 8 inserted: function(el, b, c, d) { // 当指令绑定的dom元素插入页面时触发 9 console.log("兵哥: el", el) //这个就是指令绑定的dom 10 el.focus() 11 // el.style.background = 'red' 12 console.log("兵哥: b", b) 13 if (b.modifiers.stop) { 14 //true 15 el.style.background = 'green' 16 } else { 17 //false 18 el.style.background = 'red' 19 } 20 21 el.value = b.expression 22 console.log("兵哥: c - vNode", c) 23 console.log("兵哥: d - oldVNode", d) 24 } 25 }) 26
局部定义
1 new Vue({ 2 el: '#app', 3 data: { 4 info: '焦点' 5 }, 6 directives: { 7 // 指令名称：选项 8 'my-focus': { 9 inserted: function ( el ) { 10 el.focus() 11 } 12 } 13 } 14 })