1.v-if/v-else/v-show
<div v-if="isLogin">isLogin为true时显示</div>
<div v-else>isLogin为false时显示</div>
<div v-show="isLogin">isLogin为true时显示</div>
<!--
v-if与v-show的区别
v-if：判断是否加载，可以减轻服务器的压力，需要时加载
v-show:调整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出错时，页面显示{{message}}错误内容 -->
<span>{{message}}</span>
<!-- v-text:js没内容时页面不显示 -->
<span v-text="dodo"></span>
<!-- v-html可以解析标签，弊端：可能引起攻击，尽量少用。 -->
<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监听事件绑定
<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对应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;//数据处理和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数据源绑定、双向数据绑定
<p>原始文本信息：{{message}}</p>
<p>v-model：<input type="text" v-model="message"></p>
<!-- lazy:文本框失去焦点时更新数据 -->
<p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
<!-- number:先输入数字再输入文本，文本不显示 -->
<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绑定标签上的属性
<div id="app">
<img v-bind:src="imgSrc" width="200px"/>
<!-- 简写方法 -->
<a :href="webUrl" target="_blank">技术宅</a>
<div :class="className">1.绑定Class</div>
<div :class="{classA:isOK}">2.绑定Class中的判断</div>
<div :class="[classA,classB]">3.绑定Class中数组</div>
<div :class="isOK?classA:classB">4.绑定Class中三元运算符</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.对象绑定style</div>
</div>
7.v-pre/v-cloak/v-once
<div id="app">
<div v-pre>v-pre 原样输出，不进行渲染：{{message}}</div>
<div v-cloak>v-cloak渲染完成后才显示：{{message}}</div>
<div v-once>v-once只在第一次渲染时显示一次：{{message}}</div>
<div><input type="text" v-model="message">修改内容对v-once不影响</div>
</div>
