vue2.0基础(三、构造器的选项)

作者: zZ_d205 | 来源:发表于2020-08-18 10:29 被阅读0次

一、propsData Option

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>propsData</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>propsData</h1>
    <hr>
    <header></header>
    <script>

       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:12}}).$mount('header')

     
    </script>
</body>
</html>

二、computed Option 计算选项

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="item in reversNews">
                {{item.title}}--{{item.date}}

            </li>
        </ul>
    </div>
    <script>
        var newsList = [{
                title: '香港或就“装甲车被扣”事件追责 起诉涉事运输公司',
                date: '2017/3/10'
            },
            {
                title: '日本第二大准航母服役 外媒：针对中国潜艇',
                date: '2017/3/12'
            },
            {
                title: '中国北方将有明显雨雪降温天气 南方阴雨持续',
                date: '2017/3/13'
            },
            {
                title: '起底“最短命副市长”：不到40天落马，全家被查',
                date: '2017/3/23'
            },
        ];
        var app = new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList:newsList
            },
            computed: {
                newPrice: function () {
                    return '￥' + this.price + "元"
                },
                reversNews:function(){
                    return this.newsList.reverse()

                }
            }

        })
    </script>
</body>

</html>

三、methods Option 方法选项

methods中的$event参数

传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。

传递：

<button @click=”add(2,$event)”>add</button> 。

我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。

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

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

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

声明btn对象：

var btn={
    template:`<button>组件Add</button>`     
}

在构造器里声明：

components:{
    "btn":btn
 }

用.native修饰器来调用构造器里的add方法

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>methods</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>methods</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add(2)">adddddd</button></p>
        <p><btn @click.native="add(4)"></btn></p>

    </div>
    <button onclick="app.add(5)">外部add</button>
    <script>
        var btn={
            template:`<button>组件add</button>`
        }
        var app= new Vue({
            el:'#app',
            data:{
                a:1
            },
            components:{
                'btn':btn
            },
            methods:{
                add(num){
                    if(num!=''){
                        this.a+=num
                    }else{
                        this.a++
                    }
                }
            }
        })
    </script>
</body>
</html>

四、Watch 选项监控数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch</h1>
    <hr>
    <div id="app">
        <p>今日温度：{{wendu}}</p>
        <p>穿衣建议：{{chuanyi}}</p>
        <p>
            <button @click="shenggao()">升高温度</button>
            <button @click="jiangdi()">降低温度</button>
        </p>
    </div>
    <script>
        var app= new Vue({
            el:'#app',
            data:{
                wendu:14,
                chuanyi:"夹克长裙"
            },
            methods:{
                shenggao(){
                    this.wendu+=5;
                },
                jiangdi(){
                    this.wendu-=5;
                }
            },
            watch:{
                // wendu:function(newVal,oldVal){
                //     if(newVal>=26){
                //         this.chuanyi="T恤短袖"
                //     }else if(newVal<26&&newVal>0){
                //         this.chuanyi="夹克长裙"
                //     }else{
                //         this.chuanyi="棉衣羽绒服"
                //     }
                // }
            }
        })

// 用实例属性写watch监控
        app.$watch('wendu',function(newVal,oldVal){
            if(newVal>=26){
                        this.chuanyi="T恤短袖"
                    }else if(newVal<26&&newVal>0){
                        this.chuanyi="夹克长裙"
                    }else{
                        this.chuanyi="棉衣羽绒服"
                    }
        })
    </script>
</body>
</html>

五、Mixins 混入选项操作

Mixins一般有两种用途：

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

### mixins的调用顺序

从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数：

updated:function(){
      console.log("构造器里的updated方法。")
},

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mixins 混入选项操作</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Mixins 混入选项操作</h1>
    <hr>
    <div id="app">
        {{num}}
        <p>
            <button @click="add()">add</button>
        </p>
    </div>
    <script>
        var addConsole={
            updated(){
                
                console.log('数据发生变化',this.num)

            }

        }
        Vue.mixin({
            updated(){
                console.log('全局混入')

            }
        })



        var app = new Vue({
            el: '#app',
            data: {
                num: 1,

            },
            methods: {
                add() {
                    this.num++;
                }
            },
            updated(){
                console.log('数据发生变化')
            },
            mixins:[addConsole]
        })
    </script>
</body>

</html>

六、 Extends Option 扩展选项

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extends Option选项操作</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Extends Option选项操作</h1>
    <hr>
    <div id="app">
        <!-- {{num}} -->
        ${num}
        <p>
            <button @click="add()">add</button>
        </p>
    </div>
    <script>

        var extendsObj={
            updated:function(){
                console.log('扩展的') 
            },
            methods: {
                add() {
                    console.log('扩展的fangfa')
                    this.num++;
                }
            },
        }
    


        var app = new Vue({
            el: '#app',
            data: {
                num: 1,

            },
            methods: {
                add() {
                    console.log('原生方法')
                    this.num++;
                }
            },
            updated(){
                console.log('数据发生变化')
            },
            extends:extendsObj,
            delimiters:['${','}']
        })
    </script>
</body>

</html>

delimiters

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

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

现在我们的插值形式就变成了${}。这季的内容就这些了，我们下季见吧

vue2.0基础(三、构造器的选项)

一、propsData Option

二、computed Option 计算选项

三、methods Option 方法选项

四、Watch 选项监控数据

五、Mixins 混入选项操作

六、 Extends Option 扩展选项

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue2.0基础(三、构造器的选项)

一、propsData Option

二、computed Option 计算选项

三、methods Option 方法选项

四、Watch 选项 监控数据

五、Mixins 混入选项操作

六、 Extends Option 扩展选项

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

四、Watch 选项监控数据