第一节：Vuejs入门之各种指令

一. 简介

　　Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是一个典型的MVVM框架

(1).M (model): 数据层 Vue 中数据层都放在 data 里面.
(2).V(view ): Vue 中 view 即我们的HTML页面.
(3).VM(view-model): 控制器将数据和视图层建立联系: vm 即 Vue 的实例就是 vm.

二. 常用指令

1. 差值表达式：{{}}

　　(1). 会出现闪烁现象，原因：代码加载的时候从上往下先加载HTML 把插值语法当做HTML内容加载到页面上当加载完js后才把插值语法替换掉所以我们会看到闪烁问题。

　　(2). 如何解决？

　　借助v-cloak指令，先声明[v-cloak]样式未display：none，然后给对应的标签上加上该指令.

2. v-text、v-html、v-pre、v-once : 都是用于内容的显示和输出，都不会出现闪烁现象

　　(1).v-text:输出的是纯文本，浏览器不会对其再进行html解析.

　　(2).v-html:会将其当html标签解析后输出,要注意预防xss攻击.

　　(3).v-pre:用于显示原始信息，如直接把{{msg}}显示出来.

　　(4).v-once:如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能,修改值也不会跟着变化了.

3. 双向数据绑定：v-model

　　(1).含义：数据和视图之间同步变化

