# Vue-vue指令补充,computed 计算属性,watch 侦听器

妄想郑 5️⃣8️⃣

已于 2023-06-29 14:56:08 修改

阅读量55

点赞数

文章标签： vue.js javascript 前端

于 2023-04-27 20:28:31 首次发布

本文链接：https://blog.csdn.net/2301_76866366/article/details/130414576

版权

Vue-vue指令补充,computed 计算属性,watch 侦听器

一.指令补充

指令修饰符

① 按键修饰符
@keyup.enter → 键盘回车监听
② v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 转数字
③ 事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为

<body>
  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input v-model="username" type="text" @keyup.enter='an'>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        an(){
          console.log('点击了');
        }
      }
    })
  </script>
</body>

<div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>
</body>

v-bind 对于样式控制的增强-操作class

语法 :class = “对象/数组”

① 对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

适用场景：批量添加或删除类

<div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <a @click="activeIndex = index" :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex : 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

v-bind 对于样式控制的增强 - 操作style

语法 :style = “样式对象”

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

适用场景：某个具体属性的动态设置

<body>
  <div id="app">
    <div class="progress">
      <div class="inner" :style="{width:par+'%'}">
        <span>{{par}}%</span>
      </div>
    </div>
    <button @click='par = 25'>设置25%</button>
    <button @click='par = 50'>设置50%</button>
    <button @click='par = 75'>设置75%</button>
    <button @click='par = 100'>设置100%</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        par:50
      }
    })
  </script>
</body>

v-model应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

<body>

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model='username'> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model='isSingle'> 
      <br><br>

    兴趣爱好:
      <input type="checkbox" value="smoking" v-model='hobby'>抽烟
      <input type="checkbox" value="drink" v-model='hobby'>喝酒
      <input type="checkbox" value="perm" v-model='hobby'>烫头
      <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio" name='gender' value='1' v-model='gender'>男
      <input type="radio" name='gender' value='0' v-model='gender'>女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model='city'>
        <option value='bj'>北京</option>
        <option value='sh'>上海</option>
        <option value='cd'>成都</option>
        <option value='nj'>南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model='describe'></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username:'',
        isSingle:true,
        hobby:[],
        gender:'1',
        city:'bj',
        describe:''
      }
    })
  </script>
</body>

二.computed 计算属性

计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：
① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}

computed: {
  计算属性名 () {
    基于现有数据，编写求值逻辑
    return 结果  }
},

computed 计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
① 写在 computed 配置项中
② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}

缓存特性（提升性能）：
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存

methods 方法：
作用：给实例提供一个方法，调用以处理业务逻辑。
语法：
① 写在 methods 配置项中
② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名=“方法名”

计算属性完整写法

计算属性默认的简写，只能读取访问，不能 “修改”。
如果要 “修改” → 需要写计算属性的完整写法。

computed: {
 计算属性名: {
    get() {
      一段代码逻辑（计算逻辑）
      return 结果
    },
    set(修改的值) {
      一段代码逻辑（修改逻辑）
    }
  }
}

三.watch 侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作。
语法：
① 简单写法 → 简单类型数据，直接监视
② 完整写法 → 添加额外配置项

简单写法

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

(1) deep: true 对复杂类型深度监视
(2) immediate: true 初始化立刻执行一次handler方法

妄想郑 5️⃣8️⃣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# Vue-vue指令补充,computed 计算属性,watch 侦听器

指令修饰符 v-bind 对于样式控制的增强-操作class/style v-model应用于其他表单元素 computed 计算属性 watch 侦听器
复制链接

扫一扫