ASCII码 ASCII码

vue事件绑定、列表渲染、计算属性与侦听器、组件与组件的通信小结

发布于：2022-03-16 08:37:49  栏目：技术文档

与传参## 1. 事件绑定

  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>事件绑定</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <!-- 复习es6方式 -->
  12.     <p>
  13.       <a href="https://php.cn" onclick="getUrl()">显示连接地址</a>
  14.       <span class="url"></span>
  15.     </p>
  16.     <script>
  17.       function getUrl() {
  18.         //   阻止链接默认跳转
  19.         event.preventDefault();
  20.         // 获取事件的对象a
  21.         const link = event.currentTarget;
  22.         // 获取a 的兄弟标签，设置标签内容为a 的href属性
  23.         link.nextElementSibling.textContent = link.href;
  24.       }
  25.     </script>
  27.     <!-- vue方式 -->
  28.     <div class="app">
  29.       <p>
  30.         <!-- 用v-on事件指令，简写@ -->
  31.         <!-- 事件对象event在vue3中为$event -->
  32.         <!-- click事件传递$event对象 -->
  33.         <a href="https://php.cn" v-on:click="showUrl($event)"
  34.           >vue3方式显示连接地址</a
  35.         >
  36.         <span class="url">{{url}}</span>
  37.       </p>
  39.       <!-- 事件修饰符：对当前事件行为进行干预       -->
  40.       <p>
  41.         <!-- 在事件后加.prevent修饰符，禁用默认行为 -->
  42.         <a href="https://php.cn" @click.prevent="this.url = $event.target.href"
  43.           >vue3事件修饰符方式显示连接地址</a
  44.         >
  45.         <span class="url">{{url}}</span>
  46.       </p>
  47.       <p onclick="alert('冒泡来了')">
  48.         <!-- 在事件后加.stop修饰符，阻止冒泡 -->
  49.         <a
  50.           href="https://php.cn"
  51.           @click.prevent.stop="this.url = $event.target.href"
  52.           >vue3事件修饰符方式阻止冒泡显示连接地址</a
  53.         >
  54.         <span class="url">{{url}}</span>
  55.       </p>
  56.     </div>
  57.     <script>
  58.       const app = Vue.createApp({
  59.         data() {
  60.           return {
  61.             //   当前值为空
  62.             url: null,
  63.           };
  64.         },
  65.         //   事件的函数要写在methods属性中
  66.         methods: {
  67.           showUrl(ev) {
  68.             // 传递的参数是事件对象event
  69.             // 禁用默认行为
  70.             ev.preventDefault();
  71.             // this是vue实例，this.url就是占位符{{url}}
  72.             // target是事件的目标，这里是a标签，取得href属性
  73.             this.url = ev.target.href;
  74.           },
  75.         },
  76.       }).mount(".app");
  77.     </script>
  78.   </body>
  79. </html>

2 列表渲染

  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>列表渲染</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <div class="app">
  12.       <!-- 把数组渲染到页面中 -->
  13.       <ul>
  14.         <!-- 逐一渲染 -->
  15.         <li>1->{{city[0]}}</li>
  16.         <li>2->{{city[1]}}</li>
  17.         <li>3->{{city[2]}}</li>
  18.       </ul>
  20.       <!-- 用vue指令 -->
  21.       <!-- v-for遍历数组    对应js的     for of -->
  22.       <!-- ci为值，index为数组索引，city为要遍历的数组 -->
  23.       <!-- 一定要加:key，为了借助diff算法，提升遍历效率，key必须选择一个永远不重复的值 -->
  24.       <ul>
  25.         <li v-for="(ci,index) of city" :key="index">{{index}}->{{ci}}</li>
  26.       </ul>
  28.       <!-- v-for遍历对象 -->
  29.       <!-- v-for="(值，属性名，数字索引) of 对象" -->
  30.       <ul>
  31.         <li v-for="(value,attrib,index) of users" :key="index">
  32.           {{attrib}}=>{{value}}
  33.         </li>
  34.       </ul>
  36.       <!-- v-for遍历数组对象 -->
  37.       <ul>
  38.         <li v-for="(clas,index) of heros" :key="index">
  39.           {{clas.name}}（{{clas.add}}）
  40.         </li>
  41.       </ul>
  42.     </div>
  43.     <script>
  44.       const app = Vue.createApp({
  45.         data() {
  46.           return {
  47.             //   数组
  48.             city: ["北京", "天津", "上海"],
  50.             // 对象
  51.             users: {
  52.               name: "刀刀",
  53.               add: "北湖南路",
  54.             },
  56.             // 数组对象
  57.             heros: [
  58.               {
  59.                 name: "哎哎",
  60.                 add: "北湖北路",
  61.               },
  62.               {
  63.                 name: "万里",
  64.                 add: "天津路",
  65.               },
  66.               {
  67.                 name: "卡卡",
  68.                 add: "北湖南路",
  69.               },
  70.             ],
  71.           };
  72.         },
  73.       }).mount(".app");
  74.     </script>
  75.   </body>
  76. </html>

