1.v-if&v-else&v-show
v-if用来判断是否加载html的DOM，v-if和v-else一般是一起用的。
v-show相当于display，DOM已经加载出来了，这个是判断它要不要显现出来
<div id="app">
<div v-if="isLogin">您好，CHENXQ</div>
<div v-else>请登录后操作</div>
<div v-show="isShow">CHENCHENYEAH</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:true,
isShow:false
} })
</script>
2.v-for,这个主要是循环输出的问题，js里不是有for..in...循环么？这个跟那个类似，可以说是一样的，只是写法有些许的不同，这个可以让一个数组直接输出
<li v-for="item in items">
{{item}} </li>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[12,34,56,2,8,90],
}
});
</script>
也可以对这个数组进行排序后输出，需要注意的是此时的排序的数组需要在computed重新声明,computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同时会实时计算
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}} </li>
</ul> </div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[12,34,56,2,8,90], },
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}, }
});
function sortNumber(a,b){
return a-b;
} </script>
以上是对纯数字数组的一个排序，数组对象的排序如下：
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}} </li>
</ul>
<div v-for="(student,index) in sortStudents">
{{index+1}}: {{student.name}} :{{student.age}}
</div> </div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[12,34,56,2,8,90],
students:[
{name:'chenxq', age:21,subject:'English'},
{name:'cxq',age:18,subject:'science'},
{name:'Shaquila',age:24,subject:'math'},
{name:'fengmo',age:7,majorin:'tecent'} ] },
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
},
sortStudents:function(){
return sortByKey(this.students,'age');
} }
});
function sortNumber(a,b){
return a-b;
}
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return((x<y)?-1:((x>y)?1:0));
});
} </script>
3.v-bind 处理html中的标签属性，可以直接绑定标签中的属性，也可以绑定style,以及绑定class样式，简写“：”
<div id="app">
<img v-bind:src="imgSrc" width="400px" height="200px"/> <a :href="webUrl" target="_blank">技术胖</a>
<div :class="className" width="200px" height="200px">
1.div绑定class
</div>
<div :class="{classA:isTrue}" width="200px" height="200px">
2.div绑定class中的判断
</div>
<div :class="[classA,classB]" width="200px" height="200px">
3.div绑定class中的数组判断
</div>
<div :class="isTrue?classA:classB" width="200px" height="200px">
4.div绑定class中的三元运算符
</div>
<hr>
<div>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">isTrue={{isTrue}}</label>
</div>
<hr>
<div :style="{color:red,fontSize:font}">
5.div绑定style.
</div>
<div :style="styleObject">6.绑定style对象</div> </div> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
imgSrc:'http://jspang.com/wp-content/uploads/2017/02/vue01-2.jpg',
webUrl:'http://jspang.com',
className:'classA',
isTrue:false,
classA:'classA',
classB:'classB',
red:'red',
font:'20px',
styleObject:{
color:'green',
fontSize:'24px'
} }
})
</script>
4.v-model把数据绑定在特定的表单元素上，实现双向绑定
<div id="app">
<p>原始文本信息{{message}}my name is chenxq</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
<p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
<p>v-model.number:<input type="text" v-model.number="message"></p>
<p>v-model.trim:<input type="text" v-model.trim="message"></p>
<hr>
<h3>文本域</h3>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<hr>
<h3>多选框绑定一组值</h3>
<p>
<ol>
<li><input type="checkbox" id="javascript" value="javscript" v-model="webnames">
<label for="isTrue">javascript</label>
</li>
<li><input type="checkbox" id="python" value="python" v-model="webnames">
<label for="isTrue">python</label>
</li>
<li>
<input type="checkbox" id="java" value="java" v-model="webnames">
<label for="isTrue">java</label>
</li>
<li>
<input type="checkbox" id="angular" value="angular" v-model="webnames">
<label for="isTrue">angular</label>
</li>
<li>
<input type="checkbox" id="jquery" value="jquery" v-model="webnames">
<label for="isTrue">jquery</label>
</li>
</ol>
</p>
<p>
{{webnames}}
</p>
<hr>
<h3>单选框绑定</h3>
<p>
<input type="radio" id="one" value="male" v-model="sex">
<label for="one">male</label>
<input type="radio" id="two" value="female" v-model="sex">
<label for="two">female</label>
<p>您选择的性别是：{{sex}}</p>
</p> </div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'v-model',
isTrue:true,
webnames: [],
sex:'male'
}
})
</script>
5.v-on 绑定事件监听器，触发一些事件，简写“@”
<div id="app">
本场比赛得分：{{score}}
<p><button v-on:click="add">加分</button>
<button @click="sub">减分</button><br />
<input type="text" v-on:keyup.enter="onEnter" v-model="score2">
</p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
score:0,
score2:1
},
methods:{
add:function(){
this.score++;
},
sub:function(){
this.score--;
},
onEnter:function(){
this.score=this.score+parseInt(this.score2);
} } })
</script>
键盘事件可以用数字来表示，相关按键对应的数字：
6.v-pre&v-cloak&v-once
v-pre就是在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
v-cloak在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用。
v-once在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
7.v-text&v-html
v-text,就是解决当我们网速很慢或者javascript出错时，{{xxx}}会暴露的问题。
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v- html 指令.
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用.