Vue指令指令大全


Posted in Javascript onFebruary 09, 2019

1. v-text

v-text主要用来更新textContent,可以等同于JS的text属性。

<span v-text="msg"></span>

这两者等价:

<span>{{msg}}</span>

2. v-html

双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

<div v-html="rawHtml"></div>

这个div的内容将会替换成属性值rawHtml,直接作为HTML进行渲染。

3. v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

<div id="app">
  <span v-pre>{{message}}</span> //这条语句不进行编译
  <span>{{message}}</span>
</div>

最终仅显示第二个span的内容

4. v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译。

<div id="app" v-cloak>
  <div>
    {{message}}
  </div>
</div>
<script type="text/javascript">
  new Vue({
   el:'#app',
   data:{
    message:'hello world'
   }
  })
</script>

在页面加载时会闪烁,先显示:

<div>
  {{message}}
</div>

然后才会编译为:

<div>
  hello world!
</div>

5. v-once

v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。

<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
  <li v-for="i in list">{{i}}</li>
</ul>

上面的例子中,msg,list即使产生改变,也不会重新渲染。

6. v-if

v-if可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素。

<a v-if="ok">yes</a>

如果属性值ok为true,则显示。否则,不会渲染这个元素。

7. v-else

v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。

<a v-if="ok">yes</a>
<a v-else>No</a>

8. v-else-if

v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。

<div v-if="type==='A'">
  A
</div>
<div v-if="type==='B'">
  B
</div>
<div v-if="type==='C'">
  C
</div>
<div v-else>
  Not A,B,C
</div>

9. v-show

<h1 v-show="ok">hello world</h1>

也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。

注意:v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好

10. v-for

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

<div v-for="(item,index) in items"></div>  //使用in,index是一个可选参数,表示当前项的索引
<div v-for="item of items"></div>  //使用of

下面是一个例子,并且在v-for中,拥有对父作用域属性的完全访问权限。

<ul id="app">
  <li v-for="item in items">
    {{parent}}-{{item.text}}
  </li>
</ul>
<script type="text/javascript">
  var example = new Vue({
   el:'#app',
   data:{
    parent:'父作用域'
    items:[
     {text:'文本1'},
     {text:'文本2'}
    ]
   }
  })
</script>

会被渲染为:

<ul id="app">
  <li>父作用域-文本1</li>
  <li>父作用域-文本2</li>
</ul>

注意:当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

11. v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【  :】

<1>对象语法:

//进行类切换的例子
<div id="app">
  <!--当data里面定义的isActive等于true时,is-active这个类才会被添加起作用-->
  <!--当data里面定义的hasError等于true时,text-danger这个类才会被添加起作用-->
  <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true, 
      hasError: false
    }
  })
</script>

渲染结果:

<!--因为hasError: false,所以text-danger不被渲染-->
<div class = "is-active"></div>

<2>数组语法

<div id="app">
  <!--数组语法:errorClass在data对应的类一定会添加-->
  <!--is-active是对象语法,根据activeClass对应的取值决定是否添加-->
  <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      activeClass: false,
      errorClass: 'text-danger'
    }
  })
</script>

渲染结果:

<!--因为activeClass: false,所以is-active不被渲染-->
<p class = "text-danger"></p>

<3>直接绑定数据对象

<div id="app">
  <!--在vue实例的data中定义了classObject对象,这个对象里面是所有类名及其真值-->
  <!--当里面的类的值是true时会被渲染-->
  <div :class="classObject">12345</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      classObject:{
        'is-active': false,
        'text-danger':true
      }      
    }
  })
</script>

渲染结果:

<!--因为'is-active': false,所以is-active不被渲染-->
<div class = "text-danger"></div>

12. v-model

这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

<div id="app">
  <input v-model="somebody">
  <p>hello {{somebody}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      somebody:'小明'
    }
  })
</script>

这个例子中直接在浏览器input中输入别的名字,下面的p的内容会直接跟着变。这就是双向数据绑定。
v-model修饰符

<1>  .lazy

默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。

<input v-model.lazy="msg">

<2>  .number

自动将用户的输入值转化为数值类型

<input v-model.number="msg">

<3>  .trim

自动过滤用户输入的首尾空格

<input v-model.trim="msg">

13. v-on

v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。
简写为:【  @  】

<div id="app">
  <button @click="consoleLog"></button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    methods:{
      consoleLog:function (event) {
        console.log(1)
      }
    }
  })
</script>

事件修饰符

.stop  阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue一步步实现alert功能
Jul 05 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 #Javascript
vue计算属性get和set用法示例
Feb 08 #Javascript
vue多次循环操作示例
Feb 08 #Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 #Javascript
Vue从TodoList中学父子组件通信
Feb 05 #Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
javascript中的几个运算符
2007/06/29 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
vue如何截取字符串
2019/05/06 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
教育孩子心得体会
2014/01/01 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
建议书标准格式
2014/03/12 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android