3. 条件渲染

  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>条件渲染</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <div class="app">
  12.       <!-- 单条件：if -->
  13.       <!-- 控制显示按钮 -->
  14.       <!-- 判断show值，动态显示按钮文字 -->
  15.       <button @click="show=!show" v-text="show?'隐藏':'显示'"></button>
  16.       <!-- 判断show变量是否为真，显示msg -->
  17.       <p v-if="show">{{msg}}</p>
  19.       <!-- 多条件：if   else if    else if    else -->
  20.       <p v-if="point < 2000">{{garde[0]}}</p>
  21.       <p v-else-if="point>=2000 && point < 3000">{{garde[1]}}</p>
  22.       <p v-else-if="point>=3000 && point < 4000">{{garde[2]}}</p>
  23.       <p v-else-if="point>=4000 && point < 5000">{{garde[3]}}</p>
  24.       <p v-else="point>=5000">{{garde[4]}}</p>
  25.     </div>
  26.     <script>
  27.       const app = Vue.createApp({
  28.         data() {
  29.           return {
  30.             msg: "这是根据条件控制显示的文字。",
  31.             show: "false",
  33.             garde: ["勇者", "勇士", "圣斗士", "齐天大圣", "斗战胜佛"],
  34.             point: 2000,
  35.           };
  36.         },
  37.       }).mount(".app");
  38.     </script>
  39.   </body>
  40. </html>

4. 键盘修饰符

  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>todolist: 键盘修饰符</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <div class="app">
  12.       <label for="msg">留言：</label>
  13.       <!-- 键盘修饰符：事件后加.enter就是按下回车键时 -->
  14.       <input type="text" id="msg" @keydown.enter="showMsg($event)" />
  15.       <ul>
  16.         <li v-for="(value,index) of msg" :key="index">{{value}}</li>
  17.       </ul>
  18.     </div>
  19.     <script>
  20.       const app = Vue.createApp({
  21.         data() {
  22.           return {
  23.             // 定义变量存贮留言
  24.             msg: [],
  25.           };
  26.         },
  27.         methods: {
  28.           showMsg(ev) {
  29.             //   在数组msg前面放入留言：当前事件对象的值
  30.             this.msg.unshift(ev.currentTarget.value);
  31.             // 清空输入框
  32.             ev.currentTarget.value = null;
  33.           },
  34.         },
  35.       }).mount(".app");
  36.     </script>
  37.   </body>
  38. </html>

