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

最新推荐文章于 2022-09-07 11:40:12 发布

六叶朱

最新推荐文章于 2022-09-07 11:40:12 发布

阅读量426

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41238129/article/details/106402495

版权

先创建一个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>

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

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

六叶朱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>
复制链接

扫一扫