1.v-if/v-else/v-show
<div v-if="isLogin">isLogin為true時(shí)顯示</div>
<div v-else>isLogin為false時(shí)顯示</div>
<div v-show="isLogin">isLogin為true時(shí)顯示</div>
<!--
v-if與v-show的區(qū)別
v-if：判斷是否加載，可以減輕服務(wù)器的壓力，需要時(shí)加載
v-show:調(diào)整css display屬性，可以使客戶端操作更加流暢。
-->
2.v-for
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
3.v-text/v-html
<body>
<h1>v-text&v-html<h1>
<hr>
<div id="app">
<!-- 弊端：js出錯(cuò)時(shí)，頁面顯示{{message}}錯(cuò)誤內(nèi)容 -->
<span>{{message}}</span>
<!-- v-text:js沒內(nèi)容時(shí)頁面不顯示 -->
<span v-text="dodo"></span>
<!-- v-html可以解析標(biāo)簽，弊端：可能引起攻擊，盡量少用。 -->
<span v-html="dodo"> </span>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'hello world!',
dodo:'<h2>hello world!</h2>'
}
})
</script>
</body>
4.v-on監(jiān)聽事件綁定
<body>
<div id="app">
<p>比賽得分：{{score}}</p>
<p>
<button v-on:click="addScore">加分(v-on)</button>
<!-- v-on簡寫方法 -->
<button @click="substractScore">減分(v-on簡寫)</button>
<br/>
<!-- 鍵盤碼 enter對(duì)應(yīng)13 可以使用v-on:keyup.13 -->
<input type="text" v-on:keyup.enter="onEnter" v-model="score2">
<button onclick="onclickAdd()">加分（onclick方法）</button>
</p>
</div>
<script type="text/javascript">
function onclickAdd(){
app.score += 2;//數(shù)據(jù)處理和app中的不同
};
var app = new Vue({
el:'#app',
data:{
score:0,
score2:1,//綁定初始值
},
methods:{
addScore:function(){
this.score ++;
},
substractScore:function(){
this.score --;
},
onEnter:function(){
this.score = this.score + parseInt(this.score2);
},
}
})
</script>
</body>
5.v-model數(shù)據(jù)源綁定、雙向數(shù)據(jù)綁定
<p>原始文本信息：{{message}}</p>
<p>v-model：<input type="text" v-model="message"></p>
<!-- lazy:文本框失去焦點(diǎn)時(shí)更新數(shù)據(jù) -->
<p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
<!-- number:先輸入數(shù)字再輸入文本，文本不顯示 -->
<p>v-model.number：<input type="text" v-model.number="message"></p>
<!-- trim:去掉空格 -->
<p>v-model.trim<input type="text" v-model.trim="message"></p>
6.v-bind綁定標(biāo)簽上的屬性
<div id="app">
<img v-bind:src="imgSrc" width="200px"/>
<!-- 簡寫方法 -->
<a :href="webUrl" target="_blank">技術(shù)宅</a>
<div :class="className">1.綁定Class</div>
<div :class="{classA:isOK}">2.綁定Class中的判斷</div>
<div :class="[classA,classB]">3.綁定Class中數(shù)組</div>
<div :class="isOK?classA:classB">4.綁定Class中三元運(yùn)算符</div>
<div>
<input type="checkbox" id="isOK" v-model="isOK">
<label for="isOK">isOK={{isOK}}</label>
</div>
<div :style="{color:red,fontSize:font}">5.綁定style值</div>
<div :style="styleObject">6.對(duì)象綁定style</div>
</div>
7.v-pre/v-cloak/v-once
<div id="app">
<div v-pre>v-pre 原樣輸出，不進(jìn)行渲染：{{message}}</div>
<div v-cloak>v-cloak渲染完成后才顯示：{{message}}</div>
<div v-once>v-once只在第一次渲染時(shí)顯示一次：{{message}}</div>
<div><input type="text" v-model="message">修改內(nèi)容對(duì)v-once不影響</div>
</div>
