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 EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
详解在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 Rename 更改文件、文件夹名称
2011/05/24 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
javascript中layim之查找好友查找群组
2021/02/06 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python 字典与字符串的互转实例
2017/01/13 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Django中使用Celery的方法步骤
2020/12/07 Python
如何利用python 读取配置文件
2021/01/06 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
弘扬职业精神演讲稿
2014/03/20 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
激励口号大全
2014/06/17 职场文书
给老婆的检讨书
2015/01/27 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
房地产项目合作意向书
2015/05/08 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js