Vue实例成员属性和组件

一.实例成员的计算属性和属性监听

1.计算属性

...
1.computed是用来声明方法属性的
2.声明的方法属性不能在data中重复定义
3.方法属性必须在页面中渲染使用，才能对内部出现的所有变量进行监听
4.计算属性的值来源于监听方法的返回值
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 一个变量的值依赖多个变量，且任意一个变量发生改变，该变量都会改变 -->
    姓：<input type="text" v-model="fName">
    名：<input type="text" v-model="lName">
    姓名：<b>{{ flName }}</b>

    十位：<input type="number" v-model="shi" max="9" min="0">
    个位：<input type="number" v-model="ge" max="9" min="0">
    结果：<b>{{ shi*10 + +ge}}</b>
    结果2：<b>{{ result }}</b>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fName: '',
            lName: '',
            shi: '',
            ge:'',

        },
        computed: {
            flName(){
                return this.fName + this.lName
            },
            result(){
                return this.shi*10 + +this.ge
            }
        }
    })
</script>
</html>

 

2.属性监听

...
1.watch为data中已存在的属性设置监听事件
2.监听的属性值发生改变时就会触发监听事件
3.监听事件的方法返回值没有任何意义
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p @click="changeNum">{{ num }}</p>
    <p>十位：{{ shi }}</p>
    <p>个位：{{ ge }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num: 99,
            shi: '',
            ge: ''
        },
        methods: {
            changeNum(){
                this.num -= 3
            }
        },
        watch:{
            num(){
               this.shi = parseInt(this.num / 10);
               this.ge = this.num % 10
            }
        }
    })
</script>
</html>

 

 

二.Vue组件

1.组件简介

...
1.组件：一个包含html、css、js的独立集合体，这样的集合体可以完成页面结构的代码复用
2.组件分为根组件、全局组件和局部组件
   根组件：所有被new Vue()产生的组件，可以有多个，但是在项目开发阶段，一个项目只会出现一个根组件
   全局组件：不用注册，就可以成为任何一个组件的子组件
   局部组件：必须注册，才可以成为注册该局部组件的子组件
3.每一个组件都有自身的html结构，css样式和js逻辑
   每一个组件都有自己的templates，是用来标识自己html结构的
   template模版中有且只有一个根标签
   根组件一般不提供template，由其挂载点的真实DOM提供html结构
4.除根组件的其他组件，数据有局部作用域，保证组件复用时，各组件间数据的独立性
5.在多组件共处时，在哪个组件模块中出现的变量，由当前组件提供
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>真实DOM中的{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg: 'hahaha'
        },
        template:`
        <div @click="clickAction">
        组件中的{{ msg }}
        </div>
        `,
        methods:{
            clickAction(){
                alert(123)
            }
        }
    })
</script>
</html>

 

 

2.局部组件

...
1.创建局部组件
2.在父组件中注册该局部组件
3.在父组件的template模板中渲染该局部组件
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 240px;
            height: 350px;
            text-align: center;
            padding: 20px 0;
            box-shadow: 0 3px 5px 0 #666;
            margin: 5px;
            float: left;
        }
        .box img {
            width: 220px;
        }
        #id_click{
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建局部组件
    let localTag = {
       template:`
       <div class="box">
            <img src="img/666.jpg" alt="">
            <h3>虹桥炮王</h3>
            <p>技能：强人🔒男</p>
            <p @click="action" id="id_click">点击抢锁🔒{{ num }}</p>
       </div>
       `,
        data(){
           return{
               num:0
           }
        },
        methods:{
           action(){
               this.num++
           }
        }
    };
    new Vue({
        el: '#app',
        components:{
            localTag  // 在父组件中注册该局部组件
        }
    })
</script>
</html>

 

 

3.全局组件

...
1.创建全局组件
2.在父组件的template模板中直接渲染该全局组件
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 240px;
            height: 350px;
            text-align: center;
            padding: 20px 0;
            box-shadow: 0 3px 5px 0 #666;
            margin: 5px;
            float: left;
        }
        .box img {
            width: 220px;
        }
        #id_click{
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
       template:`
       <div class="box">
            <img src="img/666.jpg" alt="">
            <h3>虹桥炮王</h3>
            <p>技能：强人🔒男</p>
            <p @click="action" id="id_click">点击抢锁🔒{{ num }}</p>
       </div>
       `,
        data(){
           return{
               num:0
           }
        },
        methods:{
           action(){
               this.num++
           }
        }
    });

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

注意：不管在局部组件还是全局组件中，变量的赋值需要通过函数的返回值赋值，这样在复用组件时，每次都会通过函数重新生成一个变量值，这样变量的值也就是数据相互独立，不会互相影响

 

4.组件交互-父传子

...
数据交互-父传子-通过绑定属性的方式
1.父组件提供数据
2.在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
3.在子组件实例中，通过props实例成员通过反射来获得自定义属性
...

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .info {
            text-align: center;
            width: 200px;
            padding: 3px;
            box-shadow: 0 3px 5px 0 pink;
            float: left;
            margin: 5px;
        }
        .info img{
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <info v-for="info in infos" :key="info.image" :info="info"></info>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    // 数据
    let infos = [
        {
            image: 'img/001.png',
            title: '小猫'
        },
        {
            image: 'img/002.png',
            title: '蛋糕'
        },
        {
            image: 'img/003.png',
            title: '蓝糕'
        },
        {
            image: 'img/004.png',
            title: '小狗'
        },
    ];

    // 局部标签
    let info = {
      template:`
      <div class="info">
           <img :src="info.image">
           <p><b>{{ info.title }}</b></p>
      </div>
      `,
      props:['info']
    };

    new Vue({
        el: '#app',
        data:{
            infos
        },
        components:{
            info
        }
    })
</script>
</html>

 

5.组件交互-子传父

...
数据交互-子传父-通过发送自定义事件
1.数据由子组件提供
2.子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
3.父组件为子组件标签的自定义属性提供方法实现，就可以通过参数拿到子组件传递出来的参数
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .close:hover {
            cursor: pointer;
            color: red;
            user-select: none;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button @click="sendMsg">留言</button>
    </p>
    <ul>
        <msg-li v-for="(msg, index) in msgs" :msg="msg" :index="index" @remove_msg="removeAction" :key="msg"></msg-li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    let msgLi = {
        template:`
        <li >
            <span @click="deleteAction(index)" class="close">{{ msg }}</span>
        </li>
        `,
        props:['msg', 'index'],
        methods:{
            // 1) 数据由子组件提供
            deleteAction(index){
                 // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
                this.$emit('remove_msg',index)
            }
        }
    };

    new Vue({
        el: '#app',
        data:{
            msgs:[],
            userMsg:''
        },
        methods:{
            sendMsg(){
                this.msgs.push(this.userMsg);
                this.userMsg = ''
            },
            // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
            removeAction(index){
                this.msgs.splice(index,1)
            }
        },
        components:{
            msgLi
        }
    })
</script>
</html>

 65

posted @ 2019-10-10 16:43  瓜落桥下塘  阅读(547)  评论(0)    收藏  举报