Vue的模版代码与数据绑定方式

目录

模版代码

插值语法

指令语法

数据多层访问

 vue模版语小结

数据绑定方式

---

模版代码

插值语法

插值语法就是使用{{xxx}}描述的

    {{name}}

指令语法

    url地址名

在普通的url指定中，如果直接写{{url}}，则会把""里面的值当成字符串，所以应该加上v-bind:href

或者直接简写为:href

    {{name}}
    url地址
    url地址

  

 加上了v-bind之后，vue会将里面的字符串当成一个表达式，执行的结果绑定给这个标签。

数据多层访问

当存在多层时，data层下还有层如

{{}}访问到的是data层的数据，若要访问school层的name，只需{{school.name}}即可访问。

    {{name}}
    url地址名为:{{school.name}}
    url地址名为:{{school.name}}

 vue模版语小结

 vue模版语法有两大类：

1、插值语法：

• 功能：用于解析标签体内容。
• 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性值，

2、指令语法：

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
• 举例：v-band:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

注：vue中有许多指定，都是形如v-xxx

插值在<>外的，指令在<>内

数据绑定方式

• v-bind单向绑定
• v-model双向绑定

    
    
    






    单向数据绑定

    双向数据绑定

 单向绑定只有data到value的值，就是说，当data中的值发生改变时，value就会发生改变

双向绑定data和value是双向的，data可以到value，value也可以到data。

 Vue中的两种数据绑定的方式：

1、单向绑定(v-bind):数据只能从data流向页面。

2、双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

注：

• 双向绑定一般都应用在表单类元素上（如：input、select等）
• v-model:value可以简写为v-model，因为v-model默认收集的就是value值。