(2).使用场景：v-model是一个指令，限制在、、components（组件）中使用 PS: 扩展双向数据绑定的原理？? <div>{{msg}}</div> <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'> 4.事件的绑定：v-on (1).用法 　　用来绑定事件，形式如：v-on:click="" 可以简写为@click=""，可以直接再里面写业务逻辑，也可以调用方法，如果不需要向方法中传参，可以省略方法中的括号，只写方法名，如：@click="handle" 等价于 @click="handle()" (2).传递普通参数和事件对象 　　对于这种@click="handle"调用方式，默认已经把事件对象传入进去了，只需要再方法中接收即可；对于@click="handle()方式调用，在最后一个参数的位置传入事件对象，事件对象为固定值:$event (3).事件修饰符 　　a.阻止冒泡：传统方式在handle2中添加event.stopPropagation(); 这里可以这样：@click.stop="handle2". 　　b.阻止默认行为：传统方式在handle2中添加event.preventDefault(); 这里可以这样：@click.prevent="handle2". (4).按键修饰符 　　格式：@keyup.常用别名，eg：@keyup.enter="handle"，敲回车键的时候触发handle事件 ps: 常用的别名有： 　　.enter => enter键 　　.tab => tab键 　　.delete (捕获"删除"和"退格"按键) => 删除键 　　.esc => 取消键 　　.space => 空格键 　　.up => 上 　　.down => 下 　　.left => 左 　　.right => 右 (5).自定义修饰符 　　首先要通过event.keycode获取每个按键对应的值，然后通过代码 Vue.config.keyCodes.别名 = 按键值进行声明，最后同上正常使用即可。比如：y对应的值是89. 注:此处官方有个bug，声明别名如果既有大写又有小写，不好用，eg：myY，不好用。 5.属性的绑定： 　　(1).用法: 使用v-bind进行绑定，形如 v-bind:href="xxx",可以简写为：:href="" 6.样式绑定 　　无论绑定class，还是绑定style，都是属性的绑定，可以使用v-bind进行绑定，或者直接简写：class：，：style。 A. class 　　(1).对象用法：每个样式的类名后面都要声明为true才有效，false则无效。 　　(2).数组用法：声明数组进行使用，或者直接简化 　　(3).混合使用和默认样式：默认样式单独声明一个class放进进去即可，混合使用如下 PS:如果想直接用css中的样式名称,要双重引号, :class="'xxx'",就不用再声明xxx=true之类的操作了. 多个样式的时候不推荐. B. style 　　(1).对象形式 　　(2).数组形式：后面相同的属性会覆盖前面的，比如都有color，后面的color会覆盖前面的；不同属性则叠加 7. 分支结构和显示隐藏: v-if、v-show 　　(1).v-if:通过条件判断展示或者隐藏某个元素或者多个元素 　　(2).v-show:控制元素样式是否显示 二者的区别: v-if是动态的向DOM树内添加或者删除DOM元素;v-show本质就是标签display设置为none，控制隐藏。 8. 循环机构:v-for 　　(1).遍历数组：如v-for="(item,index) in myStudents，可以获取数据和索引 　　(2).遍历对象：从上往下排着遍历对象中的内容，如：v-for='(value,key,index) in myObj' 分别是：内容、key、索引 代码分享： <pre> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>基本指令</title> 6 <style type="text/css"> 7 p { 8 font-weight: bold; 9 color: blue; 10 } 11 12 [v-cloak] { 13 display: none; 14 } 15 16 .s1 { 17 border: 1px solid black; 18 height: 60px; 19 color: blue; 20 } 21 22 .s2 { 23 background-color: antiquewhite; 24 } 25 26 .s3 { 27 font-size: 22px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="app"> 33 <p>1.差值表达式</p> 34 <div>{{msg1}}</div> 35 <div v-cloak>{{msg1}}</div> 36 37 <p>2.内容的输出</p> 38 <div v-text="msg1"></div> 39 <div v-html="msg2"></div> 40 <div v-pre>{{msg1}}</div> 41 <div v-once>{{msg1}}</div> 42 43 <p>3.双向数据绑定</p> 44  45 <input type="text" v-model="msg1"> 46 47 <p>4.事件绑定</p> 48 <div>{{num}}</div> 49 <button @click="num++">自增</button> 50 <button @click="handle1">自增</button> 51 <button @click="handle1()">自增</button> 52 <button @click="handle2">获取事件对象1</button> 53 <button @click="handle3(1,2,$event)">获取事件对象2</button> 54 <div @click="handle1"> 55 <button @click.stop="handle2">我要阻止冒泡</button> 56 </div> 57 <a href="https://www.baidu.com" @click.prevent="handle2">我要阻止默认行为</a> 58 <p>按键修饰符，回车触发</p> 59 <input type="text" @keyup.enter="enterHandle"> 60 <p>自定义按键修饰符</p> 61 <input type="text" placeholder="获取按键对应的值" @keyup="getKeyValue"> 62 <input type="text" placeholder="点击y键获取对应值" @keyup.yname="enterHandle"> 63 64 <p>5.属性的绑定</p> 65 <a :href="myUrl">属性的绑定-跳转</a> 66 67 <p>6.class样式的绑定</p> 68 <div :class="{s1:true,s2:true}">样式绑定-对象形式</div> 69 <div :class="[s1Class,s2Class]">样式绑定-数组形式</div> 70 <div :class="'s1'">样式绑定-直接写样式名称</div> 71 <div :class="myClass1">样式绑定-数组形式（简化）</div> 72 <div :class="myObjClass">样式绑定-对象形式（简化）</div> 73 <div :class="[s1Class,s2Class,{s3:true}]">混合使用</div> 74 75 <p>7.style样式的绑定</p> 76 <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'>对象形式</div> 77 <div v-bind:style='objStyles'>数组形式</div> 78  79 <div v-bind:style='[objStyles, overrideStyles]'>数组-同属性，后面会覆盖前面</div> 80 81 <p>7. 分支结构和显示隐藏: v-if、v-show</p> 82 <div> 83 <ul> 84 <li v-if="num>=0&&num<5">一般</li> 85 <li v-else-if="num>=5&&num<10">良好</li> 86 <li v-else>优秀</li> 87 </ul> 88 <div v-show="status">v-show的应用</div> 89 <button @click="changeStatus">显示/隐藏</button> 90 </div> 91 <p>8.遍历数组：v-for</p> 92 <div> 93 <ul> 94 <li :key="index" v-for="(item,index) in myStudents">{{index+":"+item.userName+","+item.userAge}}</li> 95 </ul> 96 </div> 97 <p>8.遍历对象：v-for</p> 98  99 <div v-for='(value,key,index) in myObj'>{{key+ '---' + value + '---' + index}}</div> 100 101 </div> 102 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 103 <script type="text/javascript"> 104 Vue.config.keyCodes.yname = 89; //给y键声明一个别名 105 var vm = new Vue({ 106 el: '#app', 107 data: { 108 msg1: "hello", 109 msg2: "<h1>hello</h1>", 110 num: 0, 111 status: true, 112 myUrl: "https://www.baidu.com", 113 //样式 114 s1Class: 's1', 115 s2Class: 's2', 116 //数组简化 117 myClass1: ['s1', 's2'], 118 //style相关声明 119 borderStyle: '1px solid blue', 120 widthStyle: '100px', 121 heightStyle: '200px', 122 objStyles: { 123 border: '1px solid green', 124 width: '200px', 125 height: '100px' 126 }, 127 overrideStyles: { 128 border: '5px solid orange', 129 backgroundColor: 'blue' 130 }, 131 //对象简化 132 myObjClass: { 133 s1: true, 134 s2: true 135 }, 136 myStudents: [{ 137 userName: "ypf1", 138 userAge: 12 139 }, 140 { 141 userName: "ypf2", 142 userAge: 13 143 } 144 ], 145 myObj: { 146 userName: "ypf1", 147 userAge: 100 148 } 149 }, 150 methods: { 151 //1. 自增 152 handle1: function() { 153 this.num++; 154 }, 155 handle2: function(event) { 156 this.num++; 157 console.log(event.target.innerHTML); 158 //阻止冒泡 159 // event.stopPropagation(); 160 //阻止默认行为 161 // event.preventDefault(); 162 }, 163 handle3: function(m, n, event) { 164 this.num++; 165 console.log(m, n); 166 console.log(event.target.innerHTML); 167 }, 168 //回车触发事件 169 enterHandle: function(event) { 170 alert(event.target.value); 171 }, 172 //获取按键对应的值 173 getKeyValue: function(event) { 174 alert("按键对应的值为：" + event.keyCode); 175 }, 176 //显示和隐藏 177 changeStatus: function() { 178 this.status = !this.status; 179 } 180 } 181 }); 182 </script> 183 </body> 184 </html></pre> 三. 案例 1. 计算器案例 2. 选项卡案例 代码分享： <pre> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>案例</title> 6 <style type="text/css"> 7 .tab ul { 8 overflow: hidden; 9 padding: 0; 10 margin: 0; 11 } 12 13 .tab ul li { 14 box-sizing: border-box; 15 padding: 0; 16 float: left; 17 width: 100px; 18 height: 45px; 19 line-height: 45px; 20 list-style: none; 21 text-align: center; 22 border-top: 1px solid blue; 23 border-right: 1px solid blue; 24 cursor 25 } 26 27 .tab ul li:first-child { 28 border-left: 1px solid blue; 29 } 30 31 .tab ul li.active { 32 background-color: orange; 33 } 34 35 .tab div { 36 width: 500px; 37 height: 300px; 38 display: none; 39 text-align: center; 40 font-size: 30px; 41 line-height: 300px; 42 border: 1px solid blue; 43 border-top: 0px; 44 } 45 46 .tab div.current { 47 display: block; 48 } 49 </style> 50 </head> 51 <body> 52 <div id="myApp"> 53 <p>1.计算器案例</p> 54 <div> 55 <input type="text" v-model="num1">+<input type="text" v-model="num2"> 56 <button @click="Add">求和</button> 57 <br> 58 <div>结果为:{{result}}</div> 59 </div> 60 <p>2.选项卡切换案例</p> 61 <div class="tab"> 62 <ul> 63  66 <li :key="index" @click="Change(index)" v-for="(item,index) in list" :class="index==currentIndex?activeClass:''"> 67 {{item.title}} 68 </li> 69 </ul> 70  73 74 <div :key="index" v-for="(item,index) in list" :class="index==currentIndex?'current':''"> 75 <img :src="item.path"> 76 </div> 77 </div> 78 79 </div> 80 81 <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> 82 <script type="text/javascript"> 83 var vm = new Vue({ 84 el: "#myApp", 85 data: { 86 num1: '', 87 num2: '', 88 result: '', 89 currentIndex: 0, // 选项卡当前的索引 90 activeClass: 'active', 91 list: [{ 92 id: 1, 93 title: 'apple', 94 path: 'img/apple.png' 95 }, { 96 id: 2, 97 title: 'orange', 98 path: 'img/orange.png' 99 }, { 100 id: 3, 101 title: 'lemon', 102 path: 'img/lemon.png' 103 }] 104 }, 105 methods: { 106 //相加方法 107 Add: function() { 108 this.result = parseInt(this.num1) + parseInt(this.num2); 109 }, 110 //切换 111 Change: function(index) { 112 this.currentIndex = index; 113 } 114 } 115 }); 116 </script> 117 118 </body> 119 </html></pre> ! <ul style="list-style: none; padding: 0; margin-left: 20px"> <li style="margin-bottom: 1px; line-height: 28px">作者 : Yaopengfei(姚鹏飞)</li> <li style="margin-bottom: 1px; line-height: 28px">博客地址 : http://www.cnblogs.com/yaopengfei/</li> <li style="margin-bottom: 1px; line-height: 28px">声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。</li> <li style="margin-bottom: 1px; line-height: 28px">声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。</li> </ul> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid60918-0.html' class='tagbtn' target='_blank'>09-Vue全家桶</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> 一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="/skin/bootstrap.bundle.js"></script> </body> </html>