vue构造器里的选项|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第5天

propsData option（全局扩展的数据传递）

propsData option不是和属性有关，它在全局扩展时进行传递数据。

<xi></xi> //自定义的标签
    <script type="text/javascript">
        var x =Vue.extend({
            template:`<h2>{{message}}-{{a}}</h2>`,
            data:function(){
                return{
                    message:'我'
                }
            },
            props:['a']
        });
        new x({propsData:{a:1}}).$mount('xi'); //挂载
    </script>
//我-1

computed option

computed的作用主要是对原数据进行改造输出

component option

• 我们定义ui组件没有实际功能 但是实际功能写在构造器里了 这个时候我们就要用native来进行一个调用

举例如下：

<div id="rood">
        <p>{{num}}</p>
        <p><button @click="add">add</button></p>
        <p><bnt @click.native="add"></bnt></p>
    </div>
    <script type="text/javascript">
        var bnt ={
            template:`<p><button>add </button></p>`
        }
        new Vue({
            el:'#rood',
            data:{
                num:1
            },
            components:{
                "bnt":bnt
            },
            methods:{
                add:function(){
                    this.num++
                }
            }
        })
    </script>

• 在构造器外部的标签调用构造器里边的功能如下

<div id="rood">
    <p>{{num}}</p>
    <p><button @click="add">add</button></p>
</div>
<button onclick="app.add()"></button>
<script type="text/javascript">
    var app=new Vue({
        el:'#rood',
        data:{
            num:1
        },
        methods:{
            add:function(){
                this.num++
            }
        }
    })
</script>

watch(监听事件)

在构造器里监听：

watch: {
                xxx: function (newVal, oldVal) {
                    if (判断条件) { 执行功能}
                },
            }
//xxx为监听事件

在构造器外监听

xxx.$watch("被监听的事件", function (newVal, oldVal) {});

//xxx为构造器名称

Mixins

用途：

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

执行先后顺序 ：

• 全局混入>构造器里的混入>构造器

构造器里的混入：

mixins:[xxx,yyy]
 //xxx写在构造器外部（以对象的形式）

全局混入

Vue.mixin({方法})

extends option 扩展选项

通过外部增加对象的形式，对构造器进行扩展，和混入非常相似

extend:xxx
//xxx为对象名

• 扩展只能有一个
• 具体形式：在构造器外写一个对象，在构造器选项里

扩展与混入的区别是：执行先后顺序不一样

                       构造器原生>扩展选项的执行

tips:如果扩展的方法里方法名与原生的方法名一致，则扩展的方法不被执行。

${ }插值形式

• 在构造器里写选项 delimiter

<div id="app">
     ${num}
</div>
<script type="text/javascript">
    var app=new Vue({
        el:'#rood',
        data:{
            num:1
        },
        delimiters:['${','}']
    })
</script>
// 1