虚拟DOM
重绘/回流
表达式
Vue1.0中：单次插值 ：｛｛* val｝｝值插入后将不能改变
HTML插值 ：{{ htmlStr }} 输出html标记
<!--插值-->
{{ 5*4 }}
{{[1,2,3].reverse().join("-")}}
{{ 5>4? "真" :"假"}}
{{msg}}
//初始化vue程序，产生vue实例
new Vue({
el : ".box",//指定挂载元素
data : { //初始化数据,将数据添加到实例身上
msg:"Hello Vue"//务必在data 中初始化要使用的数据，否则会抛出警告
}
})
数据绑定
//指定挂载的元素
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}">
内容
</div>
<div :class="[first,second]">内容二</div>
<div :class ="[first,isShow?'':third]">内容三</div>
<div :style="[styleObject,styleObj2]">内容四</div>
</div>
var vm = new Vue({
el: ".box",//指定挂载元素
data: {
msg: "hello vue",//务必在data 中初始化要使用的数据，否则会抛出警告
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是默认的参数，如果再事件处理程序中，想同时使用事件对象和其余的参数，需要显式传入$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"
},
//创建方法
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 将表单项与数据进行双向数据绑定
<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:"假"
}
})
