目录
前言
本文我们来了解一下模板语法之指令语法中的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同步发生了改变











