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>
  16. <script>
  17. const app = Vue.createApp({
  18. data(){
  19. return {
  20. a:1,
  21. b:2,
  22. }
  23. },
  24. computed:{
  25. sum:{
  26. get(){
  27. return this.a+this.b;
  28. },
  29. }
  30. }
  31. }).mount(".app");
  32. </script>
  33. </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>
  16. <script>
  17. const app = Vue.createApp({
  18. data(){
  19. return {
  20. a:1,
  21. b:2,
  22. }
  23. },
  24. computed:{
  25. sum:{
  26. get(){
  27. return this.a+this.b;
  28. },
  29. }
  30. },
  31. watch:{
  32. sum(current,orign){
  33. console.log(current,orign);
  34. }
  35. },
  36. }).mount(".app");
  37. </script>
  38. </html>

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

vue中的组件创建

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

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

父组件向子组件通信

  • 父组件通过自定义属性,向子组件进行传递变量,子组件通过props来接受父组件传递过来的参数,例如下列代码
  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. </head>
  9. <body>
  10. <div class="app">
  11. <button-counter username="admin" email="admin@qq.com"></button-counter>
  12. </div>
  13. <template id="counter">
  14. <p>用户: {{username}}</p>
  15. <p>邮箱: {{email}}</p>
  16. </template>
  17. <script>
  18. // 1. 创建实例
  19. const app = Vue.createApp({
  20. })
  21. // 2. 注册组件
  22. app.component('ButtonCounter', {
  23. props: ['username', 'email'],
  24. template: '#counter',
  25. })
  26. // 3. 绑定挂载点
  27. app.mount('.app')
  28. </script>
  29. </body>
  30. </html>

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

子组件向父组件通信

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

  • 父组件订阅子组件的自定义事件,通过@customEvent(...args)来实现
  • 子组件发布自定义事件,通过$emit(customEvent, ...args)方法来实现,例如下列代码
  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>
  10. <body>
  11. <div class="app">
  12. <button-counter username="admin" email="admin@qq.com" @review-count="review"></button-counter>
  13. </div>
  14. <template id="counter">
  15. <button @click="count++">点赞: {{count}}</button>
  16. <p>用户: {{username}}</p>
  17. <p>邮箱: {{email}}</p>
  18. <!-- 发布订阅 -->
  19. <!-- $emit(自定义事件, 向父组件传递的参数[可选]) -->
  20. <button @click="$emit('reviewCount', this.count)">评价</button>
  21. </template>
  22. <script>
  23. // 1. 创建实例
  24. const app = Vue.createApp({
  25. methods: {
  26. review(count) {
  27. console.log(count)
  28. if (count >= 20) {
  29. alert('我是太爱大家了')
  30. }
  31. },
  32. },
  33. })
  34. // 2. 注册组件
  35. app.component('ButtonCounter', {
  36. props: ['username', 'email'],
  37. template: '#counter',
  38. data() {
  39. return {
  40. count: 0,
  41. }
  42. },
  43. })
  44. // 3. 绑定挂载点
  45. app.mount('.app')
  46. </script>
  47. </body>
  48. </html>

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

相关推荐
阅读 +