vue之数据的双向绑定
1、vue 实现数据的双向绑定:
实现:
前端发起请求将服务端后台数据取回之后,渲染前端页面, 当前端页面修改内容时,对应的数据体中的数据也会发生相应的变化。
只有表单元素才能进行数据的双向绑定，原始的表单控件有： input 、checkbox、textarea、radio、select 等。
vue 指令 directive 只是 dom 上的行间属性, vue 给这类属性赋予了一定的意义,来实现特殊的功能,所有的指令都是以 v- 开头, value 属性默认情况下会被vue 忽略 selected和checked 都没有意义。
v-model 会将 data中对应的字段的值赋予输入框中, 当输入框的值改变会影响数据的变化。
案例:
<div id="app">
{{msg}}
<!--表单元素-->
<input type="text" v-model="msg"/>
</div>
2 、vue 常用指令:
① v-model、
② v-text 相当于 {{}} 防止{{}} 出现在页面上 、
③ v-once 只绑定一次 当数据在次变化,页面也不会刷新。
案例：
<div v-once>
{{msg}} {{msg}}
</div>
④ v-html 把html字符当做html 渲染。
案例：
后台返回数据： msg :'<p>hello</p>'
正常的话页面展示之后会是 : <p>hello</p>, 但是添加上 v-html 就会将他当做 html 渲染了.
<div v-html="msg"></div>
3 、vue 从 data 中获取复杂类型:
对象获取:
vue 会循环 data 中的数据, 依次的添加 getter 和 setter 方法。
案例：
<script>
let vm = new Vue({
el:"#app",
data:{
a:{}
}
}) </script>
页面从 a 中获取值 school 就不会获取到值,就不会形成响应式的数据变化。如果想在 a 中获取 shcool 字段的值,需要初始化数据,否则新加的属性不会导致页面刷新:
案例: 第一种方式
<body>
<div id="app">
{{a.school}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
a:{
school:''
}
}
})
</script>
</body>
QQ图片20190302164049.png
案例: 第二种方式:
vm.$set(vm.a ,'school',1);
案例: 第三种方式:
替换原对象。
vm.a={school:'北京大学',age:7,address:'zxxxxx'}
数组获取:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{arr[1]}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
arr:[1,3,4,21,31423]
}
})
</script>
</body>
</html>
如果想将数组中的所有数据展示出来,直接是 {{arr}} 就行了。
修改数组中的值：
通过 pop push shift unshift sort reserve spalice 修改数组中的值。
