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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
JavaScript监听触摸事件代码实例
Dec 30 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脚本的10个技巧(3)
2006/10/09 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
github配置使用指南
2014/11/18 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
西北政法大学自主招生自荐信
2014/01/29 职场文书
建筑工地标语
2014/06/18 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python