- 插值表達(dá)式
{{ x }}础爬，類似這樣子的就叫插值表達(dá)式
- v-cloak
使用v-cloak 能夠解決插值表達(dá)式閃爍的問題，但是要配合style中的display：none吼鳞、CSS的屬性選擇器來使用
- v-text
默認(rèn)v-text是沒有閃爍問題的看蚜，v-text會(huì)覆蓋元素中原本的內(nèi)容，但是插值表達(dá)式只會(huì)替換自己的這個(gè)占位符赖条，不會(huì)把整個(gè)元素的內(nèi)容清空
- v-html
v-html命令可以使帶有標(biāo)簽的字符串失乾，其中的標(biāo)簽起到渲染的作用
- v-bind:
v-bind: 是Vue中常熙，提供的用于綁定屬性的指令
注意：v-bind: 指令可以被簡寫為： :要綁定的屬性 例如： :title
v-bind: 中，可以寫合法的JS表達(dá)式
v-bind: 的簡寫為 :
- v-on:
Vue中提供了v-on: 事件綁定機(jī)制
v-on: 的簡寫為 @
例如： v-on:click可以簡寫為 @click
附上相關(guān)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak 能夠解決 插值表達(dá)式閃爍的問題 -->
<p v-cloak>{{msg}}</p>
<!-- 默認(rèn)v-text是沒有閃爍問題的 -->
<!-- v-text會(huì)覆蓋元素中原本的內(nèi)容碱茁，但是插值表達(dá)式只會(huì)替換自己的這個(gè)占位符裸卫，不會(huì)把整個(gè)元素的內(nèi)容清空 -->
<h4 v-text="msg"></h4>
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- v-bind: 是Vue中，提供的用于綁定屬性的指令 -->
<!-- 注意：v-bind: 指令可以被簡寫為： :要綁定的屬性 例如： :title -->
<!-- v-bind: 中纽竣，可以寫合法的JS表達(dá)式 -->
<!-- Vue中提供了v-on: 事件綁定機(jī)制 -->
<!-- <input type="button" value="按鈕" v-bind:title="mytitle+'123'" v-on:click="alert('hello')"> -->
<input type="button" value="按鈕" v-on:click="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈墓贿，我是一個(gè)大大的H1，我大蜓氨，我驕傲</h1>',
mytitle: '這是一個(gè)自己定義的title'
},
methods: { //這個(gè)methods屬性中定義了當(dāng)前Vue實(shí)例所有可用的方法
show: function () {
alert('hello')
}
}
})
</script>
</body>
</html>
