成都创新互联网站制作重庆分公司

vue.js中指令Directives详解

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

创新互联建站主要从事成都网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务北塔,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

vue.js中指令Directives详解

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



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中,示例如下:


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

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

// 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属性的对应值:

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

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

  • {{text}}
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阻止事件冒泡:


/* ... */
{
 methods: {
 submit: function (msg, e) {
  e.stopPropagation()
 }
 }
}
/* ... */

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





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

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

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

元素是否插入