ASCII码 ASCII码

VUE 添加事件、渲染、组件

发布于：2022-01-17 08:52:39  栏目：技术文档

<!-- 1. 实例演示为元素添加事件的正确方式 2. 实例演示条件渲染与列表渲染,特别是数组对象 3. 实例演示计算属性与侦听器, 并分析二者区别 4. 实例演示组件与组件之间的通信,特别是如何监听子组件的数据变化 -->

VUE 元素添加事件

  • v-on: 事件指令 , 简写: @
  • event, 在 vue3: $evnet
  • 事件修饰符: 对当前的事件行为进行干预
  • @click.prevent: 阻止默认行为
  • @click.prevent.stop
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>事件绑定</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  11.   <body>
  12.     <!-- vue3 -->
  13.     <div class="app">
  14.       <p>
  15.         <!-- v-on: 事件指令 , @ -->
  16.         <!-- event, 在vue3: $evnet  -->
  17.         <a href="helo10086.cn" v-on:click="showUrl($event)">vue1: 显示网址: </a>
  18.         <span class="url">{{url}}</span>
  19.       </p>
  21.       <!-- 事件修饰符: 对当前的事件行为进行干预 -->
  22.       <p>
  23.         <!-- v-on: 事件指令 , @ -->
  24.         <!-- event, 在vue3: $evnet  -->
  25.         <!-- @click.prevent: 阻止默认行为  -->
  26.         <a href="helo10086.cn" @click.prevent="this.url = $event.target.href"
  27.           >vue2: 显示网址:
  28.         </a>
  29.         <span class="url">{{url}}</span>
  30.       </p>
  32.       <!-- 在父级上的同名事件,因为事件冒泡机制而被自动的调用了 -->
  33.       <p onclick="alert('hello help!')">
  34.         <!-- @click.stop: 阻止冒泡 -->
  35.         <a
  36.           href="helo10086.cn"
  37.           @click.prevent.stop="this.url = $event.target.href"
  38.           >vue3: 显示网址:
  39.         </a>
  40.         <span class="url">{{url}}</span>
  41.       </p>
  42.     </div>
  44.     <script>
  45.       const app = Vue.createApp({
  46.         data() {
  47.           return {
  48.             url: null,
  49.           };
  50.         },
  51.         methods: {
  52.           showUrl(ev) {
  53.             // 防止默认行为
  54.             ev.preventDefault();
  55.             console.log(ev === event);
  57.             // this -> vue实例
  58.             console.log(this);
  59.             console.log(ev.target);
  61.             this.url = ev.target.href;
  62.           },
  63.         },
  64.       }).mount(".app");
  65.     </script>
  66.   </body>
  67. </html>

