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


Posted in Javascript onOctober 12, 2018

最近打算重温一遍vue的知识,正好总结一份笔记。

插值

基本用法

<span>Text:{{text}}</span> 
<span v-text="text"></span> 这个属于指令
<li data-id="{{id}}"></li>

有时候只需要渲染一次数据,后续数据变化不再关心,可以通过“*”实现

<span>Text:{{*text}}</span>

如果是html片段,可以这样表示

<span v-html="text"></span> 这个属于指令
<span>Text:{{{text}}}</span>

表达式

表达式是各种数值、变量、运算符的综合体

{{ cents/100 }}
 {{ true?1:0 }}
 {{ example.split(",") }}

无效示例

{{ var logo= 'DDFE' }}
{{ if(true) return 'DDFE' }}

添加过滤器,允许过滤器串联,还支持传入参数

{{ example | toUpperCase }}
{{ example | filterA | filterB }}
{{ example | filter a b }}

分隔符

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

delimiters

Vue.config.delimiters = ["<%","%>"];

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

unsafeDelimiters

Vue.config.unsafeDelimiters = ["<$","$>"];

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

指令

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

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等表单控件元素上创建双向数据绑定

<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" class="item-{{$index}}">
 {{$index}}-{{item.name}}
 </li>

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

 (1)filterBy

 语法:filterBy searchKey [in dataKey…]

 用法:

<input v-modal="searchText">
 <ul>
 <li v-for="user in users | filterBy searchText in 'name'">{{name}}</li>
</ul>

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

(2) orderBy

语法:orderBy sortKey [reverseKey]

用法:

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

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

v-text

v-text指令可以更新元素的textContent,作用和{{Mustache}}一样

v-html

v-html指令可以更新元素的innerHtml,作用和{{{Mustache}}}一样

不建议在网站上直接动态渲染任意的HTML片段,容易导致XSS攻击。

v-bind

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('hello',$event)"></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

在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

当v-ref和v-for一起使用时,注册的值是一个数组,包含所有子组件,对应于绑定数组;

如果v-for使用在一个对象上,注册的值是一个对象,包含所有子组件,对应于绑定对象。

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

编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

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标签

直到实例准备完毕。

具体参考http://vuejs.org.cn/api/#v-cloak

总结

以上所述是小编给大家介绍的Vue插值、表达式、分隔符、指令知识小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 #Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 #Javascript
开发用到的js封装方法(20种)
Oct 12 #Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
You might like
PHP 第一节 php简介
2012/04/28 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
vuex存储token示例
2019/11/11 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python远程linux执行命令实现
2020/11/11 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
小学网上祭英烈活动总结
2014/07/05 职场文书
安全演讲稿开场白
2014/08/25 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
叶问观后感
2015/06/15 职场文书
2016母亲节感恩话语
2015/12/09 职场文书