Vue常用的指令说明
2018-01-29 本文已影响0人
都江堰古巨基
常用的指令有：v-if, v-on, v-show, v-else, v-else-if, v-bind, v-for
1.v-if指令与v-show指令（注意区别）
v-if和v-show的区别：v-show相当于在条件不成立的时候给元素加上一个style="display:none"
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if的用法注意引号：
v-if="t > 30" #若t>30则表达式成立，则渲染的内容有效
v-if="t >== 30"
v-if="t === 30"
#demo：
<div id="app-4">
<p v-if="t >= 30">t已经大于30了！</p>
<p v-if="t < 15">t已经小于15了！</p>
<p v-if="t = 100">great！</p>
# 注意这个地方
<p v-if="w === 'ab'">显示</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app-4',
data:{
t:100,
w:'ab'
}
})
</script>
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时需要<template>标签了：
<div id='app-12'>
<template v-if="a === 'OK'">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<script type="text/javascript">
new Vue({
el:'#app-12',
data:{
a:'OK'
}
})
</script>
渲染的结果：
<div id="app-12">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
v-show的用法：
注意一点：v-show 不支持 <template> 元素，也不支持 v-else。
<div id="app-5">
<p v-show="sex==='male'">先生</p>
<p v-show="sex==='female'">女士</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app-5',
data:{
sex:'male',
}
})
</script>
2.v-else-if
用法：接v-if指令
#注意用法若被等于的对象是字符则可以用“===”为数字则只能“=，>，<”
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
3.注意key值
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
不过这样也会造成一个弊端，就是输入框的内容不会刷新，若想要输入框的内容刷新，则需要使用key：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
4.v-for指令
这个要注意指令的位置，和django中的模板渲染位置有点不同。注意一点：v-for的优先级比v-if的优先级更高。
demo:
<div id='app-1'>
<ol>
#注意循环渲染的位置！！！
<li v-for="item in items">{{item.text}}</li>
</ol>
</div>
<script type="text/javascript">
new Vue({
el:'#app-1',
data:{
items:[
{text:'hello'},
{text:'twy'},
{text:'please'}
]
}
})
</script>
# 这里主要是用来说明v-for的优先级比v-if的优先级更高
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
5.v-bind指令
v-bind指令主要可以用来绑定style和class：
demo:
# 绑定class的demo
<div id="app-6">
<div class="static"
v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
测试v-bind
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app-6',
data: {
isActive: true,
hasError: false
}
})
</script>
# 渲染的结果为：
<div class="static active">
测试v-bind
</div>
# 若设置hasError为true：
<div class="static active text-danger">
测试v-bind
</div>
此外，v-bind还支持和计算属性一起用：
demo：
<div id="app-7">
<div v-bind:class="classObject">v-bind计算属性</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app-7',
data:{
isActive:true,
error:null
},
computed: {
classObject:function(){
return {
'active':this.isActive && !this.error,
'text-danger': this.error
}
}
}
})
</script>
# 渲染的结果为：
<div class="active">v-bind计算属性</div>
# 若修改error的值为1，则有：
<div class="text-danger">v-bind计算属性</div>
v-bind还支持数组语法操作以及三元操作：
demo如下：
<div id="app-8">
<div v-bind:class="[activeClass, errorClass]">数组语法</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app-8',
data:{
activeClass:'active',
errorClass:'text-danger'
}
})
</script>
# 渲染的结果如下：
<div class="active text-danger">数组语法</div>
# 根据条件的三元操作如下：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
# 这会根据isActive是否为真来显示activeClass 的内容
但在v-bind中使用过多的三元操作会使代码显得很难懂，于是，有了数组语法中使用对象语法的用法：
<div id="app-9">
<div v-bind:class="[{ active: isActive }, {errorClass: errors}]">骚操作</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app-9',
data:{
isActive:1,
activeClass:'active',
errorClass:'text-danger',
errors:0,
}
})
</script>
# 渲染的结果：
<div class="active">骚操作</div>
# 若将errors置为1，则会渲染出的结果：
<div class="active errorClass">骚操作</div>
组件的v-bind使用：(要注意的是，组件的注册必须在实例化之前)
<div id="app-10">
<my-component v-bind:class="{ active: isActive }">组件v-bind</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:'<p class="you"></p>'
})
new Vue({
el:'#app-10',
data:{
isActive:1,
}
})
</script>
# 错误的例子：
<div id="app-10">
<my-component v-bind:class="{ active: isActive }">组件v-bind</my-component>
</div>
<script type="text/javascript">
new Vue({
el:'#app-10',
data:{
isActive:1,
}
})
Vue.component('my-component',{
template:'<p class="you"></p>'
})
</script>
v-bind来绑定style
<div id="app-11">
<!-- 对象语法 -->
<div v-bind:style="{ color: activeColor,fontSize: fontSize + 'px'}">v-bind style</div>
<div v-bind:style="styleObject">v-bind style2</div>
<!-- 数组语法 -->
<div v-bind:style="[baseStyle, overridingStyles]">v-bind style3</div>
<!-- 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex -->
<div v-bind:style="{ display:['-webkit-box','-ms-flexbox','flex']}">v-bind style4</div>
</div>
<script>
new Vue({
el:"#app-11",
data:{
activeColor:'red',
fontSize:30,
styleObject:{
color:'red',
fontSize:'15px'
},
baseStyle:{
color:'blue'
},
overridingStyles:{
fontSize:'30px'
},
}
})
</script>
6.v-on指令
<div id="app-13">
<!-- 监听事件 -->
<button v-on:click="counter += 1">Add 1</button>
<p>The button has been clicked {{ counter }} times.</p>
<!-- 事件处理方法 -->
<button v-on:click="greet">Greet</button>
<!-- 内联js语句中调用方法 -->
<button v-on:click="say('hi')">Say hi</button>
<!-- 使用特殊变量$event -->
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app-13',
data:{
counter:0,
name:'Vue.js',
},
// 在 `methods` 对象中定义方法
methods:{
greet:function(event){
// 'this'在方法里指向当前的Vue实例
alert('Hello'+ this.name + '!')
// `event` 是原生 DOM 事件
if(event){
alert(event.target.tagName)
}
},
say: function (message) {
alert(message)
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
},
}
})
</script>
事件修饰符：
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
