Vue中的注意点（二）

最新推荐文章于 2023-06-22 21:19:47 发布

吃蛋糕的居居

最新推荐文章于 2023-06-22 21:19:47 发布

阅读量189

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45133582/article/details/119548571

版权

1.插值语法的实现：

<template>
  <div class="app">
    <!-- v-mode:value 的简写形式： v-model -->
    姓：<input type="text" v-model="firstName" /><br /><br />
    名：<input type="text" v-model="lastName" /><br /><br />
    <!-- 只截取前三位的字符串：slice -->
    全名：<span>{{ firstName.slice(0,3) }}-{{ lastName }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  methods: {},
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

2.methods的实现：

<template>
  <div class="app">
    <!-- v-mode:value 的简写形式： v-model -->
    姓：<input type="text" v-model="firstName" /><br /><br />
    名：<input type="text" v-model="lastName" /><br /><br />
    <!-- 插值语法调用函数的返回值时加上小括号();如果函数调用的数值发生变化，会重新解析模板，改变一次就会解析一次 -->
    全名：<span>{{ fullName() }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  methods: {
    fullName() {
      console.log('重新解析模板')
      return this.firstName + "-" + this.lastName;
    },
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

3.计算属性的实现：

<template>
<!-- 
  计算属性：
  1.定义：要用的属性不存在，要通过已有的属性计算得来
  2.原理：底层借助了Object.defineproperty方法提供的getter和setter
  3.get函数什么时候执行？
      (1)初次读取时会执行一次
      (2)当依赖的数据发生改变时会被再次调用
  4.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调式方便
  5.备注：
      (1)计算属性最终会出现在vm上，直接读取使用即可    
      (2)如果计算属性要被改变，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
 -->
  <div class="app">
    <!-- v-mode:value 的简写形式： v-model -->
    姓：<input type="text" v-model="firstName" /><br /><br />
    名：<input type="text" v-model="lastName" /><br /><br />
    <!-- 多次调用的时候，缓存只执行一次，比methods强 -->
    全名：<span>{{ fullName }}</span
    ><br /><br />
    全名：<span>{{ fullName }}</span
    ><br /><br />
    全名：<span>{{ fullName }}</span
    ><br /><br />
    全名：<span>{{ fullName }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  methods: {},
  computed: {
    //计算属性
    fullName: {
      // 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
      // get什么时候被调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
      get() {
        console.log("get被调用了！");
        console.log(this); //此处的this是这个Vue本身
        return this.firstName + "-" + this.lastName;
      },     
      // set什么时候被调用？  当fullName被修改时
      set(value){
        console.log('set',value);
        const arr=value.split('-')//按照-为分隔符，把输入的字符串进行分割，分割成数组形式
        this.firstName=arr[0]
        this.lastName=arr[1]
      }
    },
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

4.计算属性的实现(简写形式：只考虑读取，不考虑修改的时候使用)：

<template>
  <div class="app">
    姓：<input type="text" v-model="firstName" /><br /><br />
    名：<input type="text" v-model="lastName" /><br /><br />
    全名：<span>{{ fullName }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  methods: {},
  computed: {
    // 简写形式：当只用getter函数的时候调用
    fullName() {//并不是一个函数。而是一个调用的属性的值是这个输出的结果，调用的时候当作属性来用
      console.log("get被调用了！");
      console.log(this);
      return this.firstName + "-" + this.lastName;
    },
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

5.监视属性的实现：

<template>
  <div class="app">
    <!-- <h2>今天天气很{{ isHot ? "炎热" : "凉爽" }}</h2> -->
    <h2>今天天气很{{ info }},{{x}}</h2>
    <!-- <button @click="changeWeather">切换天气</button> -->
    <!-- 绑定事件的时候：@xxx="yyy"  yyy可以写一些简单的语句 -->
    <button @click="isHot = !isHot;x++">切换天气</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isHot: true, //布尔值
      x:1,
    };
  },
  methods: {
    // changeWeather() {
    //   return this.isHot = !this.isHot;
    // },
  },
  computed: {
    info() {
      return this.isHot ? "炎热" : "凉爽"; //加上this，让this的指向改为vm的指向
    },
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

6.监视属性的具体写法：watch的写法！

APP.vue:

<template>
<!-- 
  监视属性watch：
  1.当被监视的属性变化时，回调函数自动调用，进行相关操作。
  2.监视的属性必须存在，才能进行监视。
  3.监视的两种写法：
      (1)new Vue时传入watch配置
      (2)通过vm.$watch监视
 -->
  <div class="app">
    <h2>今天天气很{{ info }}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {    
      isHot: true, //布尔值
    };
  },
  methods: {
    changeWeather() {
      return this.isHot = !this.isHot;
    },
  },
  computed: {
    info() {
      return this.isHot ? "炎热" : "凉爽"; //加上this，让this的指向改为vm的指向
    },
  },
  watch:{//监听属性，计算属性和属性都可以被监听
    isHot:{
      immediate:true,//初始化时，让handler调用一次.默认是false
      // handler函数什么时候调用？当isHot改变时==>一个新的值，一个旧的值
      handler(newValue,oldValue){
        console.log('isHot被修改了！',newValue,oldValue)
      }
    }
  }
};

</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>

index.js:

import _ from 'lodash';
import Vue from 'vue';
import App from './App';

var vm = new Vue({
  el: "#ex",//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串

  data: {
    namesss: "abc",
    school: {
      age: '19',
      a: "ui",
    }
  },

  methods: {
  },
  components: { App },
})
vm.$watch('isHot',{
  immediate:true,//初始化时，让handler调用一次.默认是false
      // handler函数什么时候调用？当isHot改变时==>一个新的值，一个旧的值
      handler(newValue,oldValue){
        console.log('isHot被修改了！',newValue,oldValue)
      }
})

7.深度监视：

<template>
<!-- 
  深度监视：
      (1)Vue中的watch默认不监测对象内部值的改变(一层)
      (2)配置deep:true可以监测对象内部值改变(多层)
  备注：
      (1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
      (2)使用watch时根据数据的具体结构，决定是否采用深度监视
 -->
  <div class="app">
    <h2>今天天气很{{ info }}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr />
    <h4>a的值是：{{ numbers.a }}</h4>
    <input type="button" value="点我让a+1" @click="numbers.a++" />
    <h4>b的值是：{{ numbers.b }}</h4>
    <input type="button" value="点我让b+1" @click="numbers.b++" />
    <button @click="numbers = { a: 999, b: 888 }">彻底替换掉numbers</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isHot: true, //布尔值
      numbers: {
        a: 1,
        b: 1,
      },
    };
  },
  methods: {
    changeWeather() {
      return (this.isHot = !this.isHot);
    },
  },
  computed: {
    info() {
      return this.isHot ? "炎热" : "凉爽"; //加上this，让this的指向改为vm的指向
    },
  },
  watch: {
    //监听属性，计算属性和属性都可以被监听
    isHot: {
      // immediate:true,//初始化时，让handler调用一次.默认是false
      // handler函数什么时候调用？当isHot改变时==>一个新的值，一个旧的值
      handler(newValue, oldValue) {
        console.log("isHot被修改了！", newValue, oldValue);
      },
    },
    "numbers.a": {
      //监视多级结构中某个属性的变化(真正的写法)
      handler() {
        console.log("a被修改了！");
      },
    },
    "numbers.b": {
      handler() {
        console.log("b被修改了！");
      },
    },
    // 监视多级结构中所有属性的变化
    'numbers':{
      deep:true,//深度监视
      handler(){
        
        console.log("numbers发生了改变！(包含深度改变)")
      }
    }
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 300px;
  background: rgb(95, 152, 226);
}
</style>