Vue--系统指令(基础)
Vue概念:vue是mvvm模式的，直接操作dom开销较大，先获取dom，修改里边的内容，但是用vue的话，直接视图和模型绑定，不管是视图的数据发生改变还是模型的数据发生改变，其都是关联的，不需要直接操作dom，效率更高。
一.Vue的简单使用例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 {{message}} 12 </div> 13 </body> 14 <script src="../vue2.4.4.js"></script> 15 <script> 16 //如果要使用vue需要创建一个新的vm对象 17 var vm = new Vue({ 18 //要操作的dom元素 19 el: "#app", 20 //提供数据 21 data: { 22 message: "小追命又回来了" 23 } 24 //如果要使用vue来操作视图需要使用vue内置的一些系统指令： 25 // {{ 属性 }} 输出 26 }); 27 </script> 28 </html>
二.基本输出指令
1.{{}}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <p>姓名：{{name}}</p> 12 <p>年龄：{{age + 1}} ----- {{ age>=18?"成年":"未成年"}} </p> 13 <!-- 如果大于18说明成年，如果小于18说明未成年 --> 14 </div> 15 </body> 16 <script src="vue2.4.4.js"></script> 17 <script> 18 //如果要使用vue需要创建一个新的vm对象 19 var vm = new Vue({ 20 //要操作的dom元素 21 el: "#app", 22 //提供数据 23 data: { 24 name: "小追命", 25 age: 18 26 } 27 //如果要使用vue来操作视图需要使用vue内置的一些系统指令： 28 // {{ 属性 }} 输出 29 // 输出指令只能输出内容不能加入一些判断：if for语句 30 }); 31 </script> 32 </html>
2.v-text和v-html指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- v-text:可以给元素设置一些文本值，会将字符串原样输出 --> 12 <div v-text="msg1"> </div> 13 <!-- v-html 可以给元素设置一些文本值，会将标签解析为dom元素--> 14 <div v-html="msg2"> </div> 15 </div> 16 </body> 17 </html> 18 <script src="vue2.4.4.js"></script> 19 <script> 20 var vm = new Vue({ 21 el:"#app", 22 data:{ 23 msg1:"<h1>小追命v-text</h1>", 24 msg2:"<h1>小追命v-html</h1>", 25 } 26 }); 27 </script>
3.v-cloak和提前加载vue.js取消元素的闪速的效果
闪烁：由于浏览器先加载dom结构
解决方法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 /* 方法2： */ 10 [v-cloak]{ 11 display: none; 12 } 13 </style> 14 <!-- 防止页面闪烁方法1 --> 15 <!-- <script src="vue2.4.4.js"></script> --> 16 </head> 17 <body> 18 <div id="app"> 19 <!-- 方法2： --> 20 <span v-cloak> {{name}}</span> 21 <!-- cloak 解决闪烁原理：就是在加载vue代码之前这个元素先让它在页面上隐藏起来， 22 等到vue加载成功以后才会将元素显示出来 --> 23 </div> 24 </body> 25 </html> 26 <script src="vue2.4.4.js"></script> 27 <script> 28 var vm = new Vue({ 29 el:"#app", 30 data:{ 31 name:"小追命" 32 } 33 }); 34 </script>
4.v-mode和v-bind实现双向数据绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 1. 如果要给文本框设置属性最好使用：v-model属性来设置 13 2. 可以让文本框中的数据实行双向绑定 14 --> 15 <input type="text" title="帅帅的" v-model="name"> 16 <span v-text="name"></span> 17 <!-- v-mode 和v-bind要一起才能实现数据双绑定 18 为了其它的属性也依赖于name属性我们需要学习新的指令:v-bind 19 --> 20 <input type="text" v-bind:title="name" v-model="name"> 21 <!-- 22 v-bind可以简写 ":" 号 23 --> 24 <input type="text" :title="name" v-model="name"> 25 <!-- <a v-bind:href="del?id=id" >删除元素</a> 这样两个id 是不行的 --> 26 <a v-bind="{href:'del?id='+id}">删除元素</a> 27 </div> 28 </body> 29 </html> 30 <script src="vue2.4.4.js"></script> 31 <script> 32 var vm = new Vue({ 33 el:"#app", 34 data:{ 35 id:2, 36 name:"帅帅的" 37 } 38 }); 39 </script>
5.v-for遍历数组、对象数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!-- 解决闪烁问题 --> 9 <script src="vue2.4.4.js"></script> 10 </head> 11 <body> 12 <div id="app"> 13 <ul > 14 <!-- 15 16 v-for遍历数据: 17 v-for可以用来遍历数组，item 是遍历的项 index是下标 18 在vue1.0版本中index是放在item之前的 19 在vue2.0版本中index是放在item之后的 20 21 --> 22 <li v-for="(item,index) in arr" ::key="index">{{item}}-----------{{index}}</li> 23 </ul> 24 25 26 27 <!-- 28 v-for遍历对象 29 参数右三个： 30 item:当前项 31 key:键 32 Index:下标 33 性能优化 :key="index" 34 作用: 告诉vue底层将来我的数组中有对象不应该将所有的数据都更新， 35 只需要更新改变的那一条就行了 36 原因: 因为有了这个标识后，vue底层会给遍历生成的每一个元素添加一个唯一标识，将来只要与这个标识相关的数据发生了改变， 37 vue的底层会根据这个唯一的表示找到元素将里面的结构重新生成 38 注意: key与index关键字跟我们在遍历时出现的item index key没有任何关系，它仅仅只是vue一种优化标识 39 --> 40 <ul> 41 <li v-for="(item,key,index) in obj"> 42 {{item}}----------{{key}}---------{{index}} 43 </li> 44 </ul> 45 </div> 46 </body> 47 </html> 48 49 <script> 50 new Vue({ 51 el:"#app", 52 data:{ 53 arr:['追命',"无情","冷血","铁手"], 54 obj:{ 55 name:"追命", 56 age:18, 57 height:180 58 } 59 } 60 }); 61 </script>
6.使用v-on给元素绑定事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 需求:点击按钮得到name中的属性 --> 12 <button v-on:click="getValue">点我得到数据v-on:</button> 13 <!-- 简写：直接去掉v-on：改为@ --> 14 <button @click="getValue">点我得到数据@</button> 15 <input type="text" v-model="name" @keydown="getRes($event)"> 16 <input type="text" v-model="name" @keydown.13="getR()"> 17 </div> 18 </body> 19 </html> 20 <script src="vue2.4.4.js"></script> 21 <script> 22 new Vue({ 23 el:"#app", 24 data:{ 25 name:"吴彦祖" 26 }, 27 // 提供方法 28 methods:{ 29 getValue:function(){ 30 // 这里面的this指的是vue对象 31 alert(this.name); 32 }, 33 getRes:function(ev){ 34 // keydown是当我们按下所有键的时候都会触发，我们应该判断只有按下enter键时才应该执行代码 35 // 键盘上的每个键按下都会有一个keycode返回enter键的keycode是13 36 if(ev.keyCode==13) { 37 alert(this.name); 38 } 39 }, 40 getR:function(){ 41 alert(this.name); 42 } 43 } 44 }); 45 46 </script>
7.v-if和v-show的区别和使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=div"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 需求: 通过按钮来控制v-show中的元素的显示与隐藏 --> 12 <button @click="showHide">点我显示/隐藏</button> 13 <!-- 14 v-if可以用来控制元素是否显示： 15 true 显示 16 false 隐藏 17 v-if隐藏会将元素 完全隐藏,用一个占位来进行占位 18 19 --> 20 <span v-if="ifValue" v-text="name"></span><br> 21 <!-- 22 v-show可以用来控制元素是否显示： 23 使用display:none;来隐藏元素 24 --> 25 <span v-show="showValue" v-text="name"></span> 26 </div> 27 </body> 28 </html> 29 <script src="vue2.4.4.js"></script> 30 <script> 31 new Vue({ 32 el:"#app", 33 data:{ 34 name:"ithaha", 35 ifValue:true, 36 showValue:true 37 }, 38 methods:{ 39 showHide:function() { 40 this.showValue = !this.showValue; 41 } 42 } 43 }); 44 </script>
三.完成品牌管理案例的删除和增加功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #app { 11 width: 600px; 12 margin: 10px auto; 13 } 14 15 .tb { 16 border-collapse: collapse; 17 width: 100%; 18 } 19 20 .tb th { 21 background-color: #0094ff; 22 color: white; 23 } 24 25 .tb td, 26 .tb th { 27 padding: 5px; 28 border: 1px solid black; 29 text-align: center; 30 } 31 32 .add { 33 padding: 5px; 34 border: 1px solid black; 35 margin-bottom: 10px; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="app"> 42 <div class="add"> 43 编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text"> 44 <button @click="add">添加</button> 45 </div> 46 <div class="add">品牌名称：<input type="text"></div> 47 <div> 48 <table class="tb"> 49 <tr> 50 <th>编号</th> 51 <th>品牌名称</th> 52 <th>创立时间</th> 53 <th>操作</th> 54 </tr> 55 <tr v-if="list.length <= 0"> 56 <td colspan="4">没有品牌数据</td> 57 </tr> 58 <!--加入: key="index" 时候必须把所有参数写完整 --> 59 <tr v-for="(item,key,index) in list" :key="index"> 60 <td>{{item.id}}</td> 61 <td>{{item.name}}</td> 62 <td>{{item.ctime}}</td> 63 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 --> 64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td> 65 </tr> 66 </table> 67 </div> 68 69 </div> 70 </body> 71 72 </html> 73 <script src="vue2.4.4.js"></script> 74 <script> 75 var vm = new Vue({ 76 el: "#app", 77 data: { 78 id: 0, 79 name: '', 80 list: [ 81 { "id": 1, "name": "it哈哈", "ctime": Date() }, 82 { "id": 2, "name": "娃哈哈", "ctime": Date() } 83 ] 84 }, 85 methods: { 86 add: function () { 87 //将id和namepush到list数组中 88 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() }); 89 }, 90 del:function(id) { 91 92 // 根据id得到下标 93 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， 94 var index = this.list.findIndex(function(item){ 95 //根据item中的id属性来判断这个item是否是上面id中 96 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 97 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外接 98 }); 99 // 根据下标在list集合中将对应的数据删除 100 // splice(开始删除的下标，删除的长度) 101 this.list.splice(index,1); 102 } 103 } 104 }); 105 106 </script>
