一个Vue项目由很多Vue的实例组成的，每一个组件也是一个Vue实例
Vue的生命周期钩子：
Vue的生命周期函数就是Vue实例在某一个时间点会自动执行的函数，
beforeCreate created
beforeMount mount
beforeUpdate updated
beforeDestory destroyed
v-text和插值表达式是一样的 v-html指令会把值按照html解析。
具体用法:name 在data属性中值为：
<div>hello</div>
{{name + ‘ html’}} 输出 <div>hello</div> html
<div v-text=”name +’ Lee’”></div> 输出 <div>hello</div> Lee
<div v-html=”name + ‘ heml’”></div> 输出 hello heml
实现属性组合name1+name2显示在页面上
方式1：
计算属性：
new Vue({
el:”#li”,
data:{
name1:”lili”
name2:”hah”
name3：“wer“
},
computed:{ //这里是计算属性
fullName:function(){
return name1+name2;
}
}
})
{{fullName}}
当用计算属性的时候有内置缓存：
当name1值发生改变，则执行一次fullName的function函数，当name3发生值改变fullName的fullName函数不改变。
方式2：
methods 中添加fullName函数 fullName:function(){return this.name1+this.name2}
页面中的插值表达式{{fullName()}}
这种方式 通过测试 不会缓存值，如果 其他值发生改变 fullName函数会重新执行。
方式3
data:{fullName: “ 1 2”}
watch:{
name1:function(){
fullName = name1+name2;
}
Name2:function(){
fullName = name1+name2;
}
}
这样在侦听器中 name1 和 name2 发生改变都会重新给fullName 赋值。在其他插值表达式中的值改变时 fullName缓存在属性中提高效率
通过比较 在选用的时候 优先选用计算属性方式来实现。
在计算属性中可添加 get和set 方法。
computed:{
fullName:{
get:function(){
console.log("计算了一次");
return this.firstName + this.lastName;
},
set:function(setValue){
var arr = setValue.split(" ");
this.firstName = arr[0];
console.log("setValue");
this.lastName = arr[1];
}
}
}
Vue中的样式绑定：
实现效果 当点击元素改变颜色
<style>
activated:{
color:red;
}
</style>
<div @click=”handleDivClick” :class=”{activated:isActivated}”></div>
data:{
isActivated:false
}
methods:{
handleDivClick:function(){
isActivated = !this.isActivated;
}
}
改进：
<style>
activated:{
color:red;
}
</style>
<div @click=”handleDivClick” :class=”[activated]”></div>
data:{
activated:””
}
methods:{
handleDivClick:function(){
if(this.activated === “activated”)
this.activated = “”
} else {
this.activated = “activated”;
}
}
其中的数组可以写多个 class 并且用逗号分隔。
：style和：class 用法差不多 都是可以对象的形式或者数组的形式来定义。
<style>
activated:{
color:red;
}
</style>
<div @click=”handleDivClick” :style=”obj”></div>
data:{
obj:{
color:”red”
}
}
methods:{
handleDivClick:function(){
if(this.obj.color === “red”)
this.obj.color = “red”
} else {
this.obj.color = “black”;
}
}
}
还有一个思考：如果数组写在data中是不是解决很多问题。
Vue中的v-if和v-show
<div v-if=”show”></div>
<div v-show=”show”></div>
当data 中的show为false 两个div都不显示，第一个div元素不存在dom元素，第二个元素存在，但是style 中的 display:none,也就是不显示。
v-if性能略低于v-show.
<div v-if=”show”></div>
<div v-else></div>
<div v-if=”show ===’a’”>
<input key=”username”/>
</div>
<div v-else-if=”show ===’b’”>
<input key=”password”/>
</div>
<div v-else></div>
当给一个元素加上key的时候vue知道页面上唯一的元素.不加的时候因为vue会尽量复用页面上的元素所以如果第一次输入数字 当变换条件的时候，vue不会替换相同的元素。
