Vue基本代碼結(jié)構(gòu)
1.引入vue.js文件
<script type="text/javascript" src="js/vue.js" ></script>
2.創(chuàng)建Vue對象
el代表選中的區(qū)域，data為數(shù)據(jù)
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123'
}
})
</script>
3.插值表達(dá)式與v-cloak
雙括號{{msg}}會(huì)將數(shù)據(jù)綁定在對應(yīng)標(biāo)簽上
<p>{{msg}}</p>
當(dāng)客戶端網(wǎng)速慢時(shí)半夷，瀏覽器會(huì)先顯示{{msg}}畸悬，等到j(luò)s文件加載完畢才顯示對應(yīng)數(shù)據(jù)，為了解決閃爍問題使用v-cloak標(biāo)簽
<style>
[v-cloak]{
display: none;
}
</style>
<p v-cloak>{{msg}}</p>
4.v-text 和v-html指令
默認(rèn)v-text是沒有閃爍的凶伙，會(huì)覆蓋元素中的原本內(nèi)容
v-html會(huì)加載數(shù)據(jù)中的html
<h4 v-text="msg"></h4>
<div v-html="msg2"></div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123',
msg2:'<h1> 我是一個(gè)h1標(biāo)簽</h1>'
}
})
</script>
image.png
5.v-bind
v-bind是Vue中傻咖，提供的用于綁定屬性的指令，可以簡寫為：券敌，在v-bind中可以寫合法的js表達(dá)式
<input type="button" value="按鈕" title="提示信息" />
<input type="button" value="按鈕" v-bind:title="msg3" />
<input type="button" value="按鈕" :title="msg3+123" />
6.v-on
v-on是事件綁定指令,可以用@簡寫
<input type="button" value="事件綁定" v-on:click="show" />
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123',
msg2:'<h1> 我是一個(gè)h1標(biāo)簽</h1>',
msg3:'這是提示信息'
},
methods:{
show:function(){
alert('hello')
}
}
})
</script>
7.v-for
v-for可以循環(huán)遍歷普通屬豬唾戚。對象數(shù)組，對象待诅，迭代數(shù)字.key屬性只能使用number或者string 且唯一颈走。必須使用v-bind綁定
<p v-for="item in list" v-bind:key="item.name">
<input type="checkbox" />{{item.id}}----{{item.name}}
</p>
8.v-if和v-show
v-if的特點(diǎn)是每次都會(huì)重新創(chuàng)建和刪除元素，有較高的切換性能消耗咱士，而v-show是對DOM的操作立由，切換了display:none樣式，有較高的初始渲染消耗
