文章目錄
前言
我們在學習Java的時候知道有JSP頁面,我們通過EL表達式可以取到後臺的值然後進行頁面的渲染。在Vue中也有類似的編程特點。Vue提供了帶前綴
v
,它綁定特定的表達式然後將值應用到具體的DOM上。
下面介紹一下常常開發中使用到的Vue內置指令,這些指令都帶有 v 前綴非常方便記憶,如下面所示:
1. 條件渲染指令
條件指令主要包括 v-if、v-else、v-show 指令,可以根據其表達式的值在DOM中生成一個元素或移除一個元素。如果表達式爲false,則會在DOM中移除對應的元素,否則將會添加一個元素。
1.1 v-if
使用語法爲v-if=‘表達式’,其中表達式的返回值爲Boolean類型。
下面是一個演示此命令的一個例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="isShow">
haha you can see me now!
</h1>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
isShow:true
}
})
</script>
</html>
當data中的isShow爲true時候然後就可以看到設置的h1標籤,否則頁面不予顯示。
1.2 v-else 、v-else-if 指令
v-else 指令是緊跟着 v-if 後的指令快,否則不能爲識別。下面演示一個由 v-if、v-else-if、v-else 指令集合演示一個案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<div v-if="name==='Vue'">
you are learning Vue.js!
</div>
<div v-else-if="name==='java'">
you are learning java!
</div>
<div v-else>
you are learning pathon!
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
name:'Vue'
}
})
</script>
</html>
可以看到當我們在文本框輸入Vue,你會看到頁面將會顯示 you are learning Vue.js!
。
1.3 v-show 指令
v-show 指令與 v-if 指令類似,兩者都可以根據顯示的值來顯示或者隱藏HTML元素。唯一區別就是前者是通過改變CSS屬性的display來控制顯示與隱藏。下面通過一個代碼來演示一下 v-show 指令的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-show="status===1">
Hello! you can see me!
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
status: 1
}
})
</script>
</html>
2. 列表渲染成 v-for 指令
v-for 指令基於一個數組渲染一個列表,v-for = “item in items” , items代表數組,item則是當前被遍歷的數組元素項。下面以一個簡單的示例演示其使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-show="status===1">
Hello! you can see me!
</div>
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
items:['java','python','vue']
}
})
</script>
</html>
頁面運行效果如下所示:
下面我們使用v-for 遍歷對象如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-show="status===1">
Hello! you can see me!
</div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{index}} -- {{item.name}} -- {{item.age}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
items:[
{name:'張三',age:23},
{name:'李四',age:24},
{name:'王五',age:25},
]
}
})
</script>
</html>
頁面顯示效果如下所示:
上面遍歷我們爲每一個項都綁定了一個key屬性,這裏的key可以被Vue實例來跟蹤每個節點。
3. 方法與事件指令
3.1 v-bind
v-bind 指令用於響應更新Html的頁面元素,將一個或多個attribute,或者一個組件prop動態綁定到表達式。下面是一個簡單的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<img v-bind:src="imgSrc"/>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: { imgSrc:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2393544950,185753394&fm=26&gp=0.jpg'
}
})
</script>
</html>
我們打開後就可以看到頁面顯示的照片元素,而v-bind一般可以可以縮寫如上面 <img v-bind:src=“imgSrc”/> 可以縮寫爲 <img :src=“imgSrc”/>,在綁定class或者style時候,可支持綁定其他類型的值,如數組或者對象,其演示代碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div :class="[ classA,{ classB:showB, classC:showC }]">
{{classA}} -- {{showB}} -- {{showC}}
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
classA:'A',
showB: true,
showC: false
}
})
</script>
</html>
頁面效果如下所示:
3.2 v-on 指令
v-on 指令用於綁定事件監聽器。事件類型由參數指定其使用語法如下所示:
v-on:事件名稱=‘函數名稱()’
下面以一個簡單的代碼演示如何使用 v-on 指令:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button v-on:click="handle">不信你點擊一下</button></br>
<img :src='imgSrc' v-show="isShow">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
msg:'這兒有美女',
isShow:false,
imgSrc:'https://bkimg.cdn.bcebos.com/pic/0eb30f2442a7d933c8954b919b02c61373f08302abb2?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg'
},
methods: {
handle: function(){
app.isShow=true
}
},
})
</script>
</html>
頁面顯示效果如下所示:
v-on 後面可以緊接着HTML中常見的事件例如:
- click
- dbclick
- contextmenu
- keydown
- keyup
注意:v-on 可以進行簡寫,例如 v-on:click 可以寫成@click。v-on後面不僅可以跟參數,還可以增加修飾符:即在@綁定的事件後面在加上一個. 然後在跟一個後綴,下面列出了常用的修飾符:
修飾符名稱 | 解釋說明 |
---|---|
.stop | 相當於調用event.setPropagation() 也就是停止冒泡行爲。 |
.prevent | 相當於event.preventDefault( ) 阻止默認行爲。 |
.self | 當事件是從偵聽器綁定的元素本身觸發時纔回調。 |
.{key code} | 只在指定鍵上觸發回調 |
4. v-model 與數據雙向綁定
雙向綁定指的是Vue中data的變量與渲染在DOM上的變量元素內容保存一致,無論誰改變,另一方也會相應的更新爲相同的數據。下面通過代碼來看如何使用v-model指令實現雙向數據綁定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>
{{message.toUpperCase()}}
</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
message:'Trump is so stupid!'
}
})
</script>
</html>
頁面運行效果如下所示:
與上面v-on 指令有修飾符類似,v-mode 也有自己的修飾符,下面將簡單介紹兩種修飾符的使用。
- lazy
在上面的例子中,v-model 默認是在input事件中同步輸入框數據,使用修飾符lazy 會轉變爲當在輸入框失去焦點時或按下回車時更新數據。
<input type="text" v-model.lazy="message">
- trim
修飾符trim 可以自動過濾輸入的首尾空格。
<input type="text" v-model.trim="message">
5. 其他指令
5.1v-text 與 v-html
v-text 指令可以更新元素中的textContent內容,而 v-html 指令可以更新元素的innerHtml。下面以一個簡單的案列演示其使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-text="urlText">
{{urlText}}
</div>
<div v-html="urlHtml">
{{urlHtml}}
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data: {
urlText:'<a href="http://www.baidu.com">百度一下</a>',
urlHtml:'<a href="http://www.baidu.com">百度一下</a>',
}
})
</script>
</html>
頁面效果如下: