vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信

程序员文章站 2022-03-13 12:41:05

...

vue中为元素添加事件

vue中使用v-on或者缩写@绑定元素中的事件,例如下列代码

<a href="https://php.cn" v-on:click="showUrl($event)">显示网站地址: </a>

该标签绑定了一个点击事件

vue中的条件渲染

vue中使用v-if或者多分支v-else-if指令来决定改标签是否应该被渲染,例如下列代码


      <p v-if="point >= 1000 && point < 2000">青铜会员</p>
        <p v-else-if="point >= 2000 && point < 3000">白银会员</p>
        <p v-else-if="point >= 3000 && point < 4000">黄金会员</p>
        <p v-if="point >= 4000">钻石会员</p>
        <p v-else>非会员</p>

上述代码实现了,根据point值来决定渲染哪个p标签

vue中的列表渲染

vue中通过v-for来实现列表的渲染,例如下列代码


<ul>
    <li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>

上述代码实现了,渲染list数组中的所有元素

vue中的计算属性

在vue中计算属性,其实是访问器属性,通过computed来设置其计算属性,例如下列代码


<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <title>计算属性,侦听器属性</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <p>{{a}}+{{b}}={{sum}}</p>
    </div>
</body>

    <script>
      const app = Vue.createApp({
          data(){
              return {
                a:1,
                b:2,
              }
          },

          computed:{
            sum:{
                get(){
                    return this.a+this.b;
                },
            }
          }



      }).mount(".app");

    </script>
</html>

上述代码通过设置sum的计算属性,计算了他的值

vue中的侦听器

vue中侦听器可以指定侦听某个变量,当变量发生变化时,将触发侦听器
vue中使用watch来指定侦听的对象,例如下列代码


<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <title>计算属性,侦听器属性</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <p><input type="number" @keydown.enter="this.a=$event.target.value">{{a}}+{{b}}={{sum}}</p>
    </div>
</body>

    <script>
      const app = Vue.createApp({
          data(){
              return {
                a:1,
                b:2,
              }
          },

          computed:{
            sum:{
                get(){
                    return this.a+this.b;
                },
            }
          },

          watch:{
            sum(current,orign){
                console.log(current,orign);
            }
          },


      }).mount(".app");

    </script>
</html>

上述代码,对sum变量增加了监听器,当sum发生变化时,将输出最新的结果current跟上一次的结果orign

vue中的组件创建

在vue中使用component方法来注册一个组件,例如下列代码


 const app = Vue.createApp({
        })

        // 2. 注册组件
        app.component('ButtonCounter', {
            props: ['username', 'email'],
            template: '#counter',
            data() {
                return {
                    count: 0,
                }
            },
        })

上述代码创建了一个自定义组件ButtonCounter,并且绑定了id为counter的子组件

父组件向子组件通信

父组件通过自定义属性,向子组件进行传递变量,子组件通过props来接受父组件传递过来的参数,例如下列代码


<!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" />
   <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div class="app">
        <button-counter username="admin" email="admin@qq.com"></button-counter>
    </div>

    <template id="counter">
      <p>用户: {{username}}</p>
      <p>邮箱: {{email}}</p>
    </template>

    <script>
        // 1. 创建实例
        const app = Vue.createApp({

        })

        // 2. 注册组件
        app.component('ButtonCounter', {
            props: ['username', 'email'],
            template: '#counter',

        })

        // 3. 绑定挂载点
        app.mount('.app')

    </script>
</body>

</html>

上述代码实现了,父组件向子组件传递username与email参数,子组件接收并且用p标签显示

子组件向父组件通信

子组件向父组件通信应该分为2步

父组件订阅子组件的自定义事件,通过@customEvent(...args)来实现
子组件发布自定义事件,通过$emit(customEvent, ...args)方法来实现,例如下列代码


<!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">
        <button-counter username="admin" email="admin@qq.com" @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>

    <script>
        // 1. 创建实例
        const app = Vue.createApp({
            methods: {
                review(count) {
                    console.log(count)
                    if (count >= 20) {
                        alert('我是太爱大家了')
                    }
                },
            },
        })

        // 2. 注册组件
        app.component('ButtonCounter', {
            props: ['username', 'email'],
            template: '#counter',
            data() {
                return {
                    count: 0,
                }
            },
        })

        // 3. 绑定挂载点
        app.mount('.app')
    </script>
</body>

</html>

上述代码中子组件使用emit()方法发布了自定义事件reviewCount,并且传入参数count，父组件通过@review-count监听自定义事件reviewCount，触发了vue实例中的review方法

上一篇： php中的递归函数与mysql数据库的增删查改

下一篇： VMware虚拟机安装Centos7

vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信

vue中为元素添加事件

vue中的条件渲染

vue中的列表渲染

vue中的计算属性

vue中的侦听器

vue中的组件创建

父组件向子组件通信

子组件向父组件通信

VUE的事件绑定修饰符练习及vue列表渲染及条件渲染练习，vue键盘事件+数组方式参数的传递学习及vue的计算属性访问器属性及侦听属性练习以及vue注册组件自定义标签及子组件向父组件传参及父组件向父组件传参

VUE的事件绑定修饰符练习及vue列表渲染及条件渲染练习，vue键盘事件+数组方式参数的传递学习及vue的计算属性访问器属性及侦听属性练习以及vue注册组件自定义标签及子组件向父组件传参及父组件向父组件传参

vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信

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

vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信

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