ASCII码 ASCII码

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

发布于：2022-01-18 13:15:50  栏目：技术文档

vue中为元素添加事件

  • vue中使用v-on或者缩写@绑定元素中的事件,例如下列代码
  1. <a href="https://php.cn" v-on:click="showUrl($event)">显示网站地址: </a>

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

vue中的条件渲染

  • vue中使用v-if或者多分支v-else-if指令来决定改标签是否应该被渲染,例如下列代码
  1.       <p v-if="point >= 1000 && point < 2000">青铜会员</p>
  2.         <p v-else-if="point >= 2000 && point < 3000">白银会员</p>
  3.         <p v-else-if="point >= 3000 && point < 4000">黄金会员</p>
  4.         <p v-if="point >= 4000">钻石会员</p>
  5.         <p v-else>非会员</p>

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

vue中的列表渲染

  • vue中通过v-for来实现列表的渲染,例如下列代码
  1. <ul>
  2.     <li v-for="(item,index) of list" :key="index">{{item}}</li>
  3. </ul>

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

vue中的计算属性

  • 在vue中计算属性,其实是访问器属性,通过computed来设置其计算属性,例如下列代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <title>计算属性,侦听器属性</title>
  9.     <script src="https://unpkg.com/vue@next"></script>
  10. </head>
  11. <body>
  12.     <div class="app">
  13.         <p>{{a}}+{{b}}={{sum}}</p>
  14.     </div>
  15. </body>
  17.     <script>
  18.       const app = Vue.createApp({
  19.           data(){
  20.               return {
  21.                 a:1,
  22.                 b:2,
  23.               }
  24.           },
  26.           computed:{
  27.             sum:{
  28.                 get(){
  29.                     return this.a+this.b;
  30.                 },
  31.             }
  32.           }
  36.       }).mount(".app");
  38.     </script>
  39. </html>

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

vue中的侦听器

  • vue中侦听器可以指定侦听某个变量,当变量发生变化时,将触发侦听器
  • vue中使用watch来指定侦听的对象,例如下列代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <title>计算属性,侦听器属性</title>
  9.     <script src="https://unpkg.com/vue@next"></script>
  10. </head>
  11. <body>
  12.     <div class="app">
  13.         <p><input type="number" @keydown.enter="this.a=$event.target.value">{{a}}+{{b}}={{sum}}</p>
  14.     </div>
  15. </body>
  17.     <script>
  18.       const app = Vue.createApp({
  19.           data(){
  20.               return {
  21.                 a:1,
  22.                 b:2,
  23.               }
  24.           },
  26.           computed:{
  27.             sum:{
  28.                 get(){
  29.                     return this.a+this.b;
  30.                 },
  31.             }
  32.           },
  34.           watch:{
  35.             sum(current,orign){
  36.                 console.log(current,orign);
  37.             }
  38.           },
  41.       }).mount(".app");
  43.     </script>
  44. </html>

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

vue中的组件创建

  • 在vue中使用component方法来注册一个组件,例如下列代码
  1.  const app = Vue.createApp({
  2.         })
  4.         // 2. 注册组件
  5.         app.component('ButtonCounter', {
  6.             props: ['username', 'email'],
  7.             template: '#counter',
  8.             data() {
  9.                 return {
  10.                     count: 0,
  11.                 }
  12.             },
  13.         })

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

父组件向子组件通信

  • 父组件通过自定义属性,向子组件进行传递变量,子组件通过props来接受父组件传递过来的参数,例如下列代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.    <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  11. <body>
  12.     <div class="app">
  13.         <button-counter username="admin" email="admin@qq.com"></button-counter>
  14.     </div>
  16.     <template id="counter">
  17.       <p>用户: {{username}}</p>
  18.       <p>邮箱: {{email}}</p>
  19.     </template>
  21.     <script>
  22.         // 1. 创建实例
  23.         const app = Vue.createApp({
  25.         })
  27.         // 2. 注册组件
  28.         app.component('ButtonCounter', {
  29.             props: ['username', 'email'],
  30.             template: '#counter',
  32.         })
  34.         // 3. 绑定挂载点
  35.         app.mount('.app')
  37.     </script>
  38. </body>
  40. </html>

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

子组件向父组件通信

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

  • 父组件订阅子组件的自定义事件,通过@customEvent(...args)来实现
  • 子组件发布自定义事件,通过$emit(customEvent, ...args)方法来实现,例如下列代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>监听子组件事件</title>
  9.     <script src="https://unpkg.com/vue@next"></script>
  10. </head>
  12. <body>
  13.     <div class="app">
  14.         <button-counter username="admin" email="admin@qq.com" @review-count="review"></button-counter>
  15.     </div>
  17.     <template id="counter">
  18.       <button @click="count++">点赞: {{count}}</button>
  19.       <p>用户: {{username}}</p>
  20.       <p>邮箱: {{email}}</p>
  22.       <!-- 发布订阅 -->
  23.       <!-- $emit(自定义事件, 向父组件传递的参数[可选]) -->
  24.       <button @click="$emit('reviewCount', this.count)">评价</button>
  25.     </template>
  27.     <script>
  28.         // 1. 创建实例
  29.         const app = Vue.createApp({
  30.             methods: {
  31.                 review(count) {
  32.                     console.log(count)
  33.                     if (count >= 20) {
  34.                         alert('我是太爱大家了')
  35.                     }
  36.                 },
  37.             },
  38.         })
  40.         // 2. 注册组件
  41.         app.component('ButtonCounter', {
  42.             props: ['username', 'email'],
  43.             template: '#counter',
  44.             data() {
  45.                 return {
  46.                     count: 0,
  47.                 }
  48.             },
  49.         })
  51.         // 3. 绑定挂载点
  52.         app.mount('.app')
  53.     </script>
  54. </body>
  56. </html>

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

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行