第22章 0415-计算属性侦听器组件与组件通信-PHP课程网总结-前端部分-郭俊杰的知识库

第22章 0415-计算属性侦听器组件与组件通信

Data: 2019-01-03 19:40:56Form: JournalClick: 0

demo1：条件渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
     <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 1. 挂载点 -->
    <div class="app">
        <!-- v-if: 控制元素是否显示 -->
        <p v-if="flag">{{message}}</p>
        <!-- <button @click="flag=false">隐藏</button>
        <button @click="flag=true">显示</button> -->
        <button @click="flag=!flag" v-text="flag ? '隐藏' : '显示'"></button>

        <!-- if-else: 带有默认分支,直接干多分支 -->
        <p v-if="point >=1000 && point < 2000">{{grade[0]}}</p>
        <p v-else-if="point >=2000 && point < 3000">{{grade[1]}}</p>
        <p v-else-if="point >=3000 && point < 4000">{{grade[2]}}</p>
        <p v-else-if="point >= 4000">{{grade[3]}}</p>
        <p v-else>{{grade[4]}}</p>
    </div>

    <script>
        // 2. vue实例
        const app = Vue.createApp({
            data() {
                return {
                    message: '今晚是前端最后一课',
                    flag: false,
                    // 会员级别
                    grade: ['纸质会员', '木头会员','铁皮会员','金牌会员','非会员'],
                    // 积分
                    point: 300
                }
            },
        });

        // 3. vue实例与挂载点绑定/关联起来
        app.mount('.app')
    </script>
</body>
</html>

demo2：键盘修饰符: todolist

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘修饰符: todolist</title>
     <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 1. 挂载点 -->
    <div class="app">
       <!-- <input type="text"  @keydown="submit($event)" placeholder="请留言"> -->
       <input type="text"  @keydown.enter="submit($event)" placeholder="请留言">
       <ul>
           <li v-for="(item,index) of list" :key="index">{{item}}</li>
       </ul>
    </div>

    <script>
        // 2. vue实例
        const app = Vue.createApp({
            data() {
                return {
                   // 留言列表
                   list: []
                }
            },
            methods: {
                submit(ev) {
                    // console.log(ev.key)
                    // if (ev.key === 'Enter') {
                        // 将用户留言添加到列表中,应该从数组的头部追加
                        this.list.unshift(ev.target.value);
                        // 清空留言框
                        ev.target.value = null
                    // }
                }
            },
        });

        // 3. vue实例与挂载点绑定/关联起来
        app.mount('.app')
    </script>
</body>
</html>

demo3：计算属性, 侦听器属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性, 侦听器属性</title>
     <script src="https://unpkg.com/vue@next"></script>
      <style>
        table {
            width: 26em;
            text-align: center;
            border-collapse: collapse;
        }
        
        table caption {
            font-size: 1.5em;
            margin-bottom: 0.6em;
        }
        
        thead {
            background-color: lightcyan;
        }
        
        th,
        td {
            border: 1px solid #000;
            height: 2em;
        }
    </style>
</head>
<body>
    <!-- 1. 挂载点 -->
    <div class="app">
        <table>
            <caption>购物车</caption>
            <thead>
                 <tr>
                    <th>ID</th>
                    <th>品名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                </tr>
            </thead>
            <tbody>
                <td>123</td>
                <td>牛奶</td>
                <td>{{price}}</td>
                <td><input type="number" v-model="num"></td>
                <td>{{payAmount}}</td>
            </tbody>
        </table>

        <p>实付金额: {{disAmount}}, 优惠了: {{diffAmount}}</p>
    </div>

    <script>
        // 2. vue实例
        const app = Vue.createApp({
            data() {
                return {
                  price: 50,
                  num: 5,
                //   disAmount:0
                }
            },

            // 计算属性: 访问器属性实现的
            computed: {
                // payAmount:{
                //     get(){
                //         return this.price * this.num
                //     },
                //     set(value) {
                //         // 通常用在测试
                //     }
                // }
                payAmount(){
                    // 默认就是调用访问器中的get()
                    return this.price * this.num;
                }
            },

            // 侦听器属性
            watch: {
                // num(current,origin) {
                //     console.log(current, origin);
                // }

                // 根据用户购物金额的多少,来设置一个打折优惠
                // 只需要监听用户的购物金额
                payAmount(current) {
                    switch(true) {
                            case current > 1000 && current < 2000: 
                            // this.disAmount: 打折后的金额
                            this.disAmount = this.payAmount * 0.9;
                        break;
                        case current >= 2000 && current < 3000:
                            this.disAmount = this.payAmount * 0.8
                            break
                        case current >= 3000 && current < 4000:
                            this.disAmount = this.payAmount * 0.7
                        case current >= 4000 && current < 5000:
                            this.disAmount = this.payAmount * 0.6
                            break
                        case current >= 5000:
                            this.disAmount = this.payAmount * 0.5
                            break;
                        default:
                        this.disAmount = this.payAmount;
                    }
                    this.diffAmount = this.payAmount - this.disAmount;
                }

            },
            methods: {
              
            },
            // 生命周期: 
            mounted() {
                this.num = 1;
            },
        });

        // 3. vue实例与挂载点绑定/关联起来
        app.mount('.app')
    </script>
</body>
</html>

demo4：模板组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
     <script src="https://unpkg.com/vue@next"></script>
     
</head>
<body>
    <div class="app">
        <!-- v-text: vue指令, 本质是: 自定义属性, data-v-text dataset -->
        <!-- <div v-text="'hello'"></div> -->

        <!-- vue组件: 自定义标签 -->
        <!-- <phpcn>xxxx</phpcn> -->
        <!-- BtnCounter: 驼峰, 因为html不区分大小写,所以要转成蛇形 -->
        <!-- BtnCounter -> btn-counter -->
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
    </div>

    <template id="counter">
       <button @click="count++">点赞: {{count}}</button>
    </template>

    <script>
        // 1. vue实例
        const app = Vue.createApp({});

        // 2. 注册组件: 名称, 模板,数据
        app.component('BtnCounter',{
            // 模板,html代码
            template: `#counter`,
            // 数据,data
            data() {
                return {
                    count: 0
                }
            }
        })

        // 3. vue实例与挂载点绑定/关联起来
        app.mount('.app')
    </script>
</body>
</html>

demo5：向子组件传参

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向子组件传参</title>
     <script src="https://unpkg.com/vue@next"></script>
     
</head>
<body>
    <div class="app">
        <!-- 通用自定义属性给组件模板传参 -->
        <!-- 父 -->
       <btn-counter username="猪老师" email="admin@php.cn"></btn-counter>
    </div>

    <!-- 子 -->
    <template id="counter">
       <button @click="count++">点赞: {{count}}</button>
       <p>用户: {{username}}</p>
       <p>邮箱: {{email}}</p>
    </template>

    <script>
        // 1. vue实例
        const app = Vue.createApp({});

        // 2. 注册组件: 名称, 模板,数据
        app.component('BtnCounter'
                
                
                
                
                
                
              

我是 PHP 程序员

第22章 0415-计算属性 侦听器 组件与组件通信

第22章 0415-计算属性侦听器组件与组件通信