VUE数据绑定视图层渲染问题

先创建一个Vue应用

对照代码分析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>{{mesg}}</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app", // 挂载的对象
        data: {
          mesg: "hellow Vue",
        },
      });
      vm.$mount("#app");// 挂载的对象
    </script>
  </body>
</html>

创建完vue实例 我们需要绑定好挂载的对象,如上代码 可以用el: "#app",去挂载也可以用vm.$mount("#app")去挂载 。切记不要在变量声明表达式之前调用vm.$mount("#app")是无效的,变量声明表达式并不会提升,并且const let 都不会进行变量提升

大部分情况mesg数据直接修改后视图层也会发生改变.

<div id="app">
  <h3>{{number}}</h3>
  <h3>{{boolen}}</h3>
  <h3>{{mesg}}</h3>
  <h3>{{text.text1}}</h3>
  <button @click="change">改变</button>
  <button v-on:click="change">改变</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
     boolen: false,
     number: 123,
     mesg: "hello",
     text: { text1: "hello" },
    },
    methods: {
      change() {
        this.boolen = true;
        this.number = 321;
        this.mesg = "hello world";
        this.text.text1 = "hello world";
      },
    },
  });
</script>

对比html中的绑定事件 vue中的绑定事件用的 v-on:去绑定的,可以简写为@

但当mesg为数组时,直接修改数组数据视图不会进行渲染

<div id="app">
  <h3>{{arr[0]}}</h3>
  <button v-on:click="change">改变</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      arr: ["hello"],
    },
    methods: {
      change() {
        this.arr[0] = "hello world";
      },
    },
  });
</script>

如果同时还有其他数据改变会对视图层进行改变也会跟着改变 或者 等到下次视图层发生改变的时候才去渲染
要想让数组发生改变视图层跟着改变就需要用到数组的变异方法了pop push shift unshift reverse sort splice

改变对象属性值的时候也需要注意

<div id="app">
      <h3>{{text.text1}}</h3>
      <h3>{{text.text2}}</h3> 
      <button v-on:click="change">改变</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          text: { text1: "hello" },
        },
        methods: {
          change() {
            this.text.text2 = "hello world";
          },
        },
      });
    </script>

这种情况下并不会报错,只是对象没找到属性值,后续再去改变他的值,视图层也不会渲染
解决方法可以预先设好这个属性名,将属性值设为空 就可以了 text: { text1: "hello", text2: "" }

其实官方也给出了引用类型数据改变视图不渲染的解决方法 this.$set(target,key,value)

就上述问题而言 可以用 this.$set(this.text, "text2", "hello world"); 解决
数组的本质也是对象 可以用 this.$set(this.arr, 0, "hello world"); 解决

数据绑定在行间属性身上就需要用到Vue的另一个命令了 v-bind 简写为 :

<div id="app">
  <a :href="url" v-bind:class='bind'>通向未知世界的大门</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
    	bind: "alink",
      url: "http://www.baidu.com",
    },
  });
</script>

其他标签写法自行类比

双向绑定 v-model

div id="app">
  <input type="text" v-model="value" />
  <button @click="change">打印vm下的value</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      value: "这是个文本框",
    },
    methods: {
      change() {
        console.log(this.value);
      },
    },
  });
</script>

实现了视图 << == >> 数据 联动双向变化

再次提醒改变数组和对象中未存在的键值的时候一定要注意了 用上述方法解决哦

你可能感兴趣的:(VUE数据绑定视图层渲染问题)