vue.js中指令Directives详解

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjsknockoutjs等已经被广泛运用的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-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 }

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

(0)

相关推荐

  • 前端框架Vue.js中Directive知识详解

    Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对

  • 简单学习vue指令directive

    本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下 1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: new Vue({ directives:{ dirName:{ //定义指令 } } }); 2.指令的定义 指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期 bind: 只调用一次,指令

  • vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)

    前言 大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive.下面话不多说了,来一起看看详细的介绍: directive 这个单词是我们写自定义指令的关键字哦 自定义指令为我们提供了几个钩子函数,这时候你一定好奇什么是钩子函数,说简单点,就是集中表现状态 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑

  • 详解Vue2.x-directive的学习笔记

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令. 官方建议directive是对纯 DOM 元素进行底层操作使用,一般情况下还是建议使用组件的复用. directive的意义 自定义指令是用来操作DOM的. 尽管数据驱动是Vue的核心之一,但是在实际情况下,并不是所有的情况都可以用数据来驱动视图,我们不

  • Vue.directive自定义指令的使用详解

    很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el

  • vue.js中指令Directives详解

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

  • Vue.js的模板语法详解

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 使用"Mustache"语法 (即用双大括号包裹) 的文本插值: <span>Message: {{ msg }}</span>

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • Vue.js学习之过滤器详解

    前言 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • Vue.js render方法使用详解

    前注: 版本限制: Vue.js 2.0+ 1.0无法使用 没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结 非使用render方法的情况 完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js">&

  • vue.js路由跳转详解

    本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <rout

  • JS中Location使用详解

    javascript中location地址对象描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗口对象>.location". 一.JS中Location的含义 1.Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个

随机推荐

其他