[http://help10086.cn/0114/demo1.html]

VUE 条件渲染与列表渲染

  • v-for , 对应原生的 for - of
  1. <!-- 列表渲染 -->
  2. <!DOCTYPE html>
  3. <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.       <!-- array: v-for , 对应原生的 for - of  -->
  15.       <ul>
  16.         <!-- 提高效率,一定要加 :key 为了借助diff算法,key必须选择一个永远唯一的值 -->
  17.         <li v-for="(city,index) of cities" :key="index">{{index}}->{{city}}</li>
  18.       </ul>
  20.       <!-- obj: v-for  -->
  21.       <ul>
  22.         <!-- prop -> property 属性 -->
  23.         <li v-for="(item,prop,index) of user" :key="index">
  24.           {{index}} ->{{prop}} => {{item}}
  25.         </li>
  26.       </ul>
  28.       <!-- ArrayObj: v-for  -->
  29.       <ul>
  30.         <li v-for="(user,index) of users" :key="index">
  31.           {{user.name}}: ({{user.email}})
  32.         </li>
  33.       </ul>
  34.     </div>
  35.     <script>
  36.       const app = Vue.createApp({
  37.         data() {
  38.           return {
  39.             // array
  40.             cities: ["tayninh", "nhontrach", "longthanh"],
  42.             // object
  43.             user: {
  44.               name: "help",
  45.               email: "help@foxmail.com",
  46.             },
  47.             // array of object
  48.             users: [
  49.               {
  50.                 name: "lan",
  51.                 email: "lan@foxmail.com",
  52.               },
  53.               {
  54.                 name: "hoang",
  55.                 email: "hoang@foxmail.com",
  56.               },
  57.               {
  58.                 name: "hope",
  59.                 email: "hope@foxmail.com",
  60.               },
  61.             ],
  62.           };
  63.         },
  64.       }).mount(".app");
  65.     </script>
  66.   </body>
  67. </html>
  69. <!-- 条件渲染 -->
  70. <!DOCTYPE html>
  71. <html lang="zh-CN">
  72.   <head>
  73.     <meta charset="UTF-8" />
  74.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  75.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  76.     <title>条件渲染</title>
  77.     <script src="https://unpkg.com/vue@next"></script>
  78.   </head>
  80.   <body>
  81.     <div class="app">
  82.       <!-- if  -->
  83.       <p v-if="flag">{{message}}</p>
  84.       <button @click="flag=!flag" v-text="flag ? '隐藏' : '显示'"></button>
  86.       <!-- if -- if else -- if else -- else  -->
  87.       <p v-if="salary > 0 && salary < 2000">{{grade[1]}}</p>
  88.       <p v-else-if="salary >= 2000 && salary < 6000">{{grade[2]}}</p>
  89.       <p v-else-if="salary >= 6000 && salary < 10000">{{grade[3]}}</p>
  90.       <p v-else-if="salary >= 10000 && salary < 15000">{{grade[4]}}</p>
  91.       <p v-else-if="salary >= 15000">{{grade[5]}}</p>
  92.       <p v-else>{{grade[0]}}</p>
  93.     </div>
  94.     <script>
  95.       const app = Vue.createApp({
  96.         data() {
  97.           return {
  98.             message: "20220116, 准备领完年终奖，回家过年吧!",
  99.             flag: false,
  100.             // 会员级别
  101.             grade: [
  102.               "操作工",
  103.               "业务员",
  104.               "主管",
  105.               "一般管理",
  106.               "中层管理",
  107.               "高层管理",
  108.             ],
  109.             // 积分
  110.             salary: 100000,
  111.           };
  112.         },
  113.       }).mount(".app");
  114.     </script>
  115.   </body>
  116. </html>

列表渲染：[http://help10086.cn/0114/demo2.html]条件渲染：[http://help10086.cn/0114/demo3.html]

VUE 计算属性与侦听器

  • 例生命周期, mounted: 当 vue 实例加载完成的时候会自动调用(onload)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <script src="https://unpkg.com/vue@next"></script>
  8.     <title>计算属性,侦听器属性</title>
  9.     <style>
  10.       table {
  11.         width: 26em;
  12.         text-align: center;
  13.         border-collapse: collapse;
  14.       }
  16.       table caption {
  17.         font-size: 1.5em;
  18.         margin-bottom: 0.6em;
  19.       }
  21.       thead {
  22.         background-color: lightcyan;
  23.       }
  25.       th,
  26.       td {
  27.         border: 1px solid #000;
  28.         height: 2em;
  29.       }
  30.     </style>
  31.   </head>
  33.   <body>
  34.     <div class="app">
  35.       <table>
  36.         <caption>
  37.           购物车
  38.         </caption>
  39.         <thead>
  40.           <tr>
  41.             <th>ID</th>
  42.             <th>品名</th>
  43.             <th>单价</th>
  44.             <th>数量</th>
  45.             <th>金额</th>
  46.           </tr>
  47.         </thead>
  49.         <tbody>
  50.           <tr>
  51.             <td>20220116</td>
  52.             <td>iphone 13</td>
  53.             <td>{{price}}</td>
  54.             <td><input type="number" v-model="num" style="width: 4em" /></td>
  55.             <!-- <td>{{price * num}}</td> -->
  56.             <td>{{payAmount}}</td>
  57.           </tr>
  58.         </tbody>
  59.       </table>
  61.       <!-- 侦听器来监听金额的变化,设置优惠价格:用户实际支付的钱 -->
  62.       <!-- <p>实付金额: {{disAmount}}, 优惠了 : <span style="color: red">{{payAmount-disAmount}}</span></p> -->
  63.       <p>
  64.         实付金额: {{disAmount}}, 优惠了 :
  65.         <span style="color: #ff0000">{{difAmount}}</span>
  66.       </p>
  67.     </div>
  69.     <script>
  70.       const app = Vue.createApp({
  71.         data() {
  72.           return {
  73.             price: 10000,
  74.             num: 0,
  75.           };
  76.         },
  78.         // 计算属性: 访问器属性
  79.         computed: {
  80.           payAmount: {
  81.             get() {
  82.               return this.price * this.num;
  83.             },
  84.             set(value) {
  85.               // 这个通常用来做测试
  86.             },
  87.           },
  88.         },
  90.         // 侦听器属性
  91.         watch: {
  92.           // current: 新值/当前值, origin: 原值/旧值
  93.           payAmount(current, origin) {
  94.             console.log(current, origin);
  96.             switch (true) {
  97.               case current > 10000 && current < 20000:
  98.                 this.disAmount = this.payAmount * 0.99;
  99.                 break;
  100.               case current >= 20000 && current < 30000:
  101.                 this.disAmount = this.payAmount * 0.98;
  102.                 break;
  103.               case current >= 30000 && current < 40000:
  104.                 this.disAmount = this.payAmount * 0.97;
  105.               case current >= 40000 && current < 50000:
  106.                 this.disAmount = this.payAmount * 0.96;
  107.                 break;
  108.               case current > 50000:
  109.                 this.disAmount = this.payAmount * 0.95;
  110.                 break;
  111.               default:
  112.                 this.disAmount = this.payAmount;
  113.             }
  114.             this.difAmount = this.payAmount - this.disAmount;
  115.           },
  116.         },
  118.         // 实例生命周期, mounted: 当vue实例加载完成的时候会自动调用(onload)
  119.         mounted() {
  120.           this.num = 1;
  121.         },
  122.       }).mount(".app");
  123.     </script>
  124.   </body>
  125. </html>

[http://help10086.cn/0114/demo5.html]

VUE 组件与组件之间的通信

  • 组件,vue 指令本质是自定义属性
  • vue 组件本质就是自定义标签
  • 子组件传参:自定义属性
  • 监听子组件: $emit(自定义事件, 向父组件传递的参数[可选])
  1. <!-- VUE组件 -->
  2. <!DOCTYPE html>
  3. <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.       <!-- vue指令 -> 自定义属性 -->
  15.       <div v-text="'hello'"></div>
  17.       <!-- vue组件 -> 自定义标签 -->
  18.       <button-counter></button-counter>
  19.     </div>
  21.     <template id="counter">
  22.       <button @click="count++">点赞: {{count}}</button>
  23.     </template>
  25.     <script>
  26.       // 1. 创建实例
  27.       const app = Vue.createApp({});
  29.       // 2. 注册组件
  30.       app.component("ButtonCounter", {
  31.         template: "#counter",
  32.         data() {
  33.           return {
  34.             count: 0,
  35.           };
  36.         },
  37.       });
  39.       // 3. 绑定挂载点
  40.       app.mount(".app");
  41.     </script>
  42.   </body>
  43. </html>
  45. <!-- 子组件传参 -->
  46. <!DOCTYPE html>
  47. <html lang="zh-CN">
  48.   <head>
  49.     <meta charset="UTF-8" />
  50.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  51.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  52.     <title>子组件传参</title>
  53.     <script src="https://unpkg.com/vue@next"></script>
  54.   </head>
  56.   <body>
  57.     <div class="app">
  58.       <button-counter username="admin" email="admin@qq.com"></button-counter>
  59.     </div>
  61.     <template id="counter">
  62.       <button @click="count++">点赞: {{count}}</button>
  63.       <p>用户: {{username}}</p>
  64.       <p>邮箱: {{email}}</p>
  65.     </template>
  67.     <script>
  68.       // 1. 创建实例
  69.       const app = Vue.createApp({});
  71.       // 2. 注册组件
  72.       app.component("ButtonCounter", {
  73.         // 自定义属性
  74.         props: ["username", "email"],
  75.         template: "#counter",
  76.         data() {
  77.           return {
  78.             count: 0,
  79.           };
  80.         },
  81.       });
  83.       // 3. 绑定挂载点
  84.       app.mount(".app");
  85.     </script>
  86.   </body>
  87. </html>
  89. <!-- 监听子组件事件 -->
  90. <!DOCTYPE html>
  91. <html lang="zh-CN">
  92.   <head>
  93.     <meta charset="UTF-8" />
  94.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  95.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  96.     <title>监听子组件事件</title>
  97.     <script src="https://unpkg.com/vue@next"></script>
  98.   </head>
  100.   <body>
  101.     <div class="app">
  102.       <button-counter
  103.         username="help"
  104.         email="help10086@foxmail.com"
  105.         @review-count="review"
  106.       ></button-counter>
  107.     </div>
  109.     <template id="counter">
  110.       <button @click="count++">点赞: {{count}}</button>
  111.       <p>用户: {{username}}</p>
  112.       <p>邮箱: {{email}}</p>
  114.       <!-- 发布订阅 -->
  115.       <!-- $emit(自定义事件, 向父组件传递的参数[可选]) -->
  116.       <button @click="$emit('reviewCount', this.count)">评价</button>
  117.     </template>
  119.     <script>
  120.       // 1. 创建实例
  121.       const app = Vue.createApp({
  122.         methods: {
  123.           review(count) {
  124.             console.log(count);
  125.             if (count >= 20) {
  126.               alert("感谢家人的支持!");
  127.             }
  128.           },
  129.         },
  130.       });
  132.       // 2. 注册组件
  133.       app.component("ButtonCounter", {
  134.         props: ["username", "email"],
  135.         template: "#counter",
  136.         data() {
  137.           return {
  138.             count: 0,
  139.           };
  140.         },
  141.       });
  143.       // 3. 绑定挂载点
  144.       app.mount(".app");
  146.       // 1. 向子组传传参: props:  [....]
  147.       // 2. 子组件向父组通信:
  148.       //    2.1 子组件: $emit(customEvent, ...args)
  149.       //    2.2 父组件: @customEvent(...args)
  150.     </script>
  151.   </body>
  152. </html>

[http://help10086.cn/0114/demo7.html][http://help10086.cn/0114/demo8.html]

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行