目录
前言
本文我们来了解一下模板语法之指令语法中的v-bind和v-model
v-bind
作用
语法格式
编译原理
编译前
编译后
在编译的时候v-bind后面的"参数名"会被编译为html标签的"属性名"
表达式会关联data,当data发生改变后,表达式的执行结果就会发生变化,所以连带的就会产生动态效果
简写
v-model
作用
用来对数据进行绑定
使用方法
同v-bind
v-bind和v-model的区别和联系
v-bind的单向数据绑定和v-model的双向数据绑定
(注意,data中的数值最好不要使用中文,因为vue开发者工具对中文不太友好,有时候会不显示data中的数据)
例:
<div class="app">
v-bind的指令:<input v-bind:value="name1">
v-model的指令:<input v-model:value="name2">
</div>
<script>
new Vue({
el:".app",
data:{
name1:'xiaowu',
name2:'xiaoyou',
}
})
</script>
当我们修改data中的数据时,视图页面同时更新
当我们修改视图上面的数据时,v-bind的data对应的参数值没有发生改变,v-model同步发生了改变