VUE2.0基本语法(二)

最新推荐文章于 2024-01-20 22:31:00 发布

步入飞花

最新推荐文章于 2024-01-20 22:31:00 发布

阅读量135

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42646178/article/details/119733335

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了Vue2.0中的组件使用，包括全局组件和局部组件的创建，以及父子组件间的数据交互。通过props实现从父组件向子组件传递数据，并强调了单向数据流的原则。接着讲解了计算属性computed的用途，例如计算商品折扣，以及通过watch监听属性变化并在数据改变时执行特定操作。最后探讨了混入Mixins的功能，如何定义和使用混入对象，以及处理合并冲突的情况。

摘要由CSDN通过智能技术生成

1.VUE2.0基本语法(二)

1.1组件的使用

<body>
    <h1>Vue的组件</h1>
    <div id="app"> 
        <hello></hello>
        <world></world>
        <redworld></redworld>
    </div>
    <script>
        Vue.component('hello',{
            template: '<div>这是全局组件</div>'
        })
        var uve = new Vue({
            el: '#app',
            data: {
                message: 10
            },
            components: {
                "world": {
                    template: '<b>这是局部组件</b>'
                },
                "redworld": {
                    template: "<b style='color: red;'>这是局部组件</b>"
                },
            }
        });
    </script>
</body>

在这里插入图片描述

1.2父子组件数据的交互

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。
也就是props是子组件访问父组件数据的唯一接口。

<body>
    <h1>Vue的组件</h1>
    <div id="app">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
        <world></world>
        <redworld></redworld>
    </div>
    <script>
        Vue.component('blog-post', {
        	// 获取父组件的title属性值
            props: ['title'],
            // 使用title属性值
            template: '<h3>{{ title }}</h3>'
        });

        var uve = new Vue({
            el: '#app',
            data: {
                message: 10
            }
        });
    </script>
</body>

在这里插入图片描述
单向数据流：当父组件的属性变化时，将传导给子组件，但是反过来不会

1.3computed

计算属性,模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
案例：计算商品折扣

<body>
    <div id="app">
        <h3>商品价格</h3>
        <p>原价：{{yuanjia}}</p>
        <p>折扣：{{zhekou}}</p>
        <p>现价：{{xianjia}}</p>
        <button @click="add">add</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                yuanjia: 100,
                zhekou: 0.8
            },
            computed:{
                xianjia: function(){
                    return parseFloat(this.yuanjia * this.zhekou).toFixed(2) + "元"
                }
            },
            methods: {
                add: function(){
                    this.yuanjia ++
                }
            }
        });
    </script>
</body>

在这里插入图片描述

1.4watch

侦听属性，虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
案例：调用add和sub方法时，watch监听数据变化

    <div id="app">
        <p>{{message}}</p>
        <button @click="add">++</button>
        <button @click="sub">--</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 1
            },
            methods: {
                add:function(){
                    this.message ++
                },
                sub:function(){
                    this.message --
                }
            },
            watch: {
                message(val, oldVal){
                    console.log("val=" +val+ " oldVal=" +oldVal);
                }
            }
        });
    </script>

在这里插入图片描述

1.5混入Mixins

混入Mixins 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
当引入它的对象有数据时使用自身的数据，没有的时候使用mixin的对象

1.5.1使用

mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。
定义：

const myMixin = {
    // 自定义的属性
    number: 1000,
    data: {
        content: 2,
        count: 100
    },
    // 生命周期mixin的优先级比引入它的对象高
    created() {
        console.log("mixin was created");
        
    },
    methods: {
        addContent(){
            console.log("mixin addContent");
            this.content ++;
        }
    }
}

使用：

var vm = new Vue({
    el: '#app',
    data: {
        
    },
    mixins: [myMixin]
});

在这里插入图片描述

1.5.2Mixins合并冲突

值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的
案例：设置addContent更改content的值，在mixin对象和组件均设置addContent,调用时会覆盖mixin对象的方法

<body>
    <div id="app">
        {{ content }}
        <button @click="addContent">add</button>
    </div>
    <script>
         const myMixin = {
            // 自定义的属性
            number: 1000,
            data: {
                content: 2,
                count: 100
            },
            // 生命周期mixin的优先级比引入它的对象高
            created() {
                console.log("mixin was created");
                
            },
            methods: {
                addContent(){
                    console.log("mixin addContent");
                    this.content ++;
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            mixins: [myMixin],
            // 生命周期mixin的优先级比引入它的对象高
            created() {
                console.log("vm was created");
            },
            methods: {
                addContent(){
                    console.log("vm addContent");
                    this.content ++;
                }
            }
        });
    </script>
</body>

在这里插入图片描述

步入飞花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE2.0基本语法(二)

1.VUE2.0基本语法(二)1.1组件的使用<body> <h1>Vue的组件</h1> <div id="app"> <hello></hello> <world></world> <redworld></redworld> </div> <script> Vu
复制链接

扫一扫

专栏目录