vue.js 指令
Posted shi_zi_183
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js 指令相关的知识，希望对你有一定的参考价值。
Vue.js 指令
指令是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。
内部指令
首先来看看和原生html标签相似的一组内置指令，这组指令非常容易记忆，因为仅仅是在原生标签前面v-前缀。
- v-show
- v-else
- v-model
- v-repeat(1,0-)
- v-for(1,0+)
- v-text
- v-el
- v-html
- v-on
- v-bind
- v-ref
- v-pre
- v-cloak
- v-if
v-if
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素，如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body class="native">
<div id="example">
<p v-if="greeting">Hello</p>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
greeting: false
)
</script>
</html>
因为v-if是一个指令，需要将它添加到一个元素上，但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body class="native">
<div id="example">
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
ok: true
)
</script>
</html>
v-show
v-show指令是根据表达式的值来显式或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display: none"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<input type="text" v-model="message" placeholder="edit me">
<div id="example">
<p v-show="greeting">Hello!</p>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
greeting: false
)
</script>
</html>
注：v-show不支持<template>语法。
在切换v-if模块时，Vue.js有一个局部编译/卸载过程，因此v-if中的模板可能包括数据绑定或子组件。v-if是真实地条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内地事件监听器和子组件。
v-if是惰性的——如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于CSS切换。
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
v-else
顾名思义，v-else就是javascript中else的意思，它必须跟着v-if或v-show，充当else功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body class="native">
<div id="example">
<p v-if="ok">我是对的</p>
<p v-else="ok">我是错的</p>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
ok: false
)
</script>
</html>
将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以不要这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body class="native">
<div id="example">
<custom-component v-show="condition"></custom-component>
<p v-else>这可能也是一个组件</p>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
condition: false
)
</script>
</html>
我们可以用另一个v-show替换v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body class="native">
<div id="example">
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
condition: false
)
</script>
</html>
v-model
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。尽管有点神奇，但是v-model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<form>
姓名:
<input type="text" v-model="data.name" placeholder="">
<br/>
性别:
<input type="radio" id="man" value="One" v-model="data.sex">
<label for="man">男</label>
<input type="radio" id="male" value="Two" v-model="data.sex">
<label for="male">女</label>
<br/>
兴趣:
<input type="checkbox" id="book" value="book" v-model="data.interest">
<label for="book">阅读</label>
<input type="checkbox" id="swim" value="swim" v-model="data.interest">
<label for="swim">游泳</label>
<input type="checkbox" id="game" value="game" v-model="data.interest">
<label for="game">游戏</label>
<input type="checkbox" id="song" value="song" v-model="data.interest">
<label for="song">唱歌</label>
<br/>
身份:
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor">医生</option>
<option value="lawyer">律师</option>
</select>
</form>
</body>
<script>
new Vue(
el: '#example',
data:
data:
name:"",
sex:"",
interest:[],
identity:''
)
</script>
</html>
除了以上用法，在v-model指令后面还可以添加多个参数(number、lazy、debounce)。
1、.number
如果想将用户的输入自动转换为Number类型(如果原值的转换结果为NaN，则返回原值)，则可以添加一个.number修饰。
2、.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input v-model.lazy="msg"><br/>
msg
</div>
</body>
<script>
var exampleVM2 = new Vue(
el: '#example',
data:
msg: '内容是在change事件后才改变的~'
)
</script>
</html>
我们在input输入框中输入"依然没变"，虽然触发了input事件，但是因为加入了.lazy修饰，msg的值一直没有发生变化。
3、.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
v-for
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<ul id="demo">
以上是关于vue.js 指令的主要内容，如果未能解决你的问题，请参考以下文章