虛擬DOM
重繪/回流
表達式
Vue1.0中：單次插值 ：｛｛* val｝｝值插入后將不能改變
HTML插值 ：{{ htmlStr }} 輸出html標記
<!--插值-->
{{ 5*4 }}
{{[1,2,3].reverse().join("-")}}
{{ 5>4? "真" :"假"}}
{{msg}}
//初始化vue程序蟀拷，產(chǎn)生vue實例
new Vue({
el : ".box",//指定掛載元素
data : { //初始化數(shù)據(jù),將數(shù)據(jù)添加到實例身上
msg:"Hello Vue"http://務必在data 中初始化要使用的數(shù)據(jù)备典，否則會拋出警告
}
})
數(shù)據(jù)綁定
//指定掛載的元素
console.log(vm.$el)
//將 vue 實例掛載到指定的元素
vm.$mount(".box");
attr 是 v-bind:attr 的簡寫形式
<div class="box">
{{555}}
<span v-bind:title="msg" v-bind:id="a" v-bind:diy="msg" v-bind:style="styleObject">鼠標停一下</span>
<!--:attr 是 v-bind:attr 的簡寫形式-->
<span :style="styleObject">第二個span</span>
<div :class="{a:isA , b:isB}">
內(nèi)容
</div>
<div :class="[first,second]">內(nèi)容二</div>
<div :class ="[first,isShow?'':third]">內(nèi)容三</div>
<div :style="[styleObject,styleObj2]">內(nèi)容四</div>
</div>
var vm = new Vue({
el: ".box",//指定掛載元素
data: {
msg: "hello vue",//務必在data 中初始化要使用的數(shù)據(jù)，否則會拋出警告
a: "testId",
isA: true,
isB: true,
first: "a",
second: "c",
isShow : true,
third :"d",
styleObject: {
fontSize: "30px",
color: "red"
},
styleObj2:{
color:"pink"
}
}
})
條件
ng-if v-if
列表渲染
ng-repeat v-for
ng track by $index
Vue1.0 v-for="a in arr2 " track-by="$index"
Vue2.0 v-for="a in arr2 " v-bind:key="a.id"
事件
1.$().on('click')
v-on:eventName添加事件 v-on:click=" "
2.@eventName是 v-on:eventName 簡寫形式
3.$event是默認的參數(shù)扑馁，如果再事件處理程序中，想同時使用事件對象和其余的參數(shù)看蚜，需要顯式傳入$event
4.修飾符：v-on:eventName:modifier
stop 阻止冒泡
left
<div class="box">
<button v-on:click="isShow =! isShow">click</button>
<button v-on:click="changeEvent">click Two</button>
<button @click="changeEvent($event,'a','b')">click 3</button>
<h1 v-show="isShow">This is h1</h1>
{{foo()}}
{{fullName()}}
<div v-on:click="p1">This is div
<button @click.stop="changeEvent">btn</button>
<input type="text" v-model='firstName' @keydown.left.up.down.right.delete="input">
{{firstName}}
</div>
</div>
<script src="./js/vue2.0.js" charset="utf-8"></script>
<script>
var vm = new Vue({
el: ".box",//指定掛載元素
data: {
isShow: true,
firstName:"lu",
lastName:"sun"
},
//創(chuàng)建方法
methods: {
changeEvent : function(e,arg1,arg2){
this.isShow = !this.isShow;
console.log(e);
console.log(arg1+arg2)
},
foo : function(){
return Math.random();
},
fullName:function(){
return this.firstName+this.lastName;
},
p1 : function(){
console.log("div click")
},
input:function(){
console.log(this.firstName)
}
}
})
model
v-model 將表單項與數(shù)據(jù)進行雙向數(shù)據(jù)綁定
<div class="box">
<input type="text" v-model="msg">
<input type="checkbox" v-model="c1">{{c1}}
<br>
<input type="checkbox" v-model="c2" value=1>1
<input type="checkbox" v-model="c2" value=2>2
<input type="checkbox" v-model="c2" value=3>3
{{c2}}
<h1>{{msg}}</h1>
<br>
<input type="checkbox" v-model="c3" :true-value='a' :false-value='b'>{{c3}}
</div>
var vm = new Vue({
el: ".box",//指定掛載元素
data: {
msg:"hi",
c1:true,
c2:["tom"],
c3:"",
a:"真",
b:"假"
}
})
