Vue插值、表达式、分隔符、指令知识小结

作者: 日期:2019-08-20

分隔符

vue.config是一个对象,包含了vue.js的所有全局配置,可以在vue实例化前修改其中的属性

delimiters

vue.config.delimiters = [" %","% 

如果修改了默认的分隔符,则文本插值中的语法{{example}}变成 %example%

unsafedelimiters

 vue.config.unsafedelimiters = [" $","$ 

如果修改了默认的html插值分隔符,则html插值的语法由{{example}}变成 example exampleexample

指令

这里写图片描述

v-if 可以根据表达式的值在dom中生成或移除一个元素。支持template语法,惰性语法-如果初始渲染时条件为假,则什么也不做,在条件第一次为真时才开始局部编译
v-show 可以根据表达式的值显示或者隐藏html元素。不支持template语法。
v-if有更高的切换消耗,而v-show有更高的初始渲染消耗,因此,如果需要频繁地切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好
v-else
它必须跟着v-if或v-show,充当else功能
v-modal






用在input、select、text、checkbox、radio等表单控件元素上创建双向数据凯发888国际娱乐网绑定

 input type="text" v-modal="data.name" placeholder="" / 

v-modal上可以加多个参数number、lazy、debounce

v-for 数据重复渲染指令

vue.js 1.0.17及以后版本支持of分隔符;vue.js 0.12.8及以后版本支持in分隔符。

 li v-for="item in items" 
 {{$index}}-{{item.name}}
 /li 

v-for可以和vue.js提供的内置过滤器和排序数据一起使用。

 filterby

 语法:filterby searchkey [in datakey…]

 用法:

 input v-modal="searchtext" 
 li v-for="user in users | filterby searchtext in 'name'" {{name}} /li 
 /ul 

再输入框输入名称,ul数据会根据输入的值,在users的name字段中过滤出我们想要的信息,并展示出来。



用法:

 li v-for="user in users | orderby field reverse" {{user.name}} /li 
 /ul 

在ul标签中根据field变量代表的tag字段正序排列数据







v-bind指令用于响应更新html特性,将一个或多个attribute,或者一个组件prop动态绑定到表达式。v-bind可以简写:

 img v-bind:src="imgsrc" 
 img :src="imgsrc" 

在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。

.sync-双向绑定,只能用于prop
.once-单项绑定,只能用于prop
.camel-将绑定的特性名字转换回驼峰命名。只能用于普通html特性的绑定,通常用于绑定用驼峰命名的svg特性,比如viewbox。



 my-component :prop.sync="something" /my-component 

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定;表达式可以是一个方法的名字或一个内联语句;如果没有修饰符,也可以省略。

 !--方法处理器-- 
 button v-on:click="dothis" /button 
 !--内联语句-- 
 button v-on:click="dothis" /button 
 !--缩写-- 
 button @click="dothis" /button 

v-on后面可以添加的修饰符:

.stop-调用event.stoppropagation
.prevent-调用event.preventdefault
.capture-添加事件监听时使用capture模式
.self-只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keycode|keyalias}-只在指定按键上触发回调。vue.js提供的键有:[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]





v-ref




v-el

为dom元素注册一个索引,方便通过所属实例的els访问这个元素。可以用v el:some el设置this. els访问这个元素。可以用v el:some el设置this.els访问这个元素。可以用v-el:some-el 设置this.els.someel.

 span v-el:msg hello /span 
 span v-el:other-msg world /span 

通过this.$els获取响应的dom元素:

this.$els.msg.textcontent //- "hello"
this.$els.othermsg.textcontent //- "world"

v-pre


v-cloak

v-cloak这个指令保持在元素上直到关联实例结束编译。和css [v-cloak]{display:none}一起使用,这个指令可以隐藏未编译的mustache标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到mustache标签,然后看到编译后的数据。

 div v-cloak 
 {{message}}
 /div 

下面看下去除vue插值表达式{{}}

vue 提供了v-cloak指令,该指令会绑定在元素上直到关联实例结束编译。

[v-cloak] {style:display:none} 和v-cloak一起使用时,会隐藏mustach标签

直到实例准备完毕。


总结

首页
电话
短信
联系