学习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表明遍历数组里面的每个元素
            },