5. 计算属性与侦听器

  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>计算属性,侦听器</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.     <style>
  10.       .selectAll {
  11.         margin-top: 1em;
  12.         margin-left: 0.7em;
  13.       }
  14.       .selectAll *:hover {
  15.         cursor: pointer;
  16.       }
  17.       .shopingList {
  18.         padding: 0;
  19.         width: 35em;
  20.         background-color: lightskyblue;
  21.       }
  22.       .shopingList > li {
  23.         width: 35em;
  24.         display: grid;
  25.         grid-template-columns: repeat(5, 5fr);
  26.         border-bottom: 1px solid rgb(12, 63, 105);
  27.       }
  28.       .shopingList > li:nth-of-type(1) {
  29.         color: #eee;
  30.         background-color: rgb(12, 63, 105);
  31.       }
  33.       h4,
  34.       span {
  35.         margin: 0.2em 0.6em;
  36.       }
  37.       h4 {
  38.         padding: 0.3em 0;
  39.       }
  40.       input[type="number"] {
  41.         width: 70%;
  42.         outline: none;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="app">
  48.       <ul class="shopingList">
  49.         <li>
  50.           <h4>品名</h4>
  51.           <h4>数量</h4>
  52.           <h4>单位</h4>
  53.           <h4>单价（元）</h4>
  54.           <h4>金额（元）</h4>
  55.         </li>
  56.         <li>
  57.           <span>{{goods[0]}}</span>
  58.           <span><input type="number" class="num" v-model="num" /></span>
  59.           <span>{{goods[1]}}</span>
  60.           <span>{{goods[2]}}</span>
  61.           <!-- 计算属性sum -->
  62.           <span>{{sum}}</span>
  63.         </li>
  64.       </ul>
  65.     </div>
  66.     <script>
  67.       const app = Vue.createApp({
  68.         data() {
  69.           return {
  70.             goods: ["V2面膜", "个", 30],
  71.             num: 0,
  72.           };
  73.         },
  75.         // 计算属性放在computed属性中
  76.         computed: {
  77.           sum: {
  78.             // 用get方法，就是js访问器属性
  79.             get() {
  80.               return this.goods[2] * this.num;
  81.             },
  82.           },
  83.         },
  85.         // 侦听器属性：侦听计算属性的变化
  86.         watch: {
  87.           // 计算属性（新值，旧值）
  88.           sum(now, old) {
  89.             console.log(now, old);
  90.           },
  91.         },
  92.         // mounted方法：当vue实例加载完成后调用方法（类似js的onload）
  93.         mounted() {
  94.           // 初始化num
  95.           this.num = 1;
  96.         },
  97.       }).mount(".app");
  98.     </script>
  99.   </body>
  100. </html>

6. 组件

  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>组件:全局组件</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <div class="app">
  12.       <!-- vue指令：就是html的自定义属性 -->
  13.       <div v-text="'你好'"></div>
  15.       <!-- vue组件：就是自定义标签 -->
  16.       <!-- 要在vue实例中注册 -->
  17.       <!-- 注册命名为驼峰式MyBotton，在html中要改为蛇形my-botton -->
  18.       <!-- 定义组件自定义属性username和email，向子组件template中传参 -->
  19.       <!-- @evaluate：订阅子组件定义的事件evaluate，接收子组件传来的参数counter，执行eval函数 -->
  20.       <My-Botton
  21.         username="管理员"
  22.         email="admin@163.com"
  23.         @evaluate="eval"
  24.       ></My-Botton>
  25.     </div>
  27.     <!-- 在标签template中定义组件内容，根据id绑定vue实例 -->
  28.     <template id="counter">
  29.       <!-- 点击时变量+1 -->
  30.       <button @click="counter++">点赞：{{counter}}</button>
  31.       <!-- 使用组件自定义属性， -->
  32.       <h4>用户：{{username}}</h4>
  33.       <h4>邮箱：{{email}}</h4>
  35.       <!-- 与父组件My-Botton通信 -->
  36.       <!-- 用$emit发布订阅 -->
  37.       <!-- $emit("自定义事件名",向父组件传参数) -->
  38.       <!-- 点击按钮时，发布订阅，定义evaluate事件，传递counter参数 -->
  39.       <button @click="$emit('evaluate',this.counter)">评价</button>
  40.     </template>
  42.     <script>
  43.       // 创建vue实例，组件要延迟挂载，mount方法分开在注册组件后面写
  44.       const app = Vue.createApp({
  45.         // 父组件的函数eval要在这里定义
  46.         methods: {
  47.           eval(count) {
  48.             if (count >= 25) {
  49.               alert("达标了！");
  50.             } else {
  51.               alert("未达标！");
  52.             }
  53.           },
  54.         },
  55.       });
  57.       // 注册组件，用component方法注册MyBotton，
  58.       // component("注册组件名称",{组件行为，即方法},data(){return{组件数据}})
  59.       app.component("MyBotton", {
  60.         // 绑定id为counter的template，这样就可在template标签中定义组件内容
  61.         template: "#counter",
  62.         // 向子组件传参用props，父组件My-Botton向子组件（template标签中）传username和email
  63.         // 组件中的自定义属性用props创建，就可使用
  64.         props: ["username", "email"],
  65.         data() {
  66.           return {
  67.             // 定义变量，初化为0
  68.             counter: 0,
  69.           };
  70.         },
  71.       });
  73.       // 绑定挂载点.app
  74.       app.mount(".app");
  75.     </script>
  76.   </body>
  77. </html>

小结：

  • 父组件向子组件传参：在注册组件方法中，用props:定义父组件的参数，多个参数用数组，就可在子组件中使用参数。
  • 子组件与父组件通信：— 在模板中的子组件用$emit发布订阅”事件名”，传递子组件”参数”— 在父组件中使用订阅事件 @事件名，定义函数接受参数。
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行