当前位置：
  1. 首页
  2. vue
  3. 正文
本文介绍: Vue学习计划–Vue2（三）watch、class、style、set

Vue

  1. 监听(watch): 监听一个属性的变化

    1. 监事属性watch:

      1. 当监视的属性变化时，回调函数自动调用，进行相关操作
      2. 监视的属性必须存在，才能进入监视
      3. 监视的两种写法：
        1. new Vue 时传入watch配置
        2. 通过 vm.$watch()监视
      4. immediate初始化时让handler调用一下

    2. 深度监视：

      1. Vue中的watch默认不监视对象内部值的变化（只监视一层）
      2. 配置deep:true可以监视对象内部值变化（多层）

      备注：

      1. Vue自身可以监视对象内部值得变化，但Vue提供的watch默认不可以
      2. 使用watch时，根据数据的具体结构，决定是否采用深度监听

    3. 简写：当确定不使用immediate和deep属性时可以简写

    一、监听
    1. 
    const vm = new Vue({
    el: "#app",
    watch:{
        immediate: true, // 初始化时让handler调用一下
        deep: true, // 深度监听
        handler(newValue, oldValue){
            console.log(newValue, oldValue)
        }
    }
    })
    2. 
    vm.$watch('isSHow',{
    immediate: true, // 初始化时让handler调用一下
    deep: true, // 深度监听
    handler(newValue, oldValue){
        console.log(newValue, oldValue)
    }
    })
二、简写
    1. 
    const vm = new Vue({
    el: "#app",
    watch:{
        isShow(newValue, oldValue){
            console.log(newValue, oldValue)
        }
    }
    })
    2. 
    vm.$watch('isSHow', function(newValue, oldValue){
    console.log(newValue, oldValue)
    })

  2. 计算属性（computed）、方法methods、监听（watch）的区别?
    computed、watch、methods专人干专事

    1. 计算属性computed:
      1. 目的是得到一个计算结果，必须要有return，一个状态值受多个状态值影响。
      2. 有缓存，当依赖状态值变化是，才会重新计算。
      3. 不能异步
      4. 本身不支持传参，可以使用闭包
    2. 事件methods：
      1. 绑定的事件处理，非必须return
      2. 没有缓存
    3. 监听watch:
      1. 一个状态的改变 影响多条数据，没有return
      2. 没有缓存
      3. 可以异步
      4. 不传参

  3. class和style绑定

    1. class样式 写法： :class = “xxx”, xxx可以是字符串、对象、数组
      1. 字符串写法适用于：类名不确定，要动态获取
      2. 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
      3. 数组写法适用于：要绑定多个样式，个数确定，名字也确定
    2. style样式 
      :style = "{fontSize: xxx}" 其中xx是动态的
:style = "[a, b]" 其中a, b是样式对象

      示例：

      <!DOCTYPE html&gt;
	<html lang="en"&gt;
	<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	  <script src="./vue.js"></script>
	  <style>
	    /* #region */
	    .red{
	      color: red;
	    }
	    .blue{
	      color: blue;
	    }
	    .green{
	      color: green
	    }
	    .yellow{
	      color: yellow
	    }
	    /* #endregion */
	    .bold{
	      font-weight: bold;
	    }
	    .size{
	      font-size: larger;
	    }
	  </style>
	</head>
	<body>
	  <div id="app">
	    <!-- 1. 绑定字符串 -->
	    <!-- 1.1.1 固定切换class名称 -->
	    <p :class="name">这是一个动态class</p>
	    <button @click="changClass">点击单次切换class名</button>
	    <br>
	    <!-- 1.1.2 随机切换class名称 -->
	    <!-- class 和:class 可以绑定多个class名称 -->
	    <p class="bold" :class="name">这是一个动态class</p>
	    <button @click="changClass2">点击数组切换class名</button>
	    <br>
	     <!-- 1.1.3 三元表达式表达式切换class名称 -->
	     <p :class="isName ? 'red' : 'blue'">这是一个动态class</p>
	     <button @click="isName = !isName">表达式切换class名</button>
	    <hr>
	    <!-- 2. 绑定对象 -->
	    <!-- <p :class="{bold: true, size: false}">这是一个对象绑定的class类名</p> -->
	    <p :class="objClass">这是一个对象绑定的class类名</p>
	    <button @click="objClassChange">表达式切换class名</button>
	    <hr>
	    <!-- 3. 绑定数组 -->
	    <!-- <p :class="['blue', 'bold', 'size']">这是一个对象绑定的class类名</p> -->
	    <p :class="arrClass">这是一个对象绑定的class类名</p>
	    <button @click="arrClassChange">表达式切换class名</button>
	
	  </div>
	  <script>
	    const vm = new Vue({
	      el: '#app',
	      data: {
	        name: 'red',
	        isName: true,
	        arr:['red', 'blue', 'green'],
	        // 对象class名称
	        objClass:{
	          red: true,
	          bold: true
	        },
	        // 数组class名称
	        arrClass:[ 'blue', 'bold', 'size']
	      },
	      methods: {
	        // #region 字符串绑定
	        changClass(){
	          this.name = 'blue'
	        },
	        changClass2(){
	          const a = Math.floor(Math.random() * 3)
	          console.log(this.arr[a]);
	          this.name = this.arr[a]
	        },
	        // #endregion
	        objClassChange(){
	          // this.objClass.size = true
	          // 解决方法 $set方法
	          // this.$set(this.objClass, 'size', true)
	          Vue.set(this.objClass, 'size', true)
	
	        },
	        arrClassChange(){
	          // this.arrClass.splice(0, 1, 'yellow')
	          // 存在问题？为何vm中的arrClass值改变了，页面却没有渲染 => Vue内部监视原理
	          // this.arrClass[0] = 'yellow'
	          // 解决方法
	          // this.$set(this.arrClass, 0, 'yellow')
	          this.$set(this.arrClass, 0, 'yellow')
	        }
	      },
	    })
	  </script>
	
	</body>
	</html>

  4. set方法

    1. Vue会监视data中所有层次的数据。

    2. 如何监视对象的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的内容

      Vue.set(target, propertyName/index, value)
vm.$set(target, propertyName/index, value)

    3. 如何监视数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做两件事

      1. 调用原生对应的方法对数组进行更新
      2. 重新解析模板，进而更新页面

    4. 在Vue修改数组中的某个元素一定要用如下方案：

      1. 使用这些API：push(), pop(), shift(), unshift(), sort(), reverse(), splice()

    5. Vue.set()或者vm.$set()

      特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性！！
      示例：

      <!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	  <script src="./vue.js"></script>
	</head>
	<body>
	  <div id="app">
	      {{ obj }}
	      <button @click="changeObj">点击改变obj值</button>
	      <hr>
	      {{ arr }}
	      <button @click="changeArr">点击改变arr值</button>
	      <hr>
	      {{ arr2 }}
	      <span v-once>{{ arr2 }}</span>
	      <button @click="changeArr2">点击改变arr顺序sort方法</button>
	      <hr>
	      {{ arr3 }}
	      <button @click="changeArr3">点击翻转arr</button>
	  </div>
	  <script>
	    const vm = new Vue({
	      el: '#app',
	      data:{
	        obj:{
	          name: '小明'
	        },
	        arr:['小亮', 10],
	        arr2:[ 10, 40, 5, 30],
	        arr3:[ 1, 2, 3, 4]
	      },
	      methods: {
	        changeObj(){
	          // this.obj.banji = 'xx班级'
	          // 解决方法
	          // this.$set(this.obj, 'banji', 'xx班级')
	          Vue.set(this.obj, 'banji', 'xx班级')
	        },
	        changeArr(){
	          // this.arr[0] = '小白'
	          // 解决方法一： set
	          // this.$set(this.arr, 2, 'xx班级')
	          // Vue.set(this.arr, 2, 'xx班级')
	
	          // this.arr[2] = '小白'
	          // 解决方法二：内置函数
	          // 1. 数组后添加值
	          // this.arr.push('小白')
	          // 2. 数组后删除值
	          // this.arr.pop()
	          // 3. 从头往后删除数组
	          // this.arr.shift()
	          // 4. 数组前面加值
	          // this.arr.unshift('小小')
	          
	        },
	        // 数组排序
	        changeArr2(){
	          // 5. sort()
	          // 正序
	          this.arr2.sort((a,b) =>{
	            console.log('--');
	            console.log(a, b);
	            return a-b
	          })
	          // this.arr2.sort((a,b) =>{
	          //   return b - a
	          // })
	        },
	        // 翻转数组
	        changeArr3(){
	          // this.arr3.reverse()
	          // this.arr3.splice(1, 2, 'a', 'b', 'v')
	          // 注意: 禁止给vm或者vm的跟数据对象添加属性
	          // console.log(vm._data)
	          // this.$set(vm._data, 'name', 'ssss')
	          // this.$set(vm, 'name', 'ssss')
	        }
	      },
	    })
	  </script>
	</body>
	</html>

原文地址:https://blog.csdn.net/qq_35940731/article/details/134750970

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_46692.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 【数据结构】第一章——习题演练
下一篇 【数据结构和算法】找出叠涂元素

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。