Vue的基礎(chǔ)語法
一、插值操作
? 1.使用Mustache語法獲取data中的數(shù)據(jù)
示例：
<div id="app">
<h2>{{firstName +" "+ lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:"Lebron",
lastName:"James"
}
});
</script>
使用Mustache語法顯示在瀏覽器中的數(shù)據(jù)是響應(yīng)式的，若是data中的數(shù)據(jù)改變了，瀏覽器中顯示的數(shù)據(jù)也會動態(tài)的改變爹殊，這很好用丢习，若是從服務(wù)器中動態(tài)的獲取到數(shù)據(jù)顶掉，就不需要先獲得元素，再進行追加了。
? 2.有時候某些東西猴凹，我們不想要它響應(yīng)式的改變夷狰，這個時候可以使用v-once指令
<div id="app" v-once>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
});
</script>
可以打開控制臺，輸入app.message = "hello vue!",可以看見郊霎，雖然message的值修改了沼头，但是頁面顯示的數(shù)據(jù)并沒有動態(tài)的改變。
? 3.有時可能我們想要顯示的數(shù)據(jù)是一個html類型的數(shù)據(jù)歹篓，就像是含有html標(biāo)簽這樣子的數(shù)據(jù)瘫证，這個時候若是直接使用Mustache語法肯定解析不了html標(biāo)簽。這個時候就可以使用一個v-html指令庄撮，這就像是給這個元素添加了innerHTML值一樣背捌。
<div id="app" v-html="baidu"></div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
baidu:"<a
}
});
</script>
? 4.v-text指令和Mustache語法差不多，都是取出數(shù)據(jù)插入元素中洞斯，應(yīng)該就和innerText差不多吧毡庆。
<div id="app">
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
? 5.v-pre指令應(yīng)該和pre標(biāo)簽差不多，使用了這個標(biāo)簽之后就不會對其中的文本進行語法的解析烙如。
<div id="app" v-pre>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀'
}
});
</script>
像是這串代碼在頁面中顯示的就是{{message}}而不是你好呀么抗，因為沒有進行Mustache語法的解析。
? 6.有時候亚铁，若是我們在準(zhǔn)備數(shù)據(jù)的時候需要花一定的時間蝇刀，而這個時候Mustache語法顯示的直接是語法格式的文本，然后會有個閃動后出現(xiàn)我們想要顯示的數(shù)據(jù)徘溢。這種情況對用戶來說體驗是非常不好的吞琐，所以還不如在加載完成之前先不要顯示呢。這個時候就可以使用到v-cloak指令然爆，cloak是斗篷的意思站粟，寓意在沒加載完成之前先使用斗篷把數(shù)據(jù)蓋起來，別讓用戶看到先曾雕。
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
setTimeout("const app = new Vue({\n" +
" el: '#app',\n" +
" data: {\n" +
" message: 'hello vue!'\n" +
" }\n" +
" });",1000);
</script>
這串代碼就可以演示閃動的場景奴烙，你可以感受到，的確不是很友好剖张。
?
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
setTimeout("const app = new Vue({\n" +
" el: '#app',\n" +
" data: {\n" +
" message: 'hello vue!'\n" +
" }\n" +
" });",1000);
</script>
結(jié)合style屬性選擇器切诀，當(dāng)app加載完成之后它會把v-cloak給去掉，就是拿走斗篷搔弄，底下的數(shù)據(jù)就顯示出來了趾牧。
通過上面的指令和Mustache語法，我們能夠動態(tài)的更新元素中的文本內(nèi)容肯污，但是有的時候像是a標(biāo)簽中的href翘单，img標(biāo)簽中的src吨枉，我們也想要動態(tài)的進行更新，這就需要進行動態(tài)綁定屬性操作哄芜。
二貌亭、動態(tài)綁定屬性操作
? 1.v-bind用于綁定一個或者多個屬性值
示例：動態(tài)綁定a標(biāo)簽的href和img標(biāo)簽的src
<div id="app">
<a v-bind:href="linkVue">vue官網(wǎng)</a>
<img v-bind:src="vueLogo" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
linkVue:"https://cn.vuejs.org/",
vueLogo:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
v-bind有個語法糖寫法，就是為了簡化它的書寫认臊，給各位程序員一點甜頭的意思圃庭。語法糖寫法就是直接一個":"
<div id="app">
<a :href="linkVue">vue官網(wǎng)</a>
<img :src="vueLogo" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
linkVue:"https://cn.vuejs.org/",
vueLogo:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
這就是語法糖寫法，結(jié)果沒有變化失晴。
? 2. v-bind綁定class剧腻，很多時候我們會希望動態(tài)的切換class，比如說音樂的點擊和關(guān)閉等等涂屁。v-bind綁定class有兩種方式书在，分別是對象語法和數(shù)組語法
? 2.1 v-bind綁定class，對象語法
對象語法簡述：
<div id="app">
<h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '為了部落２鹩帧Ｈ逖！'
}
});
</script>
v-bind綁定class的對象語法就是像這樣以鍵值對的方式帖族，不過value是一個布爾值栈源，表示這個class是否添加上去。
<div id="app">
<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '為了部落Ｊ恪Ｉ蹩选！',
isActive:true,
isLine:false
}
});
</script>
這樣就能動態(tài)的添加或者刪除該類了
下面例子演示涣雕，點擊文字切換紅色艰亮。
<div id="app">
<h2 v-bind:class="{active:isActive,line:isLine}" v-on:click="textClick">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '為了部落！０贰垃杖！',
isActive:true,
isLine:false
},
methods:{
textClick:function () {
this.isActive = !this.isActive;
}
}
});
</script>
vue這個響應(yīng)式的設(shè)計真的很方便男杈，很好玩丈屹。
2.2v-bind綁定class,數(shù)組語法
<h2 v-bind:class="[active,line]">{{message}}</h2>
<h2 v-bind:class="getClass()">{{message}}</h2>
<h2 v-bind:class="classes">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊，李銀河!',
active:"sdfdsfsdf",
line:"sdfsdf"
},
methods:{
getClass:function () {
return [this.active,this.line];
}
},
computed:{
classes:function () {
return [this.active,this.line];
}
}
});
</script>
這就是數(shù)組語法綁定class伶棒，注意數(shù)組中的元素不能加單引號旺垒，不然就當(dāng)作字符串而不是變量解析了》粑蓿可能你會覺得直接寫在class中有點長了先蒋，那么可以用一個函數(shù)或者計算屬性來獲取。
-
v-bind綁定style宛渐，同樣也有對象語法和數(shù)組語法竞漾，這里就一起展示了
<div id="app"> <h2 v-bind:style="{fontSize:font + 'px',color:color}">{{message}}</h2> <h2 v-bind:style="[myFontSize,myColor]">{{message}}</h2> <h2 v-bind:style="[finalFontSize,finalColor]">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊眯搭，李銀河!', font:50, color:'red', myFontSize:{fontSize:50+'px'}, myColor:{color:'red'} }, computed:{ finalFontSize:function () { return {fontSize:this.font+"px"}; }, finalColor:function () { return {color:this.color}; } } }); </script>
三、計算屬性
有些時候我們想展示的數(shù)據(jù)不只是一個业岁，而是多個數(shù)據(jù)進行一定的處理之后再展示的鳞仙，這時候直接使用Mustache語法的話可能無法滿足需求，所以vue中有個叫做計算屬性的東西笔时，就是上面例子中我在computed中定義的函數(shù)棍好，這些雖然是函數(shù)，但是它起到的效果是和屬性差不多的允耿，調(diào)用的時候不需要加小括號借笙。
下面就以一個計算書本總價格的例子來使用一下吧。
<div id="app">
<h2>總價格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id: 110, name: 'Unix編程藝術(shù)', price: 119},
{id: 111, name: '代碼大全', price: 105},
{id: 112, name: '深入理解計算機原理', price: 98},
{id: 113, name: '現(xiàn)代操作系統(tǒng)', price: 87},
]
},
computed: {
totalPrice:function () {
let total = 0;
for(let i = 0;i < this.books.length;i++){
total += this.books[i].price;
}
//這種for循環(huán)取出來的i是books中的指定下標(biāo)的元素较锡，就和forEach差不多
// for(let i of this.books){
// total += i.price;
// }
//這種for循環(huán)取出來的i是下標(biāo)业稼，就和for(let i = 0;i < this.books.length;i++)差不多
// for(let i in this.books){
// total += this.books[i].price;
// }
return total;
}
}
})
</script>
計算屬性的setter和getter
其實上面的例子是一個簡化的寫法，按照javabean的思想念链，一個屬性是要有set和get方法的盼忌，這里其實也是這樣，不過一般只是作為數(shù)據(jù)展示掂墓，不希望進行改變數(shù)據(jù)的值谦纱，所以就省略的set方法。
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:"Lebron",
lastName:"James"
},
computed:{
fullName:{
set(fullName){
let names = fullName.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
get(){
return this.firstName + " " + this.lastName;
}
}
}
});
</script>
為什么在數(shù)據(jù)展示的時候推薦使用計算屬性而不是方法呢君编？
這涉及到計算屬性的設(shè)計跨嘉，因為計算屬性是具有緩存的，多次調(diào)用其實只是執(zhí)行了一次吃嘿，而方法沒有緩存祠乃，調(diào)用了多少次就執(zhí)行了多少次，這就產(chǎn)生了性能和效率上的浪費兑燥。
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName : "Lebron",
lastName : "James"
},
computed:{
fullName(){
console.log("the computed is running...");
return this.firstName + " " + this.lastName;
}
},
methods:{
getFullName(){
console.log("the method is running...");
return this.firstName + " " + this.lastName;
}
}
});
</script>
打開控制臺亮瓷，可以看見每調(diào)用一次方法，方法就會執(zhí)行一次降瞳。而計算屬性只會執(zhí)行一次嘱支，兩個效率高下立分
