vue内置指令详解


Posted in Javascript onApril 03, 2018

指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

内置指令

1、v-bind:响应并更新DOM特性;例如:v-bind:href  v-bind:class  v-bind:title  等等

主要用法是绑定属性,动态更新HTML元素上的属性;

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
<div :title='title'>标题</div>
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',

title: 'bind'
  },
})

2、v-on:用于监听DOM事件; 例如:v-on:click  v-on:keyup

顺带讲一下方法与事件

2.1 @click 的表达式可以直接使用JavaScript 语句,也可以是一个在Vue 实例中methods 选项内的函数名,可以在方法中传递参数

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething()">...</a>
//是一个方法名

<p ng-if='show'>一段文本</p>
<button @click="show=false">点击隐藏文本</button>
//直接是一个内联的语句
<button v-on:click="count++">Add 1</button>
var app = new Vue({
  el: '#app',

data:{


show: true,


counter: 0

},
  methods: {
    doSomething: function(){
      console.log(this.title);
    },
  }
})

2.2方法与事件:

Vue 提供了一个特殊变量$event ,用于访问原生DOM 事件,可以阻止事件冒泡或者阻止链接打开

写一个阻止冒泡的例子:

<div @click="stopClick1('stop1',$event)">
      <div @click="stopClick2('stop2',$event)">
        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>
      </div>
    </div>
</div>

methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

2.3修饰符:

在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符。

上面的阻止冒泡事件,可以直接用户修饰符的方式写为:

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>//不用通过$event事件再来写了

常用的一些修饰符有:

• .stop

• .prevent

• .capture

• .self

• .once

< !一阻止单击事件冒泡一〉
<a @click.stop=”handle "></a>
〈!一修饰符可以串联一〉
<a @click.stop.prevent=” handle ” ></a>
〈!一添加事件侦听器时使用事件捕获模式一〉
<div @click . capture=”handle ”> ... </div>
〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉
<div @click.self=” handle ”> ... </div>
< !一只触发一次,组件同样适用一〉
<div @click.once=” handle ”> ... </div>

在表单元素上监昕键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:

< !一只有在keyCode 是13 时调用vm.submit()一〉
<input @keyup.13 =“ submit ”〉

3、v-model:数据双向绑定;用于表单输入等;例如:< input v-model= "message">

4、v-show:条件渲染指令,为DOM设置css的style属性

5、v-if:条件渲染指令,动态在DOM内添加或删除DOM元素

6、v-else:条件渲染指令,必须跟v-if成对使用

7、v-else-if:判断多层条件,必须跟v-if成对使用;

8、v-text:更新元素的textContent;例如:<span v-text="msg"></span> 等同于 < span>{{msg}} </ span>;

9、v-html:更新元素的innerHTML;会把标签名也带上。

10、v-for:循环指令;例如:

<div id= "app ">
    <ul>
      <li v-for="book in books">{ { book.name } }</li>
    </ul>
  </div>
var app =new Vue({
  el: '#app',
  data: {
    books: [
      {name: '<vue.js实战>'},
      {name: '<javascript语言精粹>'},
      {name: '<javascript高级程序设计>'}
    ]
  }
});

10.1 v- for 的表达式遍历数组时支持一个可选参数作为当前项的索引, 例如:

<div id="app">
    <ul>
      <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
    </ul>
  </div>

10.2 v- for 的表达式遍历对象属性时,有两个可选参数,分别是键名和索引:

<div id= "app">
    <ul>
      <li v-for="(value , key , index) in user ">
        { { index } } - { { key } } : { { value } }
      </li>
    </ul>
  </div>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Aresn',
    grender: '男',
    age:23
  }
});

10.3 v- for 的表达式还可以迭代整数:

<div id="app">
    <span v-for="n in 10">{{n}}</span>
  </div>

10.4 数组更新

当我们修改数组时, Vue 会检测到数据变化,所以用v-for 渲染的视图也会立即更新。

• push()
• pop()
• shift()
• unshit()
• splice()
• sort()
• reverse()

这些方法会改变被这些方法调用的原始数组

例如,我们将之前一个示例的数据books 添加一项:

app.books.push({
  name: '《css世界》'
});

有些方法不会改变原数组,例如:

• filter()
• concat()
• slice()

它们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组,如:

app.books = app.books.filter(function (item) {
  return item . name.match(/JavaScript/);
});

Vue 在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM 元素。

替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心性能问题。

10.5 过滤与排序

当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组 ,例如: 

<div id="app">
    <ul>
      <template v-for="book in filterBooks">
        <li>书名:{{book.name}}</li>
        <li>作者:{{book.author}}</li>
      </template>
    </ul>
  </div>
var app= new Vue({
  el: '#app',
  computed: {
    filterBooks: function(){
      return this.books.filter(function (book) {
        return book.name.match(/JavaScript/);
      })
    },
  }
});

11、v-cloak:不需要表达式,这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ;

12、v-once:也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。

首次渲染后,不再随数据的变化重新渲染,将被视为静态内容; v-once 在业务中也很少使用,当你需要进一步优化性能时,可能会用到。

13、v-pre:不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度;例如: < span v-pre>{{ this will not be compiled }} </ span>

Javascript 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
详解JavaScript 的变量
Mar 08 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
彻底理解Python list切片原理
2017/10/27 Python
python看某个模块的版本方法
2018/10/16 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
岗位职责的定义
2013/11/10 职场文书
英文自荐信格式
2013/11/28 职场文书
大学生个人自荐信
2014/02/24 职场文书
学习交流会主持词
2014/04/01 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
购房意向书
2014/08/30 职场文书
2015年度党员个人总结
2015/02/14 职场文书
财务出纳岗位职责
2015/03/31 职场文书
读书笔记格式
2015/07/02 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
2016党员党课心得体会
2016/01/07 职场文书
2016国培研修心得体会
2016/01/08 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis