常见指令

发布于 2020-01-26 20:37:48   阅读量 118  点赞 0  

v-once

 执行一次性地插值,当数据改变时,插值处内容不会更新。  

v-cloak

 解决由于源文件引用延迟造成的闪烁问题。

<p v-cloak>{{ msg }}</p>

v-text

 将属性作为变量名,将变量渲染在标签元素中。v-text没有闪烁问题,但会覆盖元素中原有的内容。

<p v-text="msg"></p>

v-html

 Mustache语法与v-text指令都会将数据解释为普通文本,为了将字符串内容作为html代码解析,应使用v-html指令,其用法同v-text。  

v-bind

 普通Mustanche语法不能作为属性值,若要将变量的内容作为属性值,应使用v-bind。且在v-bind中可以写合法的Js表达式,但只能包含单个表达式。使用v-bind的时候可以使用简写形式

<input type="text"  v-bind:value="msg+'123'" />

v-on

v-on指令提供了事件绑定机制,格式为v-on:事件="回调方法"v-on可使用其缩写形式@

<input type="button" v-on:click="show" />
1.事件修饰符
  • .stop:阻止冒泡;
  • .prevent:阻止默认事件;
  • .caputure:事件监听器使用捕获模式,即由外向内的传递;
  • .self:仅当事件在该元素本身(不属于任何子元素)触发时回调;
  • .once:事件仅触发一次。 用法:v-on:事件.事件修饰符="回调方法"
2.按键修饰符

 监听键盘/鼠标事件时,可以使用按键修饰符监听详细的按键。

<input v-on:keyup.enter="submit" />

 虽然仅有部分按键有别名,但键盘上任意按键都有对应的keycode(按键码),使用按键码来指定按键也是允许的:

<input v-on:keyup.13="submit" />

 也可以通过全局对象config.keyCodes定义按键修饰符别名:

Vue.config.keyCodes.f1 = 112

v-model

 提供基于属性值的数据双向绑定。将变量绑定到属性时,v-bind只能实现数据的单向绑定,即从M到V的绑定,而使用v-model能实现V到M的绑定,即双向绑定。

<input type="text" v-model="msg" />

v-model只能用于表单元素(只有表单元素能实现交互)。

v-for

  1. 渲染数组: 在v-for块中,可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数,即当前项的索引。

  2. 迭代对象: 迭代对象时,遍历的是对象的属性值。同时也可以提供第二个参数作为属性名(键名),提供第三个参数作为索引。

  3. 迭代数字

     <p v-for="i in 10">第{{ i }}个元素。</p>
    

      #### v-if / v-show  控制元素是否显示。

    <p v-if="flag">blablabla</p>
    

  区别:

  1. v-if:每次切换都会重新删除或创建元素,若元素涉及到频繁的切换,最好不要使用v-if,而是使用v-show
  2. v-show:不会重新进行DOM的删除与创建操作,而是操作元素的display属性,但有初始渲染小号,若元素可能永远也不会被显示出来,而推荐使用v-show。  

绑定样式

一、使用class样式
  1. 数组

     <p :class="['class1','class2']">something right there</p>
    
  2. 数组中使用三元表达式

     <p :class="['class1','class2',flag?'class3':'']">something right there</p>
    
  3. 数组中嵌套对象

     <p :class="['class1','class2',{'class3':flag}]">something right there</p>
    
  4. 直接使用对象

     <p :class="{class1:true,class2:false}">something right there</p>
    

二、使用内联样式
  1. 使用样式对象

     <p :style="{color:'red','font-size':'40px'}">something right there</p>
    

    或:

     data :{
         StyleObj:{'color':'red','font-size':'40px'}
     }
    
     <p :style="StyleObj">something right there</p>
    
  2. 通过数组引用多个样式对象

     <p :style="[StyleObj1,StyleObj2]">something right there</p>
    


Last Modified : 2020-03-09 20:37:48