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 动态添加样式规则 W3C校检
Dec 25 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
php的扩展写法总结
2019/05/14 PHP
php生成微信红包数组的方法
2019/09/05 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
文本加密解密
2006/06/23 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JS打印组合功能
2016/08/04 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python OS模块常用函数说明
2015/05/23 Python
Python Property属性的2种用法
2015/06/21 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python开头的coding设置方法
2019/08/08 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
安全技术说明书
2014/05/09 职场文书
伏羲庙导游词
2015/02/09 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
python tkinter模块的简单使用
2021/04/07 Python