Vue 指令
Vue 文本指令
1 v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的，不可以自定义）
2 v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（
123
会被num替换）3 v-html可以解析渲染html语法的内容
4）补充
<!-- js基本数据类型：字符串、数字、布尔、undefined --><p v-text="'abc' + num + 10"><p v-text="'abc' + num + 10"></p> <p>{{ 'abc' + num + 10 }}</p><body> <div id="app"> <p>{{ num | add(300) }}</p> <p v-text="num"></p> <p v-text="num">123</p> <p v-text="info"></p> <p v-html="info"></p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 100, info: '<i style="color: red">info内容</i>' }, filters: { add: function (a, b) { return a + b; } } }) </script>总结：
1 v-* 是vue指令，会被vue解析 2 v-text是原样输出渲染内容 3 v-html可以解析渲染html语法的内容
Vue 事件指令
1 数据驱动
操作是一个功能，使用需要一个方法来控制
方法名是变量，所以控制变量就可以控制该方法
2 事件指令
在实例成员 methods 中声明事件方法
标签通过事件指令绑定声明的方法：v-on:事件名="事件方法名"
eg: <button v-on:click="btnClick">按钮<button>
标签通过事件指令绑定声明的方法，且自定义传参： v-on:事件名="事件方法名()"
eg: <button v-on:click="btnClick()">按钮</button> 不传任何参数 eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象，同不写() eg: <button v-on:click="btnClick(10)">按钮</button> 只传入自定义参数，当然也可以传入事件对象 v-on:
- v-on: 事件="方法" => 系统传参，只默认传 $event
- v-on: 事件="方法($event, ...)" => 完全自定义传参，可以手动传入$event
<div id="app"> <button v-on:click="btnClick">{{ btn1 }}</button> <button v-on:click="btnClick">{{ btn2 }}</button> <hr> <!-- 直接绑定事件名：系统会在触发事件时（点击时）调用事件方法(fn1)，传给事件方法一个参数（事件对象）--> <button v-on:click="fn1">按钮3</button> <hr> <!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入参数全由用户自己决定--> <button v-on:click="fn2($event, 10, 20)">按钮4</button> <hr> <button v-on:click="fn(btn1)">{{ btn1 }}</button> </div> </body> <script> new Vue({ el: '#app', data: { btn1: '按钮1', btn2: '按钮2', }, methods: { btnClick (){ console.log(666); }, fn1 (ev){ console.log(ev.clientX, ev.clientY); }, fn2 (ev, n1, n2){ console.log(ev, n1, n2); console.log(ev.clientX, ev.clientY); }, fn (msg){ console.log(msg); } } }) </script>总结：
1 v-text：基本同{{}} 2 v-html：可以解析html语法的内容 3 v-on： v-on:事件="方法" => 系统传参，只默认传$event v-on:事件="方法($event, ...)" => 完全自定义传参，可以手动传入$event
补充：
<style> body { /* 不允许文本选中 */ user-select: none; } .d1:hover { color: orange; /* 鼠标样式 */ cursor: pointer; } /* 只有按下采用样式，抬起就没了 */ .d1:active { color: red; } /* div标签压根不支持 :visited 伪类 */ .d1:visited { color: pink; } .d2.c1 { color: orange; } .d2.c2 { color: red; } .d2.c3 { color: pink; } </style> <div id="app"> <div class="d1">伪类操作</div> <br><br><br> <!-- click: 单击 dblclick：双击 mouseover：悬浮 mouseout：离开 mousedown：按下 mouseup：抬起 --> <div :class="['d2', c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件处理</div> </div> <script> new Vue({ el: '#app', data: { c: '', }, methods: { hFn (c) { this.c = c } } }) </script> # 总结： # 事件：@click @dblclick @mouseover|out|down|up # 鼠标单击、双击、悬浮、移开、按下、抬起
Vue 斗篷指令
v-cloak:避免屏幕闪烁
属性选择器，会将 v-cloak 属性所在的标签隐藏
当 Vue 环境加载后，会将 v-cloak 属性解析移除，所以内容 {{ num }} 就会显示出来
而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{{ num }}闪烁成数值10
<style> [v-cloak] { display: none; } </style> <div id="app" v-cloak> <p>{{ num }}</p> </div> <script> new Vue({ el: '#app', data: { num: 10 }, }) </script>
Vue 属性指令
语法： v-bind: 属性名="变量"
针对不同属性，使用方式稍微有一点区别
自定义属性以及 title 这些，直接赋值的，使用方式如下
t 是变量，'o' 是常量
<p v-bind:title="t" v-bind:kai="'o'">段落</p> <script> new Vue({ el: '#app', data: { t: '悬浮提示', }, }) </script>class 属性(重点)
绑定的变量：值可以为一个类名 “p1”，也可以为多个类名 “[p1, p2]”
绑定的数组：数组的每一个成员都是一个变量
绑定的字典：key就是类名，value是绝对该类名是否起作用
<!-- a是变量，值就是类名 b就是类名，不是变量 c是变量，值为布尔，决定b类是否起作用 d是变量，值可以为一个类名 'p1' 也可以为多个类名 "p1 p2 ..." calss="p1 b p2 p3" --> <p v-bind:class="[a, {b: c}]" v-bind:class="d"></p> <script> let app = new Vue({ el: '#app', data: { a: 'p1', c: true, d: 'p2 p3', }, }) </script>案例：
<style> .live { background-color: yellow; } </style> </head> <body> <div id="app"> <!-- 默认渲染 1，点击 1 按钮的时候，会把对应事件指令里的参数传进去，点 2 就传 2，就会渲染--> <button v-bind:class="{live: isLive ==1}" v-on:click="changeLive(1)">1</button> <button v-bind:class="{live: isLive ==2}" v-on:click="changeLive(2)">2</button> <button v-bind:class="{live: isLive ==3}" v-on:click="changeLive(3)">3</button> </div> </body> <script> let app = new Vue({ el: '#app', data: { isLive: 1, }, methods: { changeLive(incex){ // this 就代表当前 Vue 对象，和 app 变量等价 // app.isLive = index; this.isLive = incex; } } }) </script>style 属性(了解)
绑定的变量：值是一个字典
<p v-bind:style="myStyle"></p> <script> let app = new Vue({ el: '#app', data: { myStyle: { '50px', height: '50px', backgroundColor: 'pink', borderRadius: '50%' } }, }) </script>重点：事件指令 与 属性指令 都可以简写
1 属性指令 v-bind: 可以简写为 : 2 事件指令 v-on: 可以简写为 @ <button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button> <button :class="{live: isLive == 2}" @click="changeLive(2)">2</button> <button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>总结：
v-bind:title="变量"
:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"
:style="字典变量"
Vue 表单指令
- 语法： v-model="变量"。服务于文本输入框
- v-model 绑定的变量控制的其实就是 value 属性值
- v-model 要比 v-bind:value 要多一个监听机制
- 数据的双向绑定
- v-model 可以将绑定的变量值映射给表单元素的 value
- v-model 还可以将表单元素的新 value 映射给报道的变量
<!-- 两个输入框内容会同时变化 --> <input name="n1" type="text" v-model="v1"> <input name="n2" type="text" v-model="v1"> <script> new Vue({ el: '#app', data: { v1: '' } }) </script>总结：
v-model绑定变量控制value属性，可以实现双向绑定
Vue 条件指令
语法：v-show="变量" | v-if="变量"
两者的区别
- v-show 在隐藏标签时，采用 display:none 渲染标签，标签通过 css 隐藏
- v-if 在隐藏标签时，不会渲染在页面上
v-if 有家族：v-if | v-else-if | v-else
- v-if是必须的，必须设置条件
- v-else-if可以为0~n个，必须设置条件
- v-else可以为0~1个
- 上方分支成立会屏蔽下方所有分支，从上至下依次类推
<div id="app"> <div> <p v-show="isShow">show控制显隐</p> <p v-if="isShow">if控制显隐</p> </div> <div> <p v-if="0">你是第1个p</p> <p v-else-if="0">你是第2个p</p> <p v-else>你是第3个p</p> </div> </div> <script> new Vue({ el: '#app', data: { isShow: false, } }) </script>
案例：
<style> body { margin: 0; } button { 60px; line-height: 40px; float: right; } .bGroup:after { display: block; content: ''; clear: both; } .box { /* vw: view width vh: view height*/ 100vw; height: 200px; } .red { background-color: red; } .yellow { background-color: yellow; } .blue { background-color: blue; } button.active { background-color: cyan; } </style> </head> <body> <div id="app"> <div class="bGroup"> <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button> <button :class="{active: isShow === 'yellow'}" @click="isShow = 'yellow'">黄</button> <button :class="{active: isShow === 'blue '}" @click="isShow = 'blue'">蓝</button> </div> <div> <div v-if="isShow === 'red'" class="box red"></div> <div v-else-if="isShow === 'yellow'" class="box yellow"></div> <div v-else class="box blue"></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: 'red' } }) </script>总结：
v-show | v-if v-if | v-else-if | v-else
Vue 循环指令
语法：v-for="ele in obj" obj 是被被遍历的对象，ele 是遍历得到的每一次结果
遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
- 字符串：v-for="v in str" | v-for="(v, i) in str"
- 数组：v-for="v in arr" | v-for="(v, i) in arr"
- 对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
注：v-for 遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>循环指令</title> </head> <body> <div id="app"> <!-- 遍历数字 5 【1】【2】【3】【4】【5】 --> <p>{{ d1 }}</p> <i v-for="e in d1">【{{ e }}】</i> <hr> <!-- 遍历字符串 abc 【a】【b】【c】 【0a】【1b】【2c】 --> <p>{{ d2 }}</p> <i v-for="e in d2">【{{ e }}】</i> <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i> <hr> <!-- 遍历数组 [ 1, 3, 5 ] 【1】【3】【5】 【01】【13】【25】 --> <p>{{ d3 }}</p> <i v-for="e in d3">【{{ e }}】</i> <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i> <hr> <!-- 遍历对象 { "name": "Bob", "age": 17.5, "gender": "男" } 【Bob】【17.5】【男】 【name-Bob】【age-17.5】【gender-男】 【name-Bob-0】【age-17.5-1】【gender-男-2】 --> <p>{{ d4 }}</p> <i v-for="e in d4">【{{ e }}】</i> <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i> <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i> <hr> </div> </body> <script> new Vue({ el: '#app', data: { d1: 5, d2: 'abc', d3: [1, 3, 5], d4: { name: "Bob", age: 17.5, gender: "男" } } }) </script>
商品循环案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .box { 280px; border: 1px solid #eee; border-radius: 5px; overflow: hidden; /* 隐藏超出父级显示范围外的内容 */ text-align: center; /* 文本相关的属性大多默认值是inherit */ float: left; margin: 10px; } .box img { 100%; } </style> </head> <body> <div id="app"> <div class="box" v-for="obj in goods"> <img :src="obj.img" alt=""> <p>{{obj.title}}</p> </div> </div> </body> <script src="js/vue.js"></script> <script> let goods = [ { 'img': 'http://pic.netbian.com/uploads/allimg/170623/122647-14981920076193.jpg', title: '达科塔·约翰逊 Dakota Johnson 4K壁纸' }, { 'img': 'http://pic.netbian.com/uploads/allimg/170623/121638-1498191398003a.jpg', title: 'Kristen Stewart 克里斯汀斯图尔特4K壁纸' }, { 'img': 'http://pic.netbian.com/uploads/allimg/170619/192151-14978713114a1d.jpg', title: '凯瑟琳·兰福德（Katherine Langford）4K壁纸' } ]; new Vue({ el: '#app', data: { goods, } }) </script> </html>
总结：
字符串：v-for="v in str" | v-for="(v, i) in str" 数组：v-for="v in arr" | v-for="(v, i) in arr" 对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"