前端框架vue学习
1、VUE概述
1. Vue.js 是什么？
- Vue.js 是简单小巧，渐进式，功能强大的技术栈
2. Vue.js 的模式
- MVVM模式，视图层和数据层的双向绑定，让咱们无需再去关心DOM操做的事情，更过的精力放在数据和业务逻辑上去
3. Vue.js 环境搭建
- script 引入 src（如：
<script src="../lib/vue.js" type="text/javascript"></script>
） - vue 脚手架工具 vue-cli 搭建
4.Vue.js 的优势
- 低耦合。视图（View）能够独立于 Model 变化和修改，一个 ViewModel 能够绑定到不一样的 "View" 上，当 View 变化的时候 Model 能够不变，当 Model 变化的时候 View 也能够不变。
- 可重用性。能够把一些视图逻辑放在一个 ViewModel 里面，让不少 view 重用这段视图逻辑。
- 独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计。
- 可测试。界面素来是比较难于测试的，而如今测试能够针对 ViewModel 来写。
- 易用、灵活、高效。
2、VUE的指令学习
1.text+html+cloak+插值表达式学习
指令：
插值表达式：
语法：{{要插入的值}}，此时至关于占位符，到时候{{关键字}}会被替换成
Model中的数据
bug点：
当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕以后又会被替换成真实结果，形成闪烁（Vue的加载代码写在
HTML元素以后时会出现该bug）
v-cloak指令：
语法：把它看成HTML元素的一个属性使用
示例：
<p v-cloak>{{msg1}}</p>
特色：
当Vue加载完毕后，v-cloak属性会自动消失
使用：
添加以下CSS样式：让全部带v-cloak属性的元素隐藏，Vue加载完成后显示
实现，解决插值表达式闪烁的问题
[v-cloak]{
display: none;
}
v-text：
语法：<p v-text="msg1"></p>
做用：和插值表达式同样，用于给HTML元素添加文本
区别：
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据彻底替换到HTML元素中（覆盖）
3.插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
相同点：
1.插值表达式和v-text均可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）
v-html：
和v-text的惟一区别：给HTML添加内容时会解析内容中的HTML
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak、v-text、v-html指令以及插值表达式的学习</title> <style> [v-cloak]{ display: none; }
</style> </head> <body> <h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1> <div id="app"> <p v-cloak>{{msg1}}</p> <p>{{msg1}}</p> <p v-text="msg1"></p> <p v-text="msg2"></p> <p>{{msg2}}</p> <p v-html="msg2"></p> </div> <script src="../lib/vue.js" type="text/javascript"></script> <script type="text/javascript"> //vue应用对象 var vm = new Vue({ ////绑定属性 el:"#app", data:{ msg1:"Hello", msg2:"<p style='color:red'>我是一个p标签</p>" } }); </script> </body> </html>
编辑测试的结果：javascript
2.bind+on指令的学习
v-bind：
语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例：
<label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
var vm = new Vue({
el:"#app",
data:{
msg:"我是来自Model中的内容！",
name:"李师师"
}
});
注意：
1.【v-bind:】用于绑定HTML元素属性的值
2.【v-bind:】能够简写为:
3.Vue框架会把使用了v-bind:标识的HTML的属性的值看成一个Javascript表达式来使用
只要表达式合法，就能执行（固然，数据必须时字面量或来自于Model中）
如：
:value="msg+'你好'"
:value="msg+name"
v-on：
语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
示例：
<button v-on:click="sayHello(name)">点击下显示你好</button>
<button @click="sayHello(name)">点击下显示你好</button>
var vm = new Vue({
el:"#app",
data:{
msg:"我是来自Model中的内容！",
name:"李师师"
},
methods:{
sayHello:function (name) {
alert("你好！"+name);
}
}
});
注意：
1.常见的web网页的事件都支持绑定
2.事件名字不带on
3.事件触发的方法必须在methods中定义
4.v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范
都能正确执行（好比传入参数）
4.【v-on:】等价于【@】
实例演示：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind、v-on指令的学习</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <h1>v-bind、v-on指令的学习</h1> <div id="app"> <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label> <hr/> <label>用户名：<input type="text" name="username" :value="msg" /></label> <hr/> <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label> <hr/> <label>用户名：<input type="text" name="username" :value="msg+name"></label> <button v-on:click="sayHello(name)">点击下显示你好</button> <button @click="sayHello(name)">点击下显示你好</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{
msg:"我是一个练习长达两年半的练习生！",
name:"菜徐坤"
}, methods:{ sayHello:function (name) { alert("你好！"+name); } } }); </script> </body>
测试结果：
点击按钮css
3.VUE中的事件修饰符
1.事件默认是会冒泡的（点击内部元素，会逐层向外扩散，相同的事件就会被触发---冒泡）
阻止方式：给须要阻止冒泡的事件加上stop修饰
特色：事件到了加了stop修饰的元素时就会被阻断
2.阻止元素的默认事件
元素默认会执行它的默认事件
默认事件：
2.1：超连接的跳转
2.2：表单的提交
阻止方式：给须要阻止默认事件的事件绑定加上prevent修饰
3.使用事件捕获模式处理事件（触发事件的顺序和事件冒泡恰好相反）
特色：加了capture事件修饰的容器先捕获到事件，而后按照冒泡顺序
触发，固然若是其它元素也设置了capture事件修饰，则按照修饰顺序来
使用方式：给须要使用捕获机制处理的事件绑定加入修饰符capture
4.事件源是自身时才触发事件
使用方式：给元素绑定的事件中加入self修饰，此时只有事件源是元素自己时
才会触发事件
特色：
1.能阻止事件冒泡
2.只能阻止自身的事件不被触发，而其子元素和父元素依然知足冒泡行为
或捕获机制
3.这是stop和self之间的一个差距
5.限定事件有效次数为1
使用方式：给元素绑定的事件加入once修饰，表示此事件只会执行一次
特色：绑定事件只执行一次，那么意味着事件的全部修饰也会在事件无效后消失
好比：事件冒泡和默认行为
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的事件修饰符</title> <script src="../lib/vue.js" type="text/javascript"></script> <style type="text/css"> div[id]{ box-sizing: border-box; } #outer{ width: 400px; height: 400px; background-color: yellow; padding: 100px; } #inner{ width: 200px; height: 200px; background-color: red; padding: 50px; } #content{ width: 100px; height: 100px; background-color: deeppink; } </style> </head> <body> <h1>Vue中的事件修饰符</h1> <div id="app"> <!--阻止事件冒泡--> <!--<div id="outer" @click="outerClick()"> <div id="inner" @click.stop="innerClick()"> <div id="content" @click="contentClick()"></div> </div> </div>--> <!--阻止默认事件--> <hr/> <a href="https://www.baidu.com" @click.prevent="aClick">点击跳转到百度</a> <hr/> <form action="https://www.baidu.com"> <button @click.prevent="btnClick">点击提交表单</button> </form> <!--使用捕获机制处理绑定事件--> <!--<div id="outer" @click.capture="outerClick()"> <div id="inner" @click.capture="innerClick()"> <div id="content" @click.capture="contentClick()"></div> </div> </div>--> <!--使用self表示自身触发--> <div id="outer" @click="outerClick()"> <div id="inner" @click.self="innerClick()"> <div id="content" @click="contentClick()"></div> </div> </div> <!--阻止默认事件--> <hr/> <a href="https://www.baidu.com" @click.prevent.once="aClick">点击跳转到百度</a> <hr/> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{}, methods:{ contentClick(){ console.log("content被点击了..."); }, innerClick(){ console.log("inner被点击了..."); }, outerClick(){ console.log("outer被点击了..."); }, aClick(){ console.log("a被点击了..."); }, btnClick(){ console.log("btn被点击了..."); } } }); </script> </body> </html>
测试结果：
4.双向数据绑定以及实现简易计算器
v-mode：惟一的一个实现双向数据绑定的指令
语法：
<input type="text" v-model="num1" />
data:{
num1:'0',
num2:'0'
}
适用元素：表单元素，其它元素不能使用v-model指令
input系列（能够输入内容的）、select、textarea
双向绑定：
model层数据的改变会影响view层HTML结果
HTML中表单元素值的改变会写入对应的model层的数据中
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的双向数据绑定指令v-mode</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <div class="box"> <h1>Vue中的双向数据绑定指令v-mode</h1> <label>单价：<input type="text" v-model="price"></label><br/> <label>数量：<input type="text" v-model="num"></label><br/> <button @click="calc()">点击计算总价</button><br/> <label>总价：<span style="color:deeppink" v-text="sum"></span></label> <hr/> <h1>使用v-mode双向数据绑定实现建议计算器</h1> <label>操做数1：<input type="text" v-model="num1" /></label> <select v-model="opr"> <option value="+">+</option> <option value="-">-</option> <option value="*">x</option> <option value="/">/</option> </select> <label>操做数1：<input type="text" v-model="num2" /></label> <button @click="doCalc()">=</button> <span style="font-size: 20px;color:deeppink" v-text="result"></span> </div> <script type="text/javascript"> var vm2 = new Vue({ el:".box", data:{ price:12, num:1, sum:12, num1:'0', num2:'0', opr:'+', result:0 }, methods:{ calc(){ this.sum = this.price*this.num; }, doCalc(){ //标准的switch分支根据计算类型不一样获得不一样结果 /*switch(this.opr){ case "+": this.result = parseInt(this.num1)+parseInt(this.num2); break; case "-": this.result = parseInt(this.num1)-parseInt(this.num2); break; case "*": this.result = parseInt(this.num1)*parseInt(this.num2); break; case "/": this.result = parseInt(this.num1)/parseInt(this.num2); break; }*/ //使用eval计算获取结果 this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)"); } } }); </script> </body> </html>
测试结果：
5.Vue给行内元素绑定上样式属性
Vue绑定元素样式：
Vue实现行内样式：
方式1：传入JavaScript对象{样式名字1:值1,样式名字2:值2...}
方式2：传入一个Vue中的Model层的一个属性值
方式3：传入一个Vue中的Model层的多个属性值组成的数组
Vue实现class样式：
方式1：直接传入单个class的名字
:class="'color'"
方式2：传入class名字组成的数组
:class="['color','fontSize']"
方式3：使用三目表达式实现样式的逻辑加入
:class="['color','fontSize',false?'active':'']"
:class="['color','fontSize',5>3?'active':'']"
:class="['color','fontSize',flag===false?'active':'']"
方式4：数组中嵌套对象
:class="['color','fontSize',{active:false}]"
方式5：整个class的值就使用数组
:class="{color:true,fontSize:false,space:true,style:true,active:false}
方式6：从Vue的Model中获取class值
:class="[classInBox01,classInBox02]"
【注意】
1.JavaScript的对象中，属性能够不使用引号（单双）
2.当属性包含字符-的时候，必须使用引号，不然会报错
3.使用vue绑定class值时，class的值必须使用引号引发来，不然会看成变量从Model中查找
4.使用vue绑定class值时，若是值为对象，则不能加引号
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用Vue给元素绑定样式属性</title> <script src="../lib/vue.js" type="text/javascript"></script> <style type="text/css"> .color{ color: deeppink; } .fontSize{ font-size: 30px; } .space{ letter-spacing: 0.5em; } .style{ font-style: italic; } .active{ background-color: yellow; } </style> </head> <body> <div id="app"> <h1 v-bind:style="{color:'red','font-size':'20px'}">我是一个H1标题，它会发生不少变化喔~</h1> <h1 v-bind:style="innerStyle01">我是一个H1标题，它会发生不少变化喔~</h1> <h1 v-bind:style="[innerStyle01,innerStyle02]">我是一个H1标题，它会发生不少变化喔~</h1> <hr/> <h1 :class="'color'">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class='"color"'>我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="['color','fontSize']">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="['color','fontSize',false?'active':'']">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="['color','fontSize',5>3?'active':'']">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="['color','fontSize',flag===false?'active':'']">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="['color','fontSize',{active:false}]">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="{color:true,fontSize:false,space:true,style:true,active:false}">我是一个H1标题，它会发生不少变化喔~</h1> <h1 :class="[classInBox01,classInBox02]">我是一个H1标题，它会发生不少变化喔~</h1> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ innerStyle01:{color:'red','font-size':'20px'}, innerStyle02:{"letter-spacing":"1em"}, flag:true, classInBox01:{color:true,fontSize:false}, classInBox02:{space:true,style:true,active:false} } }); </script> </body> </html>
测试结果：
6.VUE中的for指令
1.使用v-for指令遍历简单数组
<p v-for="name in names">{{name}}</p>
<p v-for="name,index in names" v-text="name+'---'+index"></p>
2.使用v-for指令遍历对象数组
<p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>
3.使用v-for指令遍历对象属性值
<p v-for="value,key in cqCity">{{key+'--'+value}}</p>
4.使用v-for指令遍历数字（做用就是标准的for循环次数遍历）
<p v-for="num,index in 12" v-text="num+'---'+index"></p>
【注意】
1.遍历获得的值可使用【插值表达式、v-text、v-html】显示
2.无论遍历何种数据类型，均可以获得值和索引
3.遍历对象属性和值时能够获得【值、属性名字、索引】
4.值的赋值顺序是：值、【键名】、索引
5.一次遍历中，多个结果之间使用,分割便可对应赋值（value,key,index）
6.遍历过程当中接受值的变量名字能够任意
7.遍历数字时数字是从1开始，不能是负数（由于该功能是固定次数遍历）
8.在组件中使用数据时，必定要用key惟一绑定数据（保证对UI组件的操做不会由于其它组件的变化而发生变化）
注意：
1.key必须是基本数据类型（string/number）
报错：Avoid using non-primitive value as key, use string/number value instead.
2.key的数据值必定不要重复
报错：Duplicate keys detected: '3'. This may cause an update error.
技巧：通常使用对象中的值惟一属性（主键）做为key，好比id
语法：
<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
</p>
【知识点】
1.若是组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定
2.数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
3.在遍历对象数组并结合组件（表单元素）一块儿使用时，必定要指定惟一的key属性，进行组件和数据
的惟一关联，避免被其它操做（指非本元素）影响
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的for指令</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <h1>Vue中的for指令</h1> <p v-for="name in names">{{name}}</p> <hr/> <p v-for="name,index in names" v-text="name+'---'+index"></p> <hr/> <p v-for="user in users" v-text="user"></p> <hr/> <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p> <hr/> <p v-for="value,key in cqCity">{{key+'--'+value}}</p> <hr/> <p v-for="num in 12" v-text="num"></p> <hr/> <p v-for="num,index in 12" v-text="num+'---'+index"></p> <h1>Vue中的for指令实现数据绑定</h1> <label>id：<input type="text" v-model="id"/></label> <label>name：<input type="text" v-model="name"/></label> <label>age：<input type="text" v-model="age"/></label> <label><button @click="add()">添加人员信息</button></label> <p v-for="user in users" :key="user.id"> <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label> </p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ names:["陈斯","杨晓露","徐子雁","冉春嫦","冷芹","冉维","彭丽敏","王超群","彭前"], users:[ {id:1,name:"胡歌",age:32}, {id:2,name:"袁弘",age:33}, {id:3,name:"霍建华",age:35} ], cqCity:{no:"渝",level:"市",area:["渝北区","渝中区","江北区","沙坪坝区","江北区"]}, id:'', name:'', age:'' }, methods:{ add(){ //this.users.push({id:this.id,name:this.name,age:this.age}); this.users.unshift({id:this.id,name:this.name,age:this.age}); } } }); </script> </body> </html>
测试结果：html
7.VUE的if和show指令
v-if和v-show指令：
v-if和v-show的区别？
1.v-if切换元素状态的具体操做是（建立元素--删除元素）
比较消耗建立性能
2.v-show切换元素状态的具体操做是（修改css的display样式）
比较消耗渲染性能
使用技巧：
若是该元素会常常显示/隐藏，则使用v-show
若是该元素默认状况下不会显示（大多数时候不会显示），则使用v-if
代码技巧：
若是使用vue绑定的方法只有一句代码，则能够直接写在绑定结果中
<button @click="flag=!flag">控制元素的显示隐藏</button>
实例：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的if和show指令</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1> <div id="app"> <button v-on:click="toggle()">控制元素的显示隐藏</button> <button @click="flag=!flag">控制元素的显示隐藏</button> <p v-if="flag">我是使用v-if控制的p标签</p> <p v-show="flag">我是使用v-show控制的p标签</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ flag:true }, methods:{ toggle(){ this.flag = !this.flag; } } }); </script> </body> </html>
测试结果：前端
可见点击后，原按钮下的文本信息被隐藏
8.使用Vue和bootstrap模拟数据表的操做
数组方法：
回调中的返回值不能阻止循环（必须循环完成才能获得最后结果）
forEach()---返回void，在回调内部能够作任何操做
filter()----返回过滤后的数组
回调中的返回值能够阻止继续循环（查到告终果直接结束循环）
findIndex()-返回整数（内部回调函数最终没有返回true时，则返回-1，不然返回回调过程当中的下标）
some()------返回boolean（就是回调中的return语句的结果）
元素操做：
splice(startIndex,count,...newElements)：删除从startIndex下标处开始的count个元素
还能够添加新元素newElements，返回新的数组
push(newElements)：在数组末尾添加新的元素newElements，返回新数组的长度
unshift(newElements)：在数组的最前方添加新的元素newElements，返回新数组的长度
字符串方法：
其它类型数据->字符串
var dataStr = String(其它类型数据);
var dataStr = 对象.toString();
var dataStr = 对象+'';
模板字符串：
使用飘号 `` 包裹占位模板-> var dateStr = `${year}-${month}-${dayNow}`
此时模板中的${year}等会被解析成对应变量的值 如 year month dayNow
字符串填充：
padStart(length,padContent)--在字符串的起始位置填充内容padContent，直至字符串长度为length
padEnd(length,padContent)----在字符串的结束位置填充内容padContent，直至字符串长度为length
自定义过滤器：
Vue全局过滤器：
1.必须定义在建立Vue对象以前（Javascript的边解析边执行原理）
2.定义以后在整张页面中可使用（一个页面一个Window，一个Window下只有一个Vue）
3.定义方式
参数1：固定（须要被过滤处理的数据）
参数2...参数n：过滤器被调用时传递的参数
Vue.filter("过滤器名字",function(data,param1,param2...){
});
4.调用方式
<h1>{{msg|v-过滤器名字(参数值1,参数值2...)|过滤器2...|过滤器n...}}</h1>
Vue具体对象（特定做用域）过滤器：
1.定义在一个Vue对象中
2.定义方式
var vm = new Vue({
el:"#app1",
data:{},
methods:{},
filters:{
过滤器名字:function(data,param1,param2...){
}或
过滤器名字(data,param1,param2...){
}
}
});
【注意】
1.全局过滤器必定要定义在使用Vue以前
2.Vue的过滤器执行原理
渲染内容 -- 交给第一个处理器 -- 获得结果 -- 交给第二个处理器 -- 获得结果 .... 获得结果--渲染
按键修饰符：（用于修饰键盘事件，当按键匹配时触发）
系统内置：
.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space
.up、.down、.left、.right
使用方式：
<p @keyup.enter="add()">在p标签上按下回车键</p>
<p @keyup.13="add()">在p标签上按下回车键</p>
原理：
把事件绑定后的修饰keyCode拿到Vue内部事件对象event的keyCode进行比较，匹配则触发
系统把常见的按键的keyCode和别名进行了对应（13--enter等）
自定义按键修饰：
Vue.config.keyCodes.别名=特定keyCode;
【注意】
1.自定义的按键修饰应该写在使用Vue以前
2.按键修饰是能够串联的
如 <p @keyup.enter.down="add()">在p标签上按下回车键</p> 表示按下 回车键和下键 都会触发
自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
系统内置：
v-cloak、v-text、v-html、v-bind、v-on、v-for、v-if、v-show、v-model
自定义：
全局：
1.必须定义在使用Vue以前（边解析边执行原理）
2.定义方式
参数1：指令名字
参数2：各声明周期函数组成的对象（周期函数可选重写，并不必定须要所有重写）
bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)
update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前
指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用
unbind：只调用一次，指令与元素解绑时调用
生命周期函数的参数说明：
el：指令所绑定的元素，能够用来直接操做 DOM 。
binding：一个对象，包含如下属性（def、name、rawName、value、expression、modifiers）
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
Vue.directive("指令名字",{
bind:function (el, f, vnode) {},
inserted:function (el, binding, vnode, oldVnode) {},
update:function (el, ref, vnode) {},
componentUpdated:function (el, binding, vnode) {},
unbind:function (el, binding, vnode, oldVnode, isDestroy) {}
});
局部：
定义方式：
var vm = new Vue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{
指令名字1:{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
},
指令名字2:{}
....
}
});
简易定义方式：
Vue.directive("指令名字",function(el,binding,vnode,oldVnode){
此时function中的代码会做用到bind和inserted钩子函数上
});
【注意】
1.自定义的指令，Vue系统会自动给名字加上v-
2.调用指令时，必定要加上v-，若是你的指令名字是以v-开始，则最终调用是v-v-指令名字
3.自定义的指令，须要指定其对应的钩子函数（如不指定，则使用默认实现）
4.自定义指令时，常关注的钩子函数（bind、inserted）（所以自定义指令的简写方式默认就是实现该钩子函数）
Vue数据查看工具：vue Devtools
安装：浏览器在线安装插件vue Devtools或者本地安装插件vue Devtools
使用：
1.该插件只能在使用了vue.js的站点上使用
2.该插件须要打开审查元素进行使用
3.进入审查元素时，选择vue菜单项便可
4.左侧的一个Root表明一个vue实例对象（一个做用域空间）
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用vue和Bootstrap模拟数据表的操做</title> 6 <link href="../lib/bootstrap.css" rel="stylesheet" type="text/css" /> 7 <script src="../lib/vue.js" type="text/javascript"></script> 8 </head> 9 <body> 10 11 <h1>使用vue和Bootstrap模拟数据表的操做</h1> 12 <div id="app"> 13 <div class="panel panel-primary"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">汽车品牌</h3> 16 </div> 17 <div class="panel-body form-inline"> 18 <label @keyup.enter="add()"> 19 Id： 20 <input type="text" class="form-control" v-model="id" /> 21 </label> 22 <label> 23 Name： 24 <input type="text" class="form-control" v-model="name" v-go/> 25 </label> 26 <label> 27 CTime： 28 <input type="text" class="form-control" v-model="cTime" @keyup.f2.13="add()"/> 29 </label> 30 <button class="btn btn-primary" @click="add()">添加</button> 31 <label> 32 Keywords： 33 <input type="text" class="form-control" v-model="keywords" v-focus/> 34 </label> 35 </div> 36 </div> 37 <table class="table table-bordered table-hover table-responsive table-striped"> 38 <thead> 39 <tr> 40 <th>Id</th> 41 <th>Name</th> 42 <th>CTime</th> 43 <th>Operation</th> 44 </tr> 45 </thead> 46 <!--绑定固定数据--> 47 <!--<tbody> 48 <tr v-for="car in cars" :key="car.id"> 49 <td>{{car.id}}</td> 50 <td>{{car.name}}</td> 51 <td>{{car.cTime}}</td> 52 <td><a href="#" @click.prevent="del(car.id)">删除</a></td> 53 </tr> 54 </tbody>--> 55 56 <!--绑定动态搜索数据--> 57 <tbody> 58 <tr v-for="car in search(keywords)" :key="car.id"> 59 <td>{{car.id}}</td> 60 <td>{{car.name}}</td> 61 <td>{{car.cTime|dateFormat()}}</td> 62 <td><a href="#" @click.prevent="del(car.id)">删除</a></td> 63 </tr> 64 </tbody> 65 </table> 66 </div> 67 <script type="text/javascript"> 68 //建立全局时间格式化过滤器 69 Vue.filter("dateFormat",function (data,pattern) { 70 //console.log(this,data,pattern); 71 var date = new Date(data); 72 var year = String(date.getFullYear()).padStart(2,'0'); 73 var month = String(date.getMonth()+1).padStart(2,'0'); 74 var dayNow = String(date.getDate()).padStart(2,'0'); 75 var hour = String(date.getHours()).padStart(2,'0'); 76 var minute = String(date.getMinutes()).padStart(2,'0'); 77 var seconds = String(date.getSeconds()).padStart(2,'0'); 78 if(pattern&&pattern.toLowerCase()==="yyyy-mm-dd"){ 79 return year+"-"+month+"-"+dayNow; 80 }else{ 81 return `${year}-${month}-${dayNow} ${hour}:${minute}:${seconds}`; 82 } 83 }); 84 //配置按键修饰符 85 Vue.config.keyCodes.f2=113; 86 //定义全局指令 87 //bind: function bind (el, ref, vnode) 88 Vue.directive("focus",{ 89 bind:function (el,data,vNode) { 90 console.log(el,data,vNode); 91 //el.focus(); 92 }, 93 inserted:function (el,ref,vNode) { 94 el.focus(); 95 }, 96 update:function () { 97 98 }, 99 componentUpdated:function () { 100 101 }, 102 unbind:function () { 103 104 } 105 }); 106 var vm = new Vue({ 107 el:"#app", 108 data:{ 109 id:'', 110 name:'', 111 cTime:'', 112 keywords:'', 113 cars:[ 114 {id:1,name:"兰博基尼",cTime:new Date()}, 115 {id:2,name:"保时捷",cTime:new Date()}, 116 {id:3,name:"玛莎拉蒂",cTime:new Date()}, 117 ] 118 }, 119 methods:{ 120 add(){ 121 var newCar = {id:this.id,name:this.name,cTime:this.cTime}; 122 this.cars.push(newCar); 123 this.id = this.name = this.cTime = ''; 124 }, 125 del(id){ 126 //步骤1：拿到id 127 //步骤2：根据id值删除数据 128 //真实数据库：发送请求便可 129 //模拟数据：根据对象的id值，从数组中查找出该id值对应的对象的索引 130 //步骤3：执行删除操做 131 //真实数据库：发送请求删除 132 //模拟数据：从数组中移出 133 //方法声明：some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean; 134 //this.doDel1(id); 135 //this.doDel2(id); 箭头函数 136 this.doDel3(id); 137 }, 138 doDel1(id){ 139 var _this = this; 140 var isOk = this.cars.some(function (car,index,callObj) { 141 //callObj：每次调用some方法的数组 142 //this：Window对象 143 console.log(callObj,this); 144 if(car.id === id){ 145 console.log(car); 146 //splice(start: number, deleteCount: number, ...items: T[]): T[]; 147 _this.cars.splice(index,1).unshift(); 148 return true; 149 } 150 }); 151 }, 152 doDel2(id){ 153 var isOk = this.cars.some((car,index,callObj)=>{ 154 console.log(callObj,this); 155 if(car.id===id){ 156 this.cars.splice(index,1); 157 return true; 158 } 159 }); 160 }, 161 doDel3(id){ 162 //findIndex(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number; 163 //返回找到的索引，找不到返回-1 164 var index = this.cars.findIndex((car,index,callObj)=>{ 165 if(car.id===id){ 166 return true; 167 } 168 }); 169 console.log(index); 170 if(index!==-1){this.cars.splice(index,1);} 171 }, 172 search(keywords){//执行过滤搜索 173 /*var newCars = []; 174 //forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; 175 this.cars.forEach((car,index,callObj)=>{ 176 if(car.name.indexOf(keywords)!==-1){ 177 newCars.push(car); 178 } 179 }); 180 return newCars; 181 //console.log(keywords);*/ 182 183 //filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[]; 184 var newCars = this.cars.filter((car,index,callObj)=>{ 185 //includes(searchString: string, position?: number): boolean; 186 if(car.name.includes(keywords)){ 187 return car; 188 } 189 }); 190 return newCars; 191 } 192 }, 193 filters:{}, 194 directives:{ 195 go(el,ref,vNode){ 196 console.log(el,ref,vNode); 197 } 198 } 199 }); 200 </script> 201 </body> 202 </html>
测试结果：vue
9.在vue中自定义过滤器
自定义过滤器：
Vue全局过滤器：
1.必须定义在建立Vue对象以前（Javascript的边解析边执行原理）
2.定义以后在整张页面中可使用（一个页面一个Window，一个Window下只有一个Vue）
3.定义方式
参数1：固定（须要被过滤处理的数据）
参数2...参数n：过滤器被调用时传递的参数
Vue.filter("过滤器名字",function(data,param1,param2...){
});
4.调用方式
<h1>{{msg|v-过滤器名字(参数值1,参数值2...)|过滤器2...|过滤器n...}}</h1>
Vue具体对象（特定做用域）过滤器：
1.定义在一个Vue对象中
2.定义方式
var vm = new Vue({
el:"#app1",
data:{},
methods:{},
filters:{
过滤器名字:function(data,param1,param2...){
}或
过滤器名字(data,param1,param2...){
}
}
});
【注意】
1.全局过滤器必定要定义在使用Vue以前
2.Vue的过滤器执行原理
渲染内容 -- 交给第一个处理器 -- 获得结果 -- 交给第二个处理器 -- 获得结果 .... 获得结果--渲染
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在Vue中自定义过滤器</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>在Vue中自定义过滤器</h1> 10 <div id="app1"> 11 <h4>{{msg|replaceWords('我','他')|addStartInfo('----')}}</h4> 12 </div> 13 <hr/> 14 <div id="app2"> 15 <h4>{{msg|replaceWords('你','我')|addStartInfo('----')|addEndInfo('~~~~~')}}</h4> 16 </div> 17 <script type="text/javascript"> 18 //定义全局过滤器 19 Vue.filter("replaceWords",function (data,oldWorld,newWorld) { 20 var reg = new RegExp(oldWorld,"g"); 21 return data.replace(reg,newWorld); 22 }); 23 Vue.filter("addEndInfo",function (data,endInfo) { 24 return data.concat(endInfo); 25 }); 26 var vm1 = new Vue({ 27 el:"#app1", 28 data:{ 29 msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" 30 }, 31 methods:{ 32 33 }, 34 filters:{ 35 addStartInfo(data,startInfo){ 36 return startInfo.concat(data); 37 } 38 } 39 }); 40 var vm2 = new Vue({ 41 el:"#app2", 42 data:{ 43 msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" 44 }, 45 methods:{ 46 47 } 48 }); 49 </script> 50 </body> 51 </html>
测试结果：java
10.VUE中自定义指令
自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
系统内置：
v-cloak、v-text、v-html、v-bind、v-on、v-for、v-if、v-show、v-model
自定义：
全局：
1.必须定义在使用Vue以前（边解析边执行原理）
2.定义方式
参数1：指令名字
参数2：各声明周期函数组成的对象（周期函数可选重写，并不必定须要所有重写）
bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)
update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前
指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用
unbind：只调用一次，指令与元素解绑时调用
生命周期函数的参数说明：
el：指令所绑定的元素，能够用来直接操做 DOM 。
binding：一个对象，包含如下属性（def、name、rawName、value、expression、modifiers）
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
Vue.directive("指令名字",{
bind:function (el, f, vnode) {},
inserted:function (el, binding, vnode, oldVnode) {},
update:function (el, ref, vnode) {},
componentUpdated:function (el, binding, vnode) {},
unbind:function (el, binding, vnode, oldVnode, isDestroy) {}
});
局部：
定义方式：
var vm = new Vue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{
指令名字1:{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
},
指令名字2:{}
....
}
});
简易定义方式：
Vue.directive("指令名字",function(el,binding,vnode,oldVnode){
此时function中的代码会做用到bind和inserted钩子函数上
});
【注意】
1.自定义的指令，Vue系统会自动给名字加上v-
2.调用指令时，必定要加上v-，若是你的指令名字是以v-开始，则最终调用是v-v-指令名字
3.自定义的指令，须要指定其对应的钩子函数（如不指定，则使用默认实现）
4.自定义指令时，常关注的钩子函数（bind、inserted）（所以自定义指令的简写方式默认就是实现该钩子函数）
5.bind和inserted执行时机详讲
Vue.directive("color",{
bind:function (el,binding) {
//css样式能够在bind中设置
el.style.color=binding.value; //获取指令传递过来的数据（能够是任意数据类型）
},
inserted:function (el,binding) {
//JavaScript效果等须要在inserted中设置
el.focus();
}
});
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue中自定义指令详细测试</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input v-color="'blue'" value="我是一个h1啊~" /> 11 <br> 12 <input v-color="'red'" value="我是一个h1啊~" /> 13 </div> 14 <script type="text/javascript"> 15 /*Vue.directive("color",function (el,binding,vnode,oldVnode,isDistory) { 16 console.log(this,el,binding,vnode,oldVnode,isDistory); 17 el.style.color=binding.value; 18 });*/ 19 Vue.directive("color",{ 20 bind:function (el,binding) { 21 //css样式能够在bind中设置 22 el.style.color=binding.value; //获取指令传递过来的数据（能够是任意数据类型） 23 }, 24 inserted:function (el,binding) { 25 //JavaScript效果等须要在inserted中设置 26 el.focus(); 27 } 28 }); 29 var vm = new Vue({ 30 el:"#app", 31 data:{}, 32 methods:{}, 33 filters:{}, 34 directives:{} 35 }); 36 </script> 37 </body> 38 </html>
测试结果：node
以上十种指令就是VUE的基本指令，熟练掌握以上指令，合理使用，我以为最大的便捷之处就在于，前端功能和后端功能很明显的分离，对于工做分工，明确各自职责是十分有利，同时前端可模拟进行一些数据操做，为操做真实数据提供了一些安全保障。web
相关文章
- 1. 前端学习Vue框架
- 2. 【前端框架】前端框架学习
- 3. 前端框架学习react还是vue？
- 4. 前端框架Vue学习笔记
- 5. 前端框架开始学习Vue(一)
- 6. 前端Vue框架快速学习
- 7. 前端框架之vue初步学习
- 8. 前端框架开始学习Vue(三)
- 9. 前端框架VUE
- 10. VUE前端框架
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端学习Vue框架
- 2. 【前端框架】前端框架学习
- 3. 前端框架学习react还是vue？
- 4. 前端框架Vue学习笔记
- 5. 前端框架开始学习Vue(一)
- 6. 前端Vue框架快速学习
- 7. 前端框架之vue初步学习
- 8. 前端框架开始学习Vue(三)
- 9. 前端框架VUE
- 10. VUE前端框架