vue.js中指令Directives详解


Posted in Javascript onMarch 20, 2017

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验。 

vue.js中指令Directives详解

第一篇主要是想谈谈vue.js中的Directives即指令,在vue.js中指令就是一个通知库进行某些具体的dom操作的口令,在html中表现为如下形式:

<element
 prefix-directiveId="[argument:] expression [| filters...]">
</element>

Directives分为1.Reactive Directives、2.Literal Directives、3.Empty Directives,下面结合具体的api阐述他们的作用:

1.Reactive Directives(响应式指令)

Reactive Directives可以绑定在Vue实例或者在Vue实例上下文中求值的表达式上,当绑定的对象发生改变时,指令中的update()会在下一个系统单位时间发生异步响应,我们来看看具体的用法:

v-text:更新元素的textContent,事实上在html中{{mustache}}形式的插入值也会被编译为针对一个textNode的v-text指令。

v-html:更新元素的innerHTML,由于可能插入恶意代码,使用时要注意保证来源安全。

v-show:根据绑定值的true或false来决定所在元素在网页中正常显示还是显示为空。

v-class:这个指令有一个可选参数,无参数时将绑定值(一般为class名)添加到所在元素的classlist当中,并且一旦检测绑定值有改动,便随之改变classlist里对应的class;提供参数时参数的true或false将决定绑定值(class)是否被添加到所在元素的classlist中,示例如下:

<span v-class="
 red : hasError,
 bold : isImportant,
 hidden : isHidden
"></span>

v-attr:更新所在元素的某些属性(由参数表示)。

<canvas v-attr="width:w, height:h"></canvas>

v-style:更新所在元素的样式,会智能添加浏览器供应商前缀,方便我们书写样式。这个指令有一个可选参数,无参数时,若绑定值为String则将绑定值设置为元素的style.cssText,若绑定值为Object则将Object中的样式键值对放入元素的style object当中;

<div v-style="myStyles"></div>
// myStyles can either be a String:
"color:red; font-weight:bold;"
// or an Object:
{
 color: 'red',
 // both camelCase and dash-case works
 fontWeight: 'bold',
 'font-size': '2em'
}

提供参数时,参数指明了css属性的对应值:

<div v-style="
 top: top + 'px',
 left: left + 'px',
 background-color: 'rgb(0,0,' + bg + ')'
"></div>

v-on:为元素添加并更新事件监听器,参数可以是一个处理函数或者一个函数语句。

<div id="demo">
 <a v-on="click: onClick">Trigger a handler</a>
 <a v-on="click: n++">Trigger an expression</a>
</div>

我们可以为处理函数提供参数,其中this指的是当前的ViewModel,如下例中通过传入this参数改变元素的text值:

<ul id="list">
 <li v-repeat="items" v-on="click: toggle(this)">{{text}}</li>
</ul>
new Vue({
 el: '#list',
 data: {
 items: [
  { text: 'one', done: true },
  { text: 'two', done: false }
 ]
 },
 methods: {
 toggle: function (item) {
  item.done = !item.done
 }
 }
})

我们还可以传入$event表示触发处理函数的DOM事件,如下例传入$event阻止事件冒泡:

<button v-on="click: submit('hello!', $event)">Submit</button>
/* ... */
{
 methods: {
 submit: function (msg, e) {
  e.stopPropagation()
 }
 }
}
/* ... */

在监听键盘事件时由于要判断按键值,可以结合filter写成如下两种形式:

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on="keyup:submit | key 13">
<!-- same as above -->
<input v-on="keyup:submit | key enter">

当ViewModel销毁时,v-on绑定的事件会自动消除,我们不必亲自去清理这些绑定事件,这也防止了内存的泄露。 

v-model:为表单元素创建一个双向绑定,详细介绍请看这里 

v-if:根据绑定值的true或false来插入或移除元素,如例子中我们将根据test的正确与否决定两个<p>元素是否插入<template>当中

<template v-if="test">
 <p>hello</p>
 <p>world</p>
</template>
 

v-repeat:为绑定数组或对象中的每一个item创建一个子ViewModel,或者为绑定的数字值创建对应数量的子ViewModel。并根据绑定值的改变随时更新。没有提供参数时子ViewModel会直接使用绑定数组中的分配单元作为它的$data,如果值不是一个对象,则会创建一个数据包装对象,而值会被设置在别名为$value的 key 上。

<ul>
 <li v-repeat="users">
 {{name}} {{email}}
 </li>
</ul>

如果提供了参数,我们将创建一个数据包装对象,将参数作为对象的key,从而访问对象模板中的属性:

<ul>
 <li v-repeat="user : users">
 {{user.name}} {{user.email}}
 </li>
</ul>

v-with:这个指令只能结合接下来讲到的v-component指令使用,作用是让子ViewModel可以继承父ViewModel的数据,我们可以传入父ViewModel的属性对象或单个属性,在子ViewModel中访问:

// parent data looks like this
{
 user: {
 name: 'Foo Bar',
 email: 'foo@bar.com'
 }
}

继承对象:

<my-component v-with="user">
 <!-- you can access properties without `user.` -->
 {{name}} {{email}}
</my-component>

继承单个属性:

<my-component v-with="myName: user.name, myEmail: user.email">
 <!-- you can access properties with the new keys -->
 {{myName}} {{myEmail}}
</my-component>

v-events:这个指令也只能结合接下来讲到的v-component指令使用,它使得父ViewModel能够监听子ViewModel上的事件,我们要注意区分v-on与v-events,v-events监听的是通过vm.$emit()创建的 Vue 组件系统事件,而不是 DOM 事件。我们举例说明:

<!-- inside parent template -->
<div v-component="child" v-events="change: onChildChange"></div>

当子ViewModel调用this.$emit('change', …)时会触发父ViewModel的onChildChange()方法,并且把emit函数中附加的参数传给onChildChange()方法。 

2.Literal Directives(字面指令)

字面指令并没有绑定到某一个对象上,字面指令是把它们的参数作为纯字符串传给bind()函数中执行一次,字面指令可以接受{{mustache}}表达式,但是该表达式只会在编译阶段执行一次,不会绑定数据的改变:

下面看一看具体的api:

v-component:之前提到过,这是使用我们提前声明并注册好的组件构造器将当前元素编译为子ViewModel,从而实现数据继承,之后的文章会详细介绍组件系统。 

v-ref:在父ViewModel中创建子ViewModel的引用,方便父ViewModel中的$对象访问子组件:

<div id="parent">
 <div v-component="user-profile" v-ref="profile"></div>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$.profile

这个指令只能与v-component和v-repeat一起使用,与v-repeat一起使用时,其value是与绑定数据数组对应的子组件数组。 

v-el:为当前dom元素创建一个引用,供其自身vue实例使用,例如<div v-el="hi">可以使得vm.$$.hi访问到该dom元素 

v-partial:将当前dom元素中的innerHTML替换为事先注册的partial,有两种写法,{{ mustache}}可以让dom元素随数据改变而更新: 

<!-- content will change based on vm.partialId -->
<div v-partial="{{partialId}}"></div>

另一种写法则没有数据跟随更新的效果:

<div>{{> my-partial}}</div>

v-transition:为当前dom元素在指定参数值作用时添加动画效果,后续文章会详细介绍 

3.Empty Directives(字面指令)

v-pre:这个指令是通知编译器跳过当前dom元素和其所有子元素,这是为了在我们编程过程中对无需编译的元素节省编译时间

v-cloak:在当前元素编译完成之前改指令都会存在,我们一般使用这个指令来在元素编译未完成时隐藏原始的 {{ Mustache }} 模板,可以在css中这样写:

[v-cloak] { display: none }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
理解jquery事件冒泡
Jan 03 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
基于vue的fullpage.js单页滚动插件
Mar 20 #Javascript
windows下vue.js开发环境搭建教程
Mar 20 #Javascript
js中DOM三级列表(代码分享)
Mar 20 #Javascript
深入对Vue.js $watch方法的理解
Mar 20 #Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 #Javascript
js获取当前周、上一周、下一周日期
Mar 19 #Javascript
浅析bootstrap原理及优缺点
Mar 19 #Javascript
You might like
PHP:风雨欲来 路在何方?
2006/10/09 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JQUERY dialog的用法详细解析
2013/12/19 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
javascript简易画板开发
2020/04/12 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python读写配置文件的方法
2015/06/03 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python的argparse库使用详解
2018/10/09 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
大学生职业规划论文
2014/01/11 职场文书
村班子对照检查材料
2014/08/18 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年班务工作总结
2014/12/02 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript