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 BS,dialog控件自适应大小
Jul 06 Javascript
JQuery datepicker 使用方法
May 20 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
领导证婚人证婚词
2014/01/13 职场文书
高三体育教学反思
2014/01/29 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
高中军训感言400字
2014/02/24 职场文书
班级口号大全
2014/06/09 职场文书
委托公证书样本
2015/01/23 职场文书
车间安全生产管理制度
2015/08/06 职场文书
python blinker 信号库
2022/05/04 Python