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 Archive Network 集合
May 12 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
基于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
怎样在UNIX系统下安装php3
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP7 标准库修改
2021/03/09 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python3处理HTTP请求的实例
2018/05/10 Python
pandas如何处理缺失值
2019/07/31 Python
python selenium操作cookie的实现
2020/03/18 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
商务英语专业求职信
2014/06/26 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
聘用合同范本
2015/09/21 职场文书