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版)
Nov 19 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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修正代码
2011/05/09 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python装饰器的特性原理详解
2019/12/25 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Django websocket原理及功能实现代码
2020/11/14 Python
女性时尚网购:Chic Me
2019/07/30 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
个人求职信范文分享
2014/01/31 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
经典演讲稿开场白
2014/08/25 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
法务专员岗位职责
2015/02/14 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python