一、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 width: ‘100px‘, 16 height: ‘100px‘, 17 background: ‘yellow‘ 18 }"></p> 19 <p :style = "styleObj1"></p> 20 <h3> 样式的绑定 - 数组形式 </h3> 21 <p :style = "[{ 22 width: ‘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是一个全局变量，任何位置都能访问到，推荐使用
原文：https://www.cnblogs.com/likecn/p/11715665.html