你的位置:首页 > Java教程

[Java教程]vue.js学习笔记(Directives)


                                                         

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

  第一篇主要是想谈谈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-componentv-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 }