vuejs指令详解


Posted in Javascript onFebruary 07, 2017

v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中,代码如下:

<div id="example-2">
 <p v-if="greeting">Hello!</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

由于v-if是一个指令,需要将它添加到一个元素上。但是如果想要切换多个元素,则可以把<template>元素当做包装元素,并在其上使用v-if,最终的渲染结果不会包含它。代码如下:

<div id="example-2">
 <template v-if="greeting">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 1</p>
 </template>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素被隐藏。查看DOM时,会发现元素上多了一个内联样式style="display:none"。

如图所示:

vuejs指令详解

注:v-show不支持<template>语法。

一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。

v-else

v-else就是JavaScript中的else的意思,它必须跟着v-if或者v-show使用。如下代码:

<div id="example">
 <P v-if="ok">我是对的</P>
 <p v-else="ok">我是错的</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example',
 data: {
 ok: false
 }
 })
</script>

将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做。我们可用用另一个v-show替换v-else。

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下:

<div id="example">
 <form>
 姓名:
 <input type="text" v-model="data.name" placeholder="姓名"/>
 <br />
 性别:
 <input type="radio" id="one" value="One" v-model="data.sex"/>
 <label for="man">男</label>
 <input type="radio" id="two" value="Two" v-model="data.sex"/>
 <label for="male">女</label>
 <br />
 <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
 <label for="jack">阅读</label>
 <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
 <label for="john">游泳</label>
 <input type="checkbox" id="move" value="game" v-model="data.interest"/>
 <label for="move">游戏</label>
 <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
 <label for="mike">唱歌</label>
 <br />
 身份:
 <select v-model="data.identity">
 <option value="teacher" selected>教师</option>
 <option value="doctor">医生</option>
 <option value="lawyer">律师</option>
 </select> 
 </form>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 data:{
 name:'',
 sex:'',
 interest:[],
 identity:''
 }
 }
 })
</script>

除了以上用法,在v-model指令后面还可以添加多个参数(number、lazy、debounce)。

1.number

如果想要用户的输入自动转换为Number类型(如果原值的转换结果为NAN,则返回原值),则可以添加一个number特性。

2.lazy

在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。代码如下:

<div id="example">
 <input v-model="msg" lazy style="width:500px;"/><br/>
 {{msg}}
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 msg:'内容是在change事件后才改变的~'
 },
 watch:{
 
 }
 })
</script>

3.debounce

设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如,在input中输入内容时要随时发送ajax请求),那么它较为有用。

<input v-model="msg" debounce="5000"/>

v-repeat

v-repeat(已经废除)指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。

数组变动检测

Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
});

vue.js还增加了两个方法来观测变化:$set、$remove。

我们应该尽量避免直接设置数据绑定的数组元素,因为这些变化不会被vue.js检测到,因而也不会更新视图渲染。可以使用$set方法:

demo.items.$set(0,{childMsg:'Changed!'})

$remove是$splice的语法糖,用于从目标数组中查找并删除元素:

demo.items.$remove(0);

注:ECMAScript5无法检测到新属性添加到一个对象上或者在对象上删除。要处理这种情况,Vue.js增加了三种方法:$add(key,value)、$set(key,value)、$delete(key,value),这些方法可以用来添加和删除属性,同时触发视图更新。

内置过滤器

1.filterBy(0.12版本)

 实现如图所示:

vuejs指令详解

<div id="example">
 <input v-model="searchText"/>
 <ul>
 <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 users:[
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

在输入框中输入'专车',得到如图所示的结果:

vuejs指令详解

2.orderBy(0.12版本)

实现降序排列,例:

<div id="example">
 <ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 field:'tag',
 reverse:-1,
 users:[
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

v-for

使用$index来获得相应的数组索引。

<div id="example">
 <ul>
 <li v-for="item of items" class="item-{{$index}}">
 {{$index}} - {{parentMessage}} - {{item.msg}}
 </li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 parentMessage:'滴滴',
 items:[
 {msg:'顺风车'},
 {msg:'专车'}
 ]
 }
 })
</script>

注:vuejs1.0.17及以后低版本支持of分隔符,更接近JavaScript遍历器语法。

有时我们可能想重复一个包含多个DOM元素的块,可以使用<template>,如:

<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul>

v-for也支持整数

代码如下:

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

或者

<div>
 <span v-for="n in 10">{{ $index }} </span>
</div>

v-text

v-text指令可以更新元素的textContent.

<span v-text="msg"></span><br/>
<span>{{msg}}</span>

得到的结果一样。

v-html

v-html指令更新元素的innerHTML。

<div id="example">
 <p v-html="html"></p>
 <p>{{{html}}}</p>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 html:'<p>效果一样</p>'
 }
 })
</script>

注:不建议在网站上直接动态渲染任意HTML片段,很容易导致XSS攻击。

v-bind

v-bind指令用于响应更新HTML特性,将一个或者多个attribute,或者一个组件prop动态绑定到表达式。v-bind可以简写为:

<!-- 完整语法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

在绑定class或者style时,支持其他类型的值,如数组或对象。如:

<div id="example">
 <div :class="[classA,{classB:isB,classC:isC}]"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 classA:'A',
 isB:false,
 isC:true
 }
 })
</script>

结果如图:

vuejs指令详解

如果没有参数时,可以绑定到一个对象。注意,此时class和style绑定不支持数组和对象(对象key会转换为小写)。代码如下:

<div id="example">
 <div v-bind="{id:someProp,'OTHERATTR':otherProp}"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 someProp:'idName',
 otherProp:'prop'
 }
 })
</script>

结果如图:

vuejs指令详解

在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为:

.sync——双向绑定,只能用于prop绑定。

.once——单次绑定,只能用于prop绑定。

.camel——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定,通常用于绑定用驼峰命名的SVG特性,比如viewBox。

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定。

如果访问原始DOM事件,可以使用$event传入方法。

<button v-on:click="doThis('hello',$event)"></button>
<!--缩写-->
<button @click="doThis('hello',$event)"></button>

完整例子:

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 methods 对象中定义方法
 methods: {
 greet: function (event) {
 // 方法内 this 指向 vm
 alert('Hello ' + this.name + '!')
 // event 是原生 DOM 事件
 alert(event.target.tagName)
 }
 }
})
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'

###事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

### 按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:enter,tab,delete,esc,space,up,down,left,right

v-ref

在父组件上注册一个子组件的索引,便于直接访问。不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

v-el

为DOM元素注册一个索引,方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

通过this.$els获取相应的DOM元素:

this.$els.msg.textContent //'hello'
this.$els.otherMsg.textContent //'world'

在新的vuejs中,简单起见, v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。

v-pre

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

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css代码:

[v-cloak] {
 display: none;
}

html:

<div v-cloak>
 {{ message }}
</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js 幻灯片的实现
Dec 06 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Javascript Promise用法详解
May 10 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
JS常用倒计时代码实例总结
Feb 07 #Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 #Javascript
javascript验证香港身份证的格式或真实性
Feb 07 #Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 #Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 #Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 #Javascript
You might like
PHP Google的translate API代码
2008/12/10 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
详解JavaScript作用域和作用域链
2019/03/19 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
小程序实现分类页
2019/07/12 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
在类Unix系统上开始Python3编程入门
2015/08/20 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
简单了解python的内存管理机制
2019/07/08 Python
python线程信号量semaphore使用解析
2019/11/30 Python
解决Python3下map函数的显示问题
2019/12/04 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
教师推荐信范文
2013/11/24 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
年会主持人开场白台词
2015/05/29 职场文书
行为习惯主题班会
2015/08/14 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
详解Vue的options
2021/05/15 Vue.js