一英遭、代碼規(guī)范
1.縮進(jìn)4個(gè)空格掷伙、2個(gè)空格务唐，推薦2個(gè)空格
二、模版語(yǔ)法
1灼卢、Mustache
- 將data中的文本數(shù)據(jù)绍哎，插入到HTML中
- 可以通過(guò)Mustache語(yǔ)法（也就是雙大括號(hào)）
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},李銀河</h2>
<!--musatache語(yǔ)法中，不僅 可以直接寫(xiě)變量鞋真，也可以寫(xiě)簡(jiǎn)單的表達(dá)式-->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
}
})
</script>
</body>
2崇堰、v-once
- 不希望界面隨意的跟隨改變，可以使用vue的一個(gè)指令：v-once
- 該指令后面不需要跟任何表達(dá)式（比如之前的v-for后面是有跟表達(dá)式的）
- 該指令表示元素和組件只渲染一次涩咖，不會(huì)隨著數(shù)據(jù)的改變而改變
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊'
}
})
</script>
</body>
3海诲、v-html
- 某些情況下，我們從服務(wù)器請(qǐng)求到的數(shù)據(jù)本身就是一個(gè)HTML代碼
- 如果我們直接通過(guò){{}}輸出檩互，會(huì)將HTML代碼也一起輸出
- 按照HTML格式進(jìn)行解析特幔，并且顯示對(duì)應(yīng)的內(nèi)容，可以使用v-html指令
- 該指令后面往往會(huì)跟上一個(gè)string類(lèi)型
- 會(huì)將string的html解析出來(lái)并進(jìn)行渲染
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url">{{url}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
url: '<a
}
})
</script>
</body>
結(jié)果
4闸昨、v-text
- v-text作用和Mustache比較相似：都是用于 將數(shù)據(jù)顯示在界面中
- v-text通常情況下蚯斯，接受一個(gè)string類(lèi)型
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊'
}
})
</script>
</body>
5、v-pre
- 用于跳過(guò)這個(gè)元素和它自元素的編譯過(guò)程饵较，用于顯示原本的Mustache語(yǔ)法
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre="message">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊'
}
})
</script>
結(jié)果
6拍嵌、v-cloak
- 在某些情況下，瀏覽器可能會(huì)直接顯示出未編譯的Mustache標(biāo)簽
- cloak：斗篷
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//在div解析之前循诉，div中有一個(gè)屬性v-cloak
//在div解析之后横辆，div中沒(méi)有一個(gè)屬性v-cloak
setTimeout(function(){
const app = new Vue({
el: "#app",
data: {
message: '你好啊'
}
})
}, 1000)
</script>
</body>
7、v-bind
- 除了內(nèi)容需要?jiǎng)討B(tài)綁定外茄猫，某些屬性我們也希望動(dòng)態(tài)來(lái)綁定
- 比如動(dòng)態(tài)綁定a元素的href屬性
- 比如動(dòng)態(tài)綁定img元素的src屬性
- 這個(gè)時(shí)候狈蚤，我們可以使用v-bind指令
- 作用：動(dòng)態(tài)綁定屬性
- 縮寫(xiě)：:
- 預(yù)期：any(with argument)|Object (without argument)
- 參數(shù)：attrOrProp(optional)
<body>
<div id="app">
<!--錯(cuò)誤做法，這里不可以使用Mustache語(yǔ)法-->
<!-- <img src="{{imgurl}}" alt=""> -->
<!-- 正確做法划纽，使用v-bind指令 -->
<img v-bind:src="imgurl" alt="">
<a v-bind:href="arhref">百度一下</a>
<!--語(yǔ)法糖的寫(xiě)法-->
<img :src="imgurl" alt="">
<a :href="arhref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
//在div解析之前脆侮，div中有一個(gè)屬性v-cloak
//在div解析之后，div中沒(méi)有一個(gè)屬性v-cloak
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
imgurl: 'https://upload-images.jianshu.io/upload_images/18396394-76fa65fca9046495.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp',
arhref: 'http://www.baidu.com'
}
})
</script>
</body>
- 很多時(shí)候勇劣，我們希望動(dòng)態(tài)的來(lái)切換class靖避，比如
- 當(dāng)數(shù)據(jù)為某個(gè)狀態(tài)是，字體顯示紅色
- 當(dāng)數(shù)據(jù)另一個(gè)狀態(tài)是芭毙，字體顯示黑色
- 綁定class有兩種方式：
- 對(duì)象語(yǔ)法
- 數(shù)組語(yǔ)法
1筋蓖、v-bind動(dòng)態(tài)綁定class屬性：對(duì)象語(yǔ)法
- 對(duì)象語(yǔ)法的含義是：class后面跟的是一個(gè)對(duì)象
<body>
<div id="app">
<!-- <h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2> -->
<!-- 通過(guò)控制boolean值決定標(biāo)簽是否有此類(lèi)名 -->
<!-- <h2 v-bind:class="{類(lèi)名1: true, 類(lèi)名2: false}">{{message}}</h2> -->
<h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<h2 v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnclick">按鈕</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods:{
btnclick: function(){
this.isActive = !this.isActive
}，
getClasses: function(){
return { active: this.isActive, line: this.isLine }
}
}
})
</script>
</body>
2退敦、v-bind動(dòng)態(tài)綁定class屬性：數(shù)組語(yǔ)法
- 當(dāng)class數(shù)組里沒(méi)有單/雙引號(hào)時(shí)粘咖，按變量處理，結(jié)果是aaaaa bbbbb
- 當(dāng)class數(shù)組里有單/雙引號(hào)時(shí)侈百，按字符串處理瓮下，結(jié)果是active line
<body>
<div id="app">
<h2 class="title" v-bind:class="['active', 'line']">{{message}}</h2>
<h2 v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnclick">按鈕</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
isActive: true,
isLine: true,
active: 'aaaaa',
line: 'bbbbb'
},
methods: {
getClasses: function () {
return { active: this.isActive, line: this.isLine }
}
}
})
</script>
</body>
8翰铡、v-bind綁定style
- 我們可以利用v-bind:style來(lái)綁定一些CSS內(nèi)聯(lián)樣式
- 在寫(xiě)CSS屬性名的時(shí)候，比如font-size讽坏，我們可以使用駝峰式锭魔，fontSize
- 或短橫線分割：'font-size'
- 綁定class有兩種方式
- 對(duì)象語(yǔ)法
- style后面跟的是一個(gè)對(duì)象類(lèi)型
- 對(duì)象的key是CSS屬性名稱
- 對(duì)象的value是具體賦的值
- style后面跟的是一個(gè)對(duì)象類(lèi)型
- 對(duì)象語(yǔ)法
<body>
<div id="app">
<!-- <h2 :style="{key(屬性名): value（屬性值）}">{{message}}</h2> -->
<!-- 50px必須加單引號(hào)，否則當(dāng)成變量使用了 -->
<h2 :style="{fontSize: '50px'}">{{message}}</h2>
<!-- 把finalSize當(dāng)成一個(gè)變量 -->
<!-- <h2 :style="{fontSize: finalSize}">{{message}}</h2> -->
<h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
finalSize: 100,
finalColor: 'red'
},
methods:{
getStyle: function (){
return { fontSize: this.finalSize + 'px', color: this.finalColor }
}
}
})
</script>
</body>
- 數(shù)組語(yǔ)法
- style后面跟的是一個(gè)數(shù)組類(lèi)型：多個(gè)值路呜，分割即可
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'}
}
})
</script>
</body>
