经常使用 v-bind；v-for,v-model

二、本地应用

用vue的方式来开发常见的网页效果。

（一）、内容绑定，事件绑定

1、插值表达式{{}}

{{}}可以在改变部分内容时用，不会解析标签

2、v-text

设置标签的文本值，它同{{}}一样可以改变文本内容。但是不同的是它将直接替换标签的innerText 。 innerText（不标准）和innerHtml 的含义 JavaScript （二）（ DOM（元素的操作）,BOM（windows对象的常见事件），PC 端网页特效异度（动画函数...））_白灵一的博客-CSDN博客

3、v-html

设置标签的innerhtml，有HTML结构的text将被解析出来

<div id="app"><!-- 插值表达式  {{}} --><h2> {{ message+'!' }}nihao</h2><h2 v-text="message+'!'">nihao</h2><p v-text="content">nihao</p><p v-html="content">nihao</p><p>{{content}}</p></div><script>var app = new Vue({el: '#app',data: {message: 'hello world',content: "<a href='http://www.baidu.com'>去百度</a>",}})</script>

4、v-on

为元素绑定事件，v-on:click/mouseenter/dblclick或者简写@click/mouseenter/dblclick="定义的事件"

<div id="app">  <input type="button" value="单击事件" v-on:click="doIt" /><input type="button" value="双击事件" @dblclick="doIt" /><p @mouseenter="changesong">{{ song }}</p></div>var app = new Vue({el: '#app',data: {song: "樱花草"},methods: {doIt: function () {alert('做IT');},changesong: function () {this.song += "nice";},},})

例题：计数器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- 计数器功能实现 --><div class="input-num"><button @click="mult_counter">-</button><span>{{counter}}</span><button @click="add_counter">+</button></div></div><script src = './js/vue.js'></script><script>var app = new Vue({el: '#app',data: {counter: 1,},methods: {add_counter: function () {if (this.counter < 10) {this.counter += 1;}else{alert('数量不可以超过10');}},mult_counter: function () {if (this.counter > 1) {this.counter -= 1}else{alert('数量不可以小于1')}},},})</script></body>
</html>

（二）、显示切换（条件渲染），属性绑定

1、v-show

表达式的真假（解析值为bool值即可），切换元素的显示和隐藏（原理：修改display）

2、v-if

v-if 同v-show但是它的原理是直接操作dom数 （直接删除标签）

还有： v-eles-if v-else

使用 template 不用 div 的原因是 template 可以起到作用将下面的标签框起来的作用，但是后面会自动将其去掉。不想div 一样一直存在！

3、*v-bind

设置元素的属性的值(将属性的值设在methods或者data中）（属性内容置为空）

v-bind:scr/class等简写:src/class

v-bind 关注的是属性的值，所有当其值是数字或者表达式等都会以相应的格式展示出来。而不是字符串！

例题：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.active{border: 4px solid red;}</style></head><body><div id="app"><button v-show="19>17">取消v-show</button><!-- 点击图片添加样式 --><img :src="data:imageSrc" :title="imageTitle+'!'" :class="{active:isActive}" @click="toggleActive"/><button v-if="!isshow">取消v-if</button></div><script src="./js/vue.js"></script><script>var app = new Vue({el:"#app", //#指id选择器data:{isshow:false,imageSrc:"./shitang/zhengjiao.png",imageTitle:"蒸饺",isActive:true,},methods:{toggleActive:function(){this.isActive =!this.isActive;}}})</script></body>
</html>

v-bind 的用途：

1、可以动态绑定class 属性

给class加上v-bind ，可以动态的决定绑定哪一个属性。

此处通过点击按钮来取反，动态的改变class 的取值

2、可以动态的更新属性，使用于一些需要动态的更新的data，或者methods等。此外使用它后可以被解析为表达式而不单单的字符串！！！

（1）、全部为true时：

（2）、全部为false时：

注意：

（三）、列表循环，事件修改符，表单元素绑定

1、v-for

根据数据生成列表结构 （item，index） in 数据 （item，index名字可以自由改动），

数据：可以是 数组（常用），对象，字符串，次数

当只有一个参数是，指的是项，在本例中是item；

当有两个参数是，第一个指的是项，第二个指的是索引；

没有三个或者三个以上的参数。

对比（Diff）算法：

当 key值对比发现与初始的一致，则顺延向后对比，如果与之前的内容一致，则使用之前内容，反之如果与之前的不一致，则用新的内容，相互比较直至下一个key ；

当 key值与之前的key 不一样就用新的，之后一直到下一个key 对比，该过程中间的所有内容都不再对比直接用新的！

不写默认将key值用索引代替。

key作用： 增加了节点的复用率，提高了效率

1、列表过滤（常用计算属性）

计算属性和监听属性实现列表过滤

filter(p) 方法指的是将p中的符合方法里面条件的一些内容过滤掉，返回符合条件的内容。

2、列表排序

先筛选，再排序sort

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表排列</title><script src="./js/vue.js"></script></head><body><div id="app"><input placeholder="输入姓名" v-model="keyWord"><button @click="sortType=2">年龄升序</button><button @click="sortType=1">年龄降序</button><button @click="sortType=0">原顺序</button><ul><li v-for="(item,index) in filPersons">{{item.name}} - {{item.age}}</li></ul></div><script>new Vue({el: '#app',data: {keyWord: '',persons: [{ id: '1', name: 'LiMing', age: 18 },{ id: '2', name: '李华', age: 28 },{ id: '3', name: '王华', age: 19 },{ id: '3', name: '小李', age: 20 },],sortType: 0,  // 0原序列，1降序 2升序},computed: {filPersons() {// 先过滤const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) != -1;})// 再排序if (this.sortType) {// 这里 a，b 指的是 arr中的两个元素arr.sort((a, b) => {if (this.sortType === 1)return b.age - a.age;  //降序elsereturn a.age -b.age;  //升序})}return arr;},}})</script>
</body></html>

2、v-on

补充传递自由参数，事件修改符（事件的后面跟上.修饰符可以对事件进行限制，如.enter回车触发）如：@keyup.enter="sayHai" 当enter键触发事件鼠标弹起时触发函数sayhai（）；

事件修饰符：

修饰符可以联合使用

按键修饰符：

1、

2、

key 和 keyCode 不一样，两个组合的键需要分别小写且用 ' - ' 来连接

3、

4、

3、v-model

获取和设置表单元素（如输入框等）的值（双向数据绑定）（获取后的值和设定的值实现了同步）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Temole3</title></head><body><div id="app"><input type="button" value="添加数据" @click="add" /><input type="button" value="删除数据" @click="remove" /><ul><li v-for="(item,index) in arr" >{{index+1}}. 数字有：{{item}}</li></ul><h2 v-for="(item,index) in objArr" >名字有：{{item.name}}</h2><!-- 点击下传递的参数显示在控制台   --><input type="button" value="点击" @click="change('李明','王华')" /><!--text：输入框； keyup：键盘事件，默认每输入一个触发一次；enter：回车时触发 --><input type="text" @keyup.enter="sayHai"><!-- message的值和输入框里的值实现了同步 提示框中显示修改后的message值 --><input type="text" v-model="message" @keyup.enter="getM"></div><script src="./js/vue.js"></script><script>var app = new Vue({el: '#app',data: {message:"警告",arr: [1, 2, 3],objArr: [{ name: 'jack' }, { name: 'liMing' }],},methods: {add: function () {this.objArr.push({ name: '李华' })},remove: function () {this.objArr.shift()},change:function(p1,p2){// 显示在控制台  console.log(p1,p2);},sayHai:function(){alert("你好");},getM:function(){alert(this.message);}},})</script></body>
</html>

（1）、v-for 列表循环展示数字

（2）、v-on 事件修饰 @keyup.enter="sayHai"

（3）、v-model 表单元素双向绑定，可以这表单赋值，也可以将表单值取出来

4、v-cloak 指令

解决网速慢时，vue 没有解析成功，页面上出现一些没有引入vue 的一些情况，如：{{}}

5、v-once 指令

获取初始值

6、 v-pre 指令

vue跳过不编译，提高了效率

7、自定义指令

调用的时间： 1、指令与元素成功绑定（自定义成功）2、指令所在的模板被从新解析时。

1、函数式的

写在Vue 实例里

directives:{big(element,binding){element.style.color = 'red';element.innerText = binding.value * 10;}}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令</title><script src="./js/vue.js"></script></head>
<body><div id="root">数字n: <h1 v-text="n"></h1>数字n变红: <h1 v-big="n"></h1><br/><button @click="n++">n自增</button></div><script>new Vue({el:'#root',data:{n:1,},// 自定义指令-函数式 调用的时间：  1、指令与元素成功绑定（自定义成功） // 2、指令所在的 模板 被从新解析时。// 这里自定义指令时 取v-changeRabig 时不能定义directive ？directives:{big(element,binding){element.style.color = 'red';element.innerText = binding.value * 10;}}})</script></body>
</html>

2、对象式的

获取焦点，拿父元素等；此时函数式的不能满足条件，需要对象式的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令</title><script src="./js/vue.js"></script></head>
<body><div id="root"><!-- 第一次刷新页面时 输入框自动聚焦 -->获取n: <h1 v-text="n"></h1><button @click="n++" >n自增</button><br><input type="text" v-fbind="n"></div><script>new Vue({el:'#root',data:{n:1,},directives:{// 自定义指令-对象式，里面常用的三种方法 bind、inserted、update 它们都有两种参数// 函数式 里面 没有 inserted() fbind:{// 指令与元素成功绑定时调用bind(element,binding){element.value = binding.value;console.log("bind...")},// 指令所在元素被插入页面时调用inserted(element,binding){element.focus();console.log("指令所在元素被插入页面")},// 指令所在模板被重新解析update(element,binding) {element.value = binding.value;console.log("指令所在模板被重新解析")},}}})</script></body>
</html>