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>
实现了视图 << == >> 数据 联动双向变化
再次提醒改变数组和对象中未存在的键值的时候一定要注意了 用上述方法解决哦