当前位置 : 主页 > 网页制作 > html >

四.Vue成员

来源：互联网 收集：自由互联 发布时间：2021-06-12
目录 四.Vue成员 1.分隔符成员delimiters 2.计算属性成员computed 3.监听属性成员watch 4.组件 5.局部组件 6.全局组件 7.组件复用的数据隔离 8.组件信息交互父传子 9.组件信息交互子传父 四.Vue成

目录

  • 四.Vue成员
    • 1.分隔符成员delimiters
    • 2.计算属性成员computed
    • 3.监听属性成员watch
    • 4.组件
    • 5.局部组件
    • 6.全局组件
    • 7.组件复用的数据隔离
    • 8.组件信息交互父传子
    • 9.组件信息交互子传父

四.Vue成员

1.分隔符成员delimiters

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
        [[ msg }}
        ${ msg }
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // 修改插值表达式符号
        // delimiters: ['[[', '}}'],
        // delimiters: ['${', '}'],
    })
</script>
</html>

2.计算属性成员computed

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="a">
            <input type="text" v-model="b">
        </p>
        <!--报错：计算后属性为只读属性-->
        <!--<input type="text" v-model="xyz">-->
        <!--关键：计算后属性必须渲染后，绑定的方法才会生效-->
        <p>{{ xyz }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            a: '',
            b: '',
            // 报错：计算后属性不需要在data中重复定义
            // xyz: '',
        },
        computed: {
            // 1) 计算后属性不需要在data中重复定义
            // 2) 计算后属性必须渲染后，绑定的方法才会生效
            // 3) 计算后属性绑定的方法中的任意变量值更新，方法都会被调用
            // 4) 计算后属性为只读属性(不可写)
            xyz () {
                // a值一变化，该方法就会被回调
                // 原因：计算后属性绑定的方法中的任意变量值更新，方法都会被调用
                this.a;
                // this.b;
                console.log('该方法调用了')
            }
            // 使用场景：一个计算后属性的值，可以来源于多个属性值
        }
    })
</script>
</html>

#案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>
            姓：<input type="text" v-model="first_name">
            名：<input type="text" v-model="last_name">
        </p>
        <p>{{ full_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 使用场景：一个计算后属性的值，可以来源于多个属性值
    new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: '',
        },
        computed: {
            full_name () {
                if (this.first_name && this.last_name)
                    return this.first_name + ' ' + this.last_name;
                return '姓名'
            }
        }
    })
</script>
</html>

3.监听属性成员watch

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num_a">
        <p>num_a: {{ num_a }}</p>
        <p>num_b: {{ num_b }}</p>
        <p>num_c: {{ num_c }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num_a: '',
            num_b: '',
            num_c: '',
        },
        watch: {
            // 1) 监听绑定的属性，该属性可以get、set
            // 2) 监听的属性一旦发生值更新，绑定的方法就会被调用
            // 3) 监听的属性是已定于的属性(必须在data中定义)
            num_a() {
                console.log('num_a值更新，该方法被调用');
                this.num_b = this.num_a * 10;
                this.num_c = this.num_a * 20;
            },
          }
        // computed: {
        //     num_b() {
        //         return this.num_a * 10
        //     },
        //     num_c() {
        //         return this.num_a * 20
        //     },
        // }
    })
</script>
</html>

4.组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 组件：由 template + css + js 三部分组成(.vue文件)
    // 1）组件具有复用性
    // 2) 复用组件时，数据要隔离
    // 3) 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别

    // 组件介绍：
    // 1) 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
    // 2) 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
    // 3) 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
    // 4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
    // 5) template只能解析一个根标签
    let num = 100;
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
        template: `
        <div id="main">
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
            <div>{{ msg }}</div>
            <div>${ num }</div>
        </div>
        `,

    })

</script>
</html>

5.局部组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<div class="ad">-->
            <!--<img src="img/mn.jpg" alt="">-->
            <!--<h4>美女</h4>-->
        <!--</div>-->

        <!--<ad></ad>-->
        <!--<ad></ad>-->

        <!--3）组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1）创建组件
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女</h4>
        </div>
        `
    };


    new Vue({
        el: '#app',
        // 2）注册组件
        components: {
            // ad: localTag,
            // localTag: localTag,
            //注册表为驼峰体形式时,会被解析为<local-tag></local-tag>标签
            localTag
        }
    })
</script>
</html>

6.全局组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
    <div id="main">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    // 1）创建组件
    // 2）注册组件
    // 3）渲染组件
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女</h4>
        </div>
        `
    };

    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    Vue.component('global-tag', {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>共享美女</h4>
        </div>
        `
    });

    new Vue({
        el: '#app',
        components: {
            localTag
        }
    });
    new Vue({
        el: '#main',
        components: {
            localTag
        }
    });
</script>
</html>

7.组件复用的数据隔离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
    <div id="main">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    // 1）创建组件
    // 2）注册组件
    // 3）渲染组件
    let localTag = {
        template: `
        <div @click="click1" class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女被点了{{ num }}下</h4>
        </div>
        `,
        // 除了根组件，数据都是函数的返回值字典
        data () {
            return {
                num: 0
            }
        },
        methods: {
            click1() {
                this.num ++
            }
        },
    };

    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    Vue.component('global-tag', {
        template: `
        <div class="ad" @click="click2">
            <img src="img/mn.jpg" alt="">
            <h4>共享{{ count }}次美女</h4>
        </div>
        `,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            click2() {
                this.count ++
            }
        }
    });

    new Vue({
        el: '#app',
        components: {
            localTag
        }
    });
    new Vue({
        el: '#main',
        components: {
            localTag
        }
    });
</script>
</html>

8.组件信息交互父传子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad_dic'],
        template: `
        <div class="ad">
            <img :src="ad_dic.img" alt="">
            <h4>{{ ad_dic.title }}</h4>
        </div>
        `,
    };

    // 模拟后台的数据
    let ads = [
        {
            'img': 'img/001.png',
            'title': '小猫'
        },
        {
            'img': 'img/002.png',
            'title': '黄蛋'
        },
        {
            'img': 'img/003.png',
            'title': '蓝蛋'
        },
        {
            'img': 'img/004.png',
            'title': '短腿'
        },
    ];
    new Vue({
        el: '#app',
        data: {
            ads,  // 后期项目是后台返回的数据
        },
        components: {
            localTag
        }
    })
    // 分析数据 父传子
    // 1）父组件提供数据
    // 2）在父组件模板中，为子组件标签设置自定义属性绑定父级数据
    // 3）在子组件props成员中，接收自定义属性
    // 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据
</script>
</html>

9.组件信息交互子传父

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            font-size: 30px;
        }
        li:hover {
            color: orange;
            cursor: pointer;
        }
        .del:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="info">
            <button @click="add_msg">留言</button>
            <ul>
                <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
            </ul>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                //发送事件,携带参数
                this.$emit('del_action', this.index)
            }
        }
    };


    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析数据 子传父
    // 1）子组件提供数据
    // 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
    // 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法
    // 4）父组件实现方法获取到子组件数据
</script>
</html>
上一篇：三.Vue的使用
下一篇：luffy前台案例
网友评论
相关栏目
最近更新
热门文章