关于vue.js:Vue指令

内容解决

• v-once
• v-text
• v-html

v-once : 使元素外部的插值表达式只失效一次

<div id="app">  <p v-once> {{xxxxx}} </p></div>

v-text : 元素内容整体替换为指定纯文本数据

• 与插值表达式区别：插值表达式是用来进行元素动静设置的，v-text是间接将 纯文本内容 设置为 指定数据，会笼罩老元素

• 只会显示纯文本，增加标签元素，也不会生成标签元素

  <div id="app"><p v-text="content"> 这段内容会被笼罩 </p></div>

  new Vue({el:"#app",data:{  content:"我是新内容" // 纯文本  content:"<span> span内容 </span>" // 非纯文本 不会生成span标签}})

  ---

  v-html ：元素内容整体替换为指定的HTML文本

• 相似于v-text，然而非纯文本能够转换成对应元素

  <div id="app"><p v-html="content"> 这段内容会被笼罩 </p></div>

  new Vue({el:"#app",data:{  content:"我是新内容" // 纯文本 ok  content:"<span> span内容 </span>" // 非纯文本 生成span标签}})

属性绑定

v-bind指令：v-bind指令用于动静绑定HTML属性

• Class绑定
• Style绑定

内容绑定办法只能解决内容，如果对标签属性进行解决，通过绑定属性

<div id="app">  <p v-bind:title ="content_title"> 内容 </p>  <p :title ="content_title"> 内容 </p>  // 简写</div>

new Vue({  el:"#app",  data:{    content_title :"我是title属性内容",    demo:"hello"  }})

• v-bind容许应用表达式 , 与插值表达式相似

• 不容许应用语句内容 <p :class ="var num = 10"> , error

  <div id="app"><p :class ="'demo'+3"> 内容 </p> // ok</div>

• 如果须要一次绑定多个属性，还能够绑定对象。

  <div id="#app"><p v-bind="attrObj"> 内容 </p></div>

  new Vue({el:"#app",data:{  attrObj:{    id :"box", // id属性    title :"我是title", // title属性    class :"clsbox", // class属性    'data-title':"这是内容" // 自定义属性  }}})

  ---

  Class绑定

• class是HTML属性，能够通过v-bind进行绑定，并且能够与class属性共存

  <div id="app"><p class="a" :class= "clsbox"> 内容 </p></div>

  new Vue({el:"#app",data:{  clsbox:"x" // 此时增加了两个class 一个 "a" 一个 "x", clsbox是动静绑定的}})

  注意事项

• 元素多个动静类名的绑定的谬误写法

  <p class="a" :class= "clsbox clsbox1 clsbox2"> 内容 </p>  // error<p class="a" :class= "clsbox"> 内容 </p>  // ok

  new Vue({el:"#app",data:{  clsbox:"x y z" // 多动静名称 不罕用  // clsbox1:"y"  // clsbox2:"z"}})

• 三元运算动静增加 class

  <p class="a" :class= "bol ? clsbox1 : clsbox2"> 内容 </p>  // ok

  new Vue({el:"#app",data:{  bol:true,  clsbox1:"y",  clsbox2:"z"}})

• 如果类名既有条件判断，又同时存在多个类名，组合则写法比较复杂。对于class绑定，Vue.js中还提供了非凡解决形式。

• 对象表示法，键示意类名，值示意键是否失效。对于带横线类名用引号包裹

  <p :class= "{ b:isB, c:isC, 'class-d':true }"> 内容 </p>

  new Vue({el:"#app",data:{  isB:true,  isC:false}})

• 数组表示法，对 对象表示法 的扩大

  <p :class= "['a',{ b:isB, 'class-d':true }, c]"> 内容 </p>

  new Vue({el:"#app",data:{  isB:false,   // 此时有 a class-d z 三个属性  c:"z"}})

  ---

  Style绑定

• style是HTML属性，能够通过v-bind进行绑定，并且能够与style属性共存。
• 不倡议写在行内不好保护，倡议从 data 中获取 , 留神要加单位px等。

• 雷同属性，框架会优先取 绑定的属性的值

  <p style="width=50px;" :style= "styleObj"> 内容 </p>

  new Vue({el:"#app",data:{  styleObj:{    width:'100px',  // 笼罩之前设置的 50px width    height:'100px',    border:'1px solid #ccc',    backgroundColor:'red', // 驼峰    'font-size':'30px' // 非驼峰  }}})

• 当咱们心愿给元素绑定多个款式对象时，能够设置为数组

  <p :style= "[styleObj1 , styleObj2]"> 内容 </p>

  new Vue({el:"#app",data:{  styleObj1:{ ... },  styleObj2:{ ... }}})

  罕用于公共款式和独自款式的组合

渲染指令

• v-for
• v-show
• v-if

v-for指令

• 用于遍历数据渲染构造，罕用的数组与对象均可遍历。
• 哪个元素要屡次创立，将指令增加到哪个元素

• 遍历时的参数： index为索引,key为键

  <div id="app"><ul>  <li v-for="(item,index) in arr">{{ item }}</li> // 数组</ul><ul>  <li v-for="(val,key,index) in obj">{{ val }}</li> // 对象</ul></div>

  new Vue({el:"#app",data:{  arr:["1","asd",2],  obj:{     content1:"内1",    content2:"内2"  }}})

• 数值遍历 : 实用于没有根底数据，凭空创立 数值个 元素

<div id="app">  <ul>    <li v-for="(item,index) in 5">{{ item }}</li>  // 1,2,3,4,5  </ul></div>

注意事项

• 应用v-for的同时，应始终指定惟一的 key属性
• key属性是通过 v-bind 绑定的一个属性，是标识 每项的 惟一值
• for循环中 index下标 无奈作为 key，如果属性值也不惟一（无奈作为key）。能够把数据改成对象，增加惟一key属性

• 为什么会要增加key?

  • vue.js 在进行构造渲染时，会为了进步执行效率，对于构造统一的内容只进行修补操作，不会进行移除替换，因而用户输出的内容得以保留未被删除。

如图，初始时文本1->输入框1，一一对应。当控制台执行 vm.arr.reverse() 时

vue 批改而非替换的操作，会导致构造和内容不统一

正确写法

<ul>  <li v-for="item in items" :key="item.id">{{ item }}</li></ul>

• 通过<template>标签设置模板占位符，能够将局部元素或内容作为整体进行操作。
• template 不会生成标签，只是占位符，外部内容是个整体，能够只对整体进行反复增加。
• 如果用div，会额定减少div标签，可能并不是咱们想要的构造。

• 因为 template 自身不是元素，无奈绑定 key 属性

  <div id="app"><template v-for="(item,index) in items">  <span>{{ 标签内容1 }}</span>  <span>{{ 标签内容2 }}</span></template></div>

  ---

  v-show指令

• 用于管制元素显示与暗藏，实用于显示暗藏频繁切换时应用

• 通过display 管制元素显示和暗藏

  <div id="app"><p v-show="true">这个元素显示</p><p v-show="false">这个元素暗藏</p><p v-show="2>11">这个元素暗藏</p><p v-show="bol">这个元素看bol值</p></div>

  注意事项：

• template无奈应用 v-show 指令，不是元素

v-if指令

• 用于依据条件管制元素的创立与移除。

• 不适宜频繁的显示暗藏，因为他是移除和创立，是耗费性能的操作

  <div id="app"><p v-if="false">这个元素不会创立</p><p v-else-if="true">这个元素会创立</p><p v-else-if="true">这个元素不会创立</p> // 上一个进了这个不会进<p v-else>这个元素不会创立</p></div>

  注意事项：

• 给应用v-if 的同类型元素绑定不同的 key

如图，增加了v-if 和 v-else

• 当bool=true时，代码会运行至 v-if，此时给输入框输出123。
• 批改 bool，当bool=false时，代码会执行v-else内的代码，输入框内的 123 也被第二个输入框保留
• 这种代码形式 利用于在用户登陆时，应用账号，手机号，邮箱等 , 款式统一，然而不同性能元素切换登录时，输入框内判断逻辑不同必定是不同的。
• 问题也产生在，vue对雷同构造进行修补，而不是移除旧的，创立新的

正确做法，增加key绑定

<div id="app">  <p v-if=" type === 'username' " :key="'username'">    用户输入框： <input type="text">  </p>  <p v-else :key="'email'">    邮箱输入框： <input type="text">  </p></div>

• 出于性能思考，应防止将v-if 与v-for利用于同一标签

例如有个列表，要通过指定数据 v-for 循环创立， 同时列表内每项的 创立和移除 还要取决于某个条件

v-for的优先级会更高，如果此时v-if=false，则v-for执行是毫无意义的，还会耗费不必要的性能

解决办法，创立列表循环的v-for操作赋予子元素li，v-if条件判断赋予父元素ul

此函数执行效率很低

<div id="app">  <ul>    <li v-if="false" v-for="item in items">{{ item }}</li>  </ul></div>

new Vue({  el:"#app",  data:{    items:{       content1:"内1",      content2:"内2",      content3:"内3",    }  }})

批改后

<div id="app">  <ul v-if="false">   // 放到父元素,false时 外部的 v-for不会被执行    <li v-for="item in items">{{ item }}</li>  </ul></div>

其余批改办法，既然遍历的循环对象有判断，那么咱们把判断写在办法内，即在遍历前解决遍历的数据

<div id="app">  <ul>    <li v-for="item in handleItems()">{{ item }}</li>  </ul></div>

事件处理

• v-on

v-on指令

• 用于进行元素的事件绑定。
• 当事件处理程序较少时，能够间接写在行内，尽量不要，不好保护

• 能够指定 methods 函数 处理事件

  <div id="app"><p>{{ content }}</p><button v-on:click=" content='新内容' ">按钮</button><button @click=" content='新内容' ">按钮</button>   // 简写<button @click="fn">按钮</button>   // methods 函数设置</div>

  new Vue({el:"#app",data:{  content:"默认内容"},methods:{  fn(){    this.content='新内容'  }}})

• 设置事件处理程序后，能够从参数中接管事件对象 event。

  new Vue({el:"#app",data:{  content:"默认内容"},methods:{  fn(event){   // 接管事件对象    console.log(event)   }}})

• 在 视图中 能够通过 $event 拜访事件对象。

• 当传参时也想拜访event事件对象，能够通过传入 $event在 办法中获取 event 对象

  <div id="app"><p>{{ content }}</p><button @click="fn(content, $event)">按钮</button> // 本人传参也想拜访event事件对象时</div>

  new Vue({el:"#app",data:{  content:"默认内容"},methods:{  fn(content,event){    console.log(content)    console.log(event)  }}})

  表单输出绑定

• v-model

v-model指令

• 用于给可输出元素 <input>、<textarea>及<select>元素设置双向数据绑定。
• 当输入框输出时，依赖v-model的变量的元素都会动静扭转
• v-model 不能应用表达式，如果要计算，能够增加计算属性双向绑定

• v-model 本质就是 v-bind+v-on:input事件联合

  <div id="app"><p>{{ value }}</p><input type="text" v-model="value"></div>

  new Vue({el:"#app",data:{  value:""}})

  输入框绑定

  输入框分为单行输入框input与多行输入框 textarea

  <div id="app"><p>{{ value1 }}</p><input type="text" v-model="value1"><p>{{ value2 }}</p><textarea v-model="value2"></textarea></div>

  单选按钮绑定

  单选按钮的双向数据绑定形式如下:

  <div id="app"><p>{{ value3 }}</p><input type="radio" id="one" value="1" v-model="value3"><label for="one">选项一</label><input type="radio" id="two" value="2" v-model="value3"><label for="two">选项二</label></div>

  new Vue({el:"#app",data:{  value3:""  // 选哪个，哪个input 的 value 就会赋给 value3}})

  复选框绑定

  复选框绑定分为单个选项与多个选项两种状况，书写形式不同

单个复选框利用，可勾可勾销

<div id="app">  <p>单复选框： {{ value4 }}</p>  <input type="checkbox" id="item" value="内容" v-model="value4">  <label for="item">选项</label>    <p>多复选框： {{ value5 }}</p>  <input type="checkbox" id="one" value="选项一内容" v-model="value5">  <label for="one">选项一</label>  <input type="checkbox" id="two" value="选项二内容" v-model="value5">  <label for="two">选项二</label></div>

单复选和多复选区别在于

• 点击单复选时，返回true / false示意是否勾选， value4值不会返回。然而value4仍然要设置，如果解决作表单提交，提交的值是value4

• 多复选是个数组，寄存每个复选框的value5值，且value5值必须不同

  new Vue({el:"#app",data:{  value4:"",  // 单复选  value5:[] // 多复选}})

  抉择框绑定

  抉择框绑定分为单选绑定与多选绑定两种状况，书写形式不同。

  <div id="app"><p>单选select： {{ value6 }}</p>  // 显示的是option的value值<select v-model="value6">   // v-model绑定给select  <option value="">请抉择</option> // 默认选项，无实际意义  <option value="1">选项一</option>  <option value="2">选项二</option>  <option value="3">选项三</option></select><p>多选select： {{ value7 }}</p><select v-model="value7" multiple>  <option value="1">选项一</option>  <option value="2">选项二</option>  <option value="3">选项三</option></select></div>

  var vm = new Vue({data:{  value6:'',  value7:[]},}).$mount("#app")

  按住ctrl进行多选

v-model 小结

• input输入框:绑定字符串值。
• textarea输入框:绑定字符串值。
• radio:绑定字符串值。
• checkbox:单个绑定布尔值，多个绑定数组。
• select:单选绑定字符串，多选绑定数组。