基础知识

一个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不会替换相同的元素。