事件，条件，列表渲染，计算属性与侦听器，组件之间的通信

事件绑定

事件指令v-on:或@
事件修饰符：对当前的行为进行干预
@click.prevent 阻止默认行为
@click.stop阻止冒泡

<div class="app">
        <p onclick="alert('hello')">
            <a href="https://php.cn" @click.prevent.stop="this.url=$event.target.href">vue1显示网络地址：</a>
            <span class="url">{{url}}</span>
        </p>
    </div>

const app = Vue.createApp({
        data() {
            return {
                url: null,
            };
        },
    }).mount(".app");

列表渲染

v-for,对应原生的for-of
一定要加:key ,为了借助diff算法，key必须要选择永远唯一的值

<div class="app">
<ul>
            <li v-for="(user,index) of users" :key="index">{{user.name}}:{{user.email}}</li>
        </ul>
    </div>

 const app = Vue.createApp({
        data() {
            return {
                users: [{
                    name: "李同学",
                    email: "li@php.cn",
                }, {
                    name: "张同学",
                    email: "zhang@php.cn",
                }, {
                    name: "郭同学",
                    email: "guo@php.cn",
                }, ],
            };
        },
    }).mount(".app");

条件渲染

<div class="app">
        <p v-if="flag">{{message}}</p>
        <button @click="flag=!flag" v-text="flag? '隐藏':'显示'"></button>
        <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-if="point>=4000 && point<5000">{{grade[3]}}</p>
        <p v-else="point<1000">{{grade[4]}}</p>
    </div>

 const app = Vue.createApp({
        data() {
            return {
                message: "今天是孩子放假的第一天，家里可热闹了",
                flag: false,
                grade: ["纸片会员", "木头会员", "铁皮会员", "金牌会员", "非会员"],
                point: 500,
            };
        },
    }).mount(".app");

计算属性与侦听器

计算属性

computed: {
            payAmount: {
                get() {
                    return this.price * this.num;
                },
            },
        }

侦听器属性

 watch: {
            // current:新值/当前值 origin:原值/旧值
            payAmount(current, origin) {
                console.log(current, origin);
                switch (true) {
                    case current > 10000 && current < 20000:
                        this.disAmount = this.payAmount * 0.95;
                        break;
                    case current >= 20000 && current < 30000:
                        this.disAmount = this.payAmount * 0.9;
                        break;
                    case current >= 30000 && current < 40000:
                        this.disAmount = this.payAmount * 0.85;
                        break;
                    case current >= 40000:
                        this.disAmount = this.payAmount * 0.8;
                        break;
                    default:
                        this.disAmount = this.payAmount;
                }
                this.difAmount = this.payAmount - this.disAmount;
            },
        },

组件与组件的通信

1 向子组件传参：props:[]
2 子组件向父组件通信
2.1子组件：$emit(customEvent,…args)
2.2父组件：@customEvent

 <div class="app">
        <!-- vue指令-》自定义属性 -->
        <div v-text="'hello'"></div>
        <button-counter username="litong" email="lt@qq.cn" @review-count="review"></button-counter>
    </div>
    <template id="counter">
      <button @click="count++">点赞:{{count}}</button>
      <p>用户名：{{username}}</p>
      <p>邮箱：{{email}}</p>
      <!-- $emit(自定义事件，向父级组件传递的参数) -->
      <button @click="$emit('reviewCount',this.count)">评价</button>
    </template>

 const app = Vue.createApp({
        methods: {
            review(count) {
                console.log(count);
                if (count >= 20) {
                    alert("我获得很多赞了");
                }
            },
        },
    });
    // 注册组件
    app.component("ButtonCounter", {
        // props:父级向子级传参
        props: ["username", "email"],
        template: `#counter`,
        data() {
            return {
                count: 0,
            };
        },
    });
    app.mount(".app");