3、6个常用选项 - Zikzin/vuejs2.0-study GitHub Wiki

• propsData 不是和属性有关，他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识，作一个的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。

<header></header>

`<script type="text/javascript">`

   `var  header_a = Vue.extend({`

       `template:`<p>{{message}}</p>`,`

       `data:function(){`

           `return {`

               `message:'Hello,I am Header'`

           `}`

       `}`

   `}); `

   `new header_a().$mount('header');`

`</script>`

• 扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
• 我们用propsData三步解决传值：
  • 1、在全局扩展里加入props进行接收。propsData:{a:1}
  • 2、传递时用propsData进行传递。props:[‘a’]
  • 3、用插值的形式写入模板。{{ a }}

var header_a = Vue.extend({

`template:`<p>{{message}}-{{a}}</p>`,`

`data:function(){`

    `return {`

        `message:'Hello,I am Header'`

    `}`

`},`

`props:['a']`

});

new header_a({propsData:{a:1}}).$mount('header');

• 总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。

• computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。

• 我们先来做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。
• 主要的javascript代码：

computed:{

`newPrice:function(){`

    `return this.price='￥' + this.price + '元';`

`}`

}

• 全部代码

<div id="app">

    `{{newPrice}}`

`</div>`


`<script type="text/javascript">`

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

            `price:100`

        `},`

        `computed:{`

            `newPrice:function(){`

                `return this.price='￥' + this.price + '元';`

            `}`

        `}`

    `})`

`</script>`

• 现在输出的结果就是：￥100元。

• 例如：我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。
• 没有排序的新闻列表，是安装日期正序排列的。

- var newsList=[ {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},

`{title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},`

`{title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},`

`{title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},`

];

• 我们希望输出的结果：

  • 起底“最短命副市长”：不到40天落马，全家被查-2017/3/23
  • 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
  • 日本第二大准航母服役 外媒：针对中国潜艇-2017/3/12
  • 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10

• 我们的在computed里的javascript代码：我们用js原生方法给数组作了反转。

computed:{

`reverseNews:function(){`

    `return this.newsList.reverse();`

`}`

}

• 总结：computed 属性是非常有用，在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍，加深印象。

• 复习一下最简单的使用方法，一个数字，每点击一下按钮加1.

  <div id="app">

    `{{ a }}`
  
    `<p><button @click="add">add</button></p>`
  

  </div>

  <script type="text/javascript">

    `var app=new Vue({`
  
        `el:'#app',`
  
        `data:{`
  
            `a:1`
  
        `},`
  
        `methods:{`
  
            `add:function(){`
  
                `this.a++`
  
            `}`
  
        `}`
  
    `})`
  

  </script>

• 1、methods中参数的传递

  • 使用方法和正常的javascript传递参数的方法一样，分为两部：1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}. 2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”>.

  • 现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。

    <div id="app">

    `{{ a }}`
    
    `<p><button @click="add(2)">add</button></p>`
    

    </div>

    <script type="text/javascript">

    `var app=new Vue({`
    
        `el:'#app',`
    
        `data:{`
    
            `a:1`
    
        `},`
    
        `methods:{`
    
            `add:function(num){`
    
                `if(num!=''){this.a+=num}`
    
                `else{this.a++}`
    
            `}`
    
        `}`
    
    `})`
    

    </script>

    • 这时，再点击按钮是每次加2个数字。

• 2、methods中的$event参数

  • 传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。传递：<button @click=”add(2,$event)”>add 。
  • 我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。
  • 跟js原生的MouseEvent是一样的。

• 3、native 给组件绑定构造器里的原生事件。

  • 在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

  • 现在我们把我们的add按钮封装成组件：

    • （1）声明btn对象：

  var btn={

  template:组件Add

  }

  - （2）在构造器里声明：
  

  components:{

    `"btn":btn`
  

  }

  - （3）用.native修饰器来调用构造器里的add方法
  

  <p><btn @click.native="add(3)"></btn></p>

• 4、作用域外部调用构造器里的方法

  • 这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

<button onclick="app.add(4)" >外部调用构造器里的方法</button>

• 数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。

• 温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。
• 先来模拟一个温度变化的情况：我们使用按钮来加减温度。

<div id="app">

    `<p>今日温度：{{temperature}}°C</p>`

    `<p>穿衣建议:{{this.suggestion}}</p>`

    `<p>`

        `<button @click="add">添加温度</button>`

        `<button @click="reduce">减少温度</button>`

    `</p>`

</div>

var suggestion=['T恤短袖','夹克长裙','棉衣羽绒服'];

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

            `temperature:14,`

            `suggestion:'夹克长裙'`

        `},`

        `methods:{`

            `add:function(){`

                `this.temperature+=5;`

            `},`

            `reduce:function(){`

                `this.temperature-=5;`

            `}`

        `},`

        `watch:{`

            `temperature:function(newVal,oldVal){`

                `if(newVal>=26){`

                    `this.suggestion=suggestion[0];`

                `}else if(newVal<26 && newVal >=0)`

                `{`

                    `this.suggestion=suggestion[1];`

                `}else{`

                    `this.suggestion=suggestion[2];`

                `}`

            `}`

        `}`

    `})`

• 有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵 活。

app.$watch('xxx',function(){})

• 还是上边的案例我们改成实例方法的模式。

app.$watch('temperature',function(newVal,oldVal){

`if(newVal>=26){`

    `this.suggestion=suggestion[0];`

`}else if(newVal<26 && newVal >=0)`

`{`

    `this.suggestion=suggestion[1];`

`}else{`

    `this.suggestion=suggestion[2];`

`}`

• Mixins一般有两种用途：
  • 1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
  • 2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

• 我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.

<div id="app">

    `<p>num:{{ num }}</p>`

    `<P><button @click="add">增加数量</button></P>`

`</div>`

`<script type="text/javascript">`

    `//额外临时加入时，用于显示日志`

    `var addLog={`

        `updated:function(){`

            `console.log("数据放生变化,变化成"+this.num+".");`

        `}`

    `}`

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

            `num:1`

        `},`

        `methods:{`

            `add:function(){`

                `this.num++;`

            `}`

        `},`

        `mixins:[addLog]//混入`

    `})`

`</script>`

• 从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
• 在上边的代码的构造器里我们也加入了updated的钩子函数：

updated:function(){

  `console.log("构造器里的updated方法。")`

},

• 这时控制台输出的顺序是：

  • mixins数据放生变化,变化成2.
  • 构造器里的updated方法。

• PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

• 我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

• Vue.mixin({

  updated:function(){

    `console.log('我是全局被混入的');`
  

  }

})

• PS：全局混入的执行顺序要前于混入和构造器里的方法。

• 通过外部增加对象的形式，对构造器进行扩展。它和我们上节课讲的混入非常的类似。

<div id="app">

    `{{message}}`

    `<p><button @click="add">add</button></p>`

`</div>`

`<script type="text/javascript">`

    `var bbb={`

        `created:function(){`

            `console.log("我是被扩展出来的");`

        `},`

        `methods:{`

            `add:function(){`

                `console.log('我是被扩展出来的方法！');`

            `}`

        `}`

    `};`

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

            `message:'hello Vue!'`

        `},`

        `methods:{`

            `add:function(){`

                `console.log('我是原生方法');`

            `}`

        `},`

        `extends:bbb`

    `})`

`</script>`

• 因为这节课内容比较少，所以我们把要讲的最后一个选项一起讲了。delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。

delimiters:['${','}']

• 现在我们的插值形式就变成了${}。