学习Vue基础之模板语法、计算属性和观察者、class与style动态绑定

初识vue.js

    1.构建数据驱动的web应用开发框架。

    2.声明式渲染：应对前后端分离的大趋势，一般后端只给数据，一般都是json，我们只需要操作数据，就可以让页面改变。

        渐进式框架：适应各种行业需求以及场景。

        快速交付：结合第三方UI框架。

        企业需求：必备技能。

    3.MVC,MVP,MVVM 架构模型对比

        "MVC":Contronller：薄,view：厚，业务逻辑大部分部署在View。

        "MVVM":双向数据绑定，View的变动，映射在ViewModel上，反之一样。

        "MVP":View薄，不绑定任何业务逻辑，称为“被动视图”(Passive View),Presenter：厚，逻辑业务都部署在这。

    4.对比其他框架(angular，react)

开发环境搭建(vue.js 2.*)

    声明式渲染=》组件系统=》路由机制=》状态管理=》。。

　　引入vue.js框架 <script src="../js/vue.min.js"></script> 

模板语法

    1.插值

        1.文本：  <div id="box" > {{name}} </div> 

　　　　var vm = new Vue({//在浏览器的控制台可以访问vm，并且改变vm.name的值，这就是vue的响应式访问。
        　　el:"#box",
　　　　data:{
            　　name:"xiaoming",}
　　　　})

 

        2.纯HTML： v-html 防止XSS，如果要实现内容里面的html标签，则要在html相应的元素上加上v-html="vhtmltest"指令，v-html=""指令的值则对应相应的数据属性。但是如果要使用这种动态的渲染html元素，会非常容易受到XSS的攻击。请只对可信的内容进行差值，而不要对用户提供的内容进行差值。

　　　　 <span v-html="vhtmltest"></span> 

　　　　 data:{ 　　vhtmltest:'<b>v-html</b>', 　　　　} 

        3.表达式：

　　　　<span>{{10 + 20}}</span>，<span>{{10 > 20 ? 20 : 10}}</span>

    2.指令：是带有 v-前缀的特殊属性

        v-for:遍历数组中的元素。

        v-show：动态隐藏和显示 

　　　　 <p v-show="isShow">v-show动态隐藏和显示</p> 

　　　　 data:{ 　　isShow:true,　　　　} 

        v-html：实现内容里面的html标签

        v-bind：指令被用来响应地更新 HTML 元素的属性

        <p v-bind:class="isShow?'box':'box2'">普通class属性vue指令绑定进行三目运算</p><!-- 如果是普通的属性要使用三目表达式或者其他运算表达式的时候，也需要用到指令绑定才行 -->

　　　　 data:{ 　　isShow:true,　　　　} 

        v-if：根据值的true或者false来动态创建和删除，v-if是真正的条件渲染，也是惰性的，如果条件渲染一开始就是假，则什么也不做，直到条件变成真为止。而v-show则是必然会渲染dom节点，只是显示或者隐藏效果,

　　　　 <p v-if="isShow">v-if动态创建和删除</p> 

　　　　 data:{ 　　isShow:true,　　　　} 

        v-else：如果if不成立，则走else块

       <p v-if="isShow">ok</p>
　　　　<p v-else>else ok</p>

　　　　 data:{ 　　isShow:true,　　　　} 

            用template结合v-if条件渲染一整组,我们可以把template包装一整组，最终的渲染并不会包含template元素。

                <template v-if="isShow">
                    <p>111</p>
                    <p>111</p>
                    <p>111</p>
                </template>

        v-on:click ：点击实现Vue methods方法

　　　　 <button @click="handleClick">点击实现vue methods方法</button> 

        methods:{
            handleClick:function(){
                this.name = 'aaa';
                this.isShow = false;
            },

        v-model:双向数据绑定指令，它是MVVM架构的最明显的特征，可以设定元素的值，元素的值反过来还可以影响设定的值，例子

             <p>单价：<input type="text" v-model="price"></p>{{price}} ，还可以在data里设置price的值

    3.缩写

        v-bind:src => :src

        v-on:click => @click 

计算属性和观察者

    1.计算属性

        模板内的表达式是非常便利的，但是他们实际上只用来简单的计算。在模板内加入过多的逻辑，不利于维护，不推荐。例如

            <div id="example">
                {{message.split('').reverse().join('')}}
            </div>

        在这个地方，模板不再简单和清晰，你需要看一段时间才能意识到，这里是想要显示变量message的翻转字符串，当你想要在模板中多次引用这个翻转字符串的时候，就会更加难以处理。

        这就是对于任何复杂逻辑，你都要使用计算属性的原因。

        就算依赖的值改变了，计算属性也会自动改变，重新计算一遍，

　　　　<p>{{upperWord}}--计算属性</p>

        computed:{//计算属性
            upperWord:function(){
                return this.name.substring(0,1).toUpperCase() + this.name.substring(1);
            }
        }

    2.计算缓存和methods

        计算属性是根据他们的依赖进行缓存的，计算属性根据依赖的属性改变而改变。方法也能够实现计算属性，但是如果多次调用方法，方法将会多次调用，而计算属性可以只运行一次，因为计算可以被缓存。

　　　　  <p>{{upperWordMe()}}--vue方法</p> 

　　　　　　data:{
　　　　　　　　name:'sarah',
　　　　　　}
            upperWordMe:function(){
                return this.name.substring(0,1).toUpperCase() + this.name.substring(1);
            },

    3.计算属性和watch

        vue提供了一个更通用的方式来观察和响应VUE实例上的数据变动，watch属性。当你有些数据需要随着其他数据变动而变动时，你很容易滥用watch--特别是特别是你之前使用过angularJS。然而，通常更好的想法是使用计算属性而不是命令式的watch回调，例如

        <p>单价：<input type="text" v-model="price"></p>{{price}}
        <p>数量：<input type="text" v-model="number"></p>{{number}}

　　　　　　　data:{

            　　　　price:0,

           　　　　 number:0,

　　　　　　　　}
            watch: {
                price:function(val){//名字要对应data中的price，来实现监听
                    this.sum = val * this.number;
                },
                number:function(val){//名字要对应data中的number，来实现监听
                    this.sum = val * this.price;
                }
            },

            计算属性来实现，因为计算属性是依赖值的改变而改变，否则就缓存，所以效率更好，资源利用率更高。

　　　　computed:{
            　　getsum:function(){
                　　return this.price * this.number;
            　　}
　　　　}

    4.计算setter.

        计算属性默认只有getter，vue的methods方法可以进行传入参数操作，所以计算属性也提供了一种setter用法，不过一般计算方法只需要get值就行了，一般不用setter方法。

        <p>计算属性setter用法实现{{getData}}</p>

        computed:{
            getData:{
                get:function(){
                    return 'hello world'//get值是固定的。
                },
                set:function(val){
                    console.log(val);//在浏览器控制台输入vm.getData='222'就可以实现setter方法。
                }
            }
        }    

class与style动态绑定

    可以用v-bind进行处理，只需要计算出表达式的最终字符串。不过字符串的拼接麻烦又容易出错，vue.js加强了这方面，表达式的结果类型除了字符串，还可以是数组和对象，

        <p class="default" v-bind:class="isShow?'aaa':'bbb'">第一种:三目运算写法，v-bind动态改变class的方法</p>
        <p class="default" :class="{box1:isShow,box2:isShow2}">第二种：对象写法，v-bind动态改变class的方法,isShow如果是true则添加class</p>
        <p class="default" :class="[className,'box2']">第二种：数组写法，v-bind动态改变class的方法</p>
        <p class="default" :style="style1">第一种：style的差值写法，v-bind动态改变style的方法</p>
        <p class="default" :style="[style1,style2]">第二种：style的数组写法，v-bind动态改变style的方法</p>

        data:{
                isShow:true,
                isShow2:false,
                className:'bbb',
                style1:{background:'red'},//注意fontSize写法,在浏览器的控制台输入vm.style1.background = 'blue'可以改变相应的样式。
                style2:{fontSize:'14px'},
        }                    

 

列表渲染

    1.v-for

        用v-for把一个数组对应成一组元素，需要用 item in items形式的特殊语法，items代表源数据数组并且item是数组元素迭代的别名。

        of和in原理上没有多大的差别

        a:in     <li v-for="data in dataList">用v-for来实现数组转化成元素{{data}}</li> 

        b:of     <li v-for="(data,index) of dataList">用v-for来实现数组转化成元素{{data}},index表示下标{{index}},</li> 

    2.key

        跟踪每个节点的身份，从而重用和重新排序现有的元素

            这里作为例子用index下标做了key值，实际应用中最好不要用，最好在对象中有一个专门的id值作为key，来让我们认识和复用元素。

             <li v-for="(data,index) of dataList" :key="index">{{index}}用v-for来实现数组转化成元素,index表示下标{{data}}</li> 

        理想的key值是每一项都有的且唯一的id。

    3.数组更新检测

        1.使用以下方法操作数组，可以检测变动，会热更新DOM节点元素，在控制台中输入 vm.dataList.push("eee"); 

            push(),pop(),shift(),unshift(),splice(),sort(),reverse(),

        2.filter(),concat(),slice(),map(),新数组代替旧数组,这些方法Vue检测不到数组的变动，所以不会对元素DOM节点有所改变,但如果重新赋值，则可以。

            控制台输入 vm.dataList = vm.dataList.map((item)=>"xiaoming" + item) ，item代表遍历数组里面的每一个元素。

        3.这里需要特别注意，不能检测以下变动的数组，

             vm.items[indexOfItem] = newValue //用下标去更新数组内容，虽然数组内容发生了改变，但是DOM节点元素并不会更新。

            解决办法：  Vue.set(vm.dataList,0,'newValue') 

               或者用splice增删改的方法。  vm.dataList.splice(0,1,'newItem') 

        4.应用：显示过滤结果

            使用计算属性。

            可以直接到data里面取值  <ul><li v-for="data in dataList">{{data}}</li></ul> 

            也可用计算属性的方法来实现，效果是一样的

　　　　  <input type="text" v-model="needText"> 　　

　　　　  <ul><li v-for="data in computedDataList">{{data}}</li></ul> 

            data:{
　　　　　　　　　　needText:'',
　　　　　　　　}
　　　　　　　　computedDataList:function(){
                return this.dataList.filter((item)=>item.indexOf(this.needText) > -1);//item代表遍历数组里面的每一个元素
            },