目录

1.模板语法

1.插值语法：

2.指令语法：

2.数据绑定

1.单向绑定（v-bind）

2.双向绑定（v-model）

3.简易写法

 4.结论

1.模板语法

1.插值语法：

        功能：用于解析标签体内容，写在一对标签中的内容   <>xxxxxxx<>

        写法：{{ xxx}},xxx 是js表达式，且可以直接读取到data中的所有属性。

<h1>hello,{{name}},{{address}},{{Date.now()}}</h1>

2.指令语法：

    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.......）

    举例：v-bind：href=" xxx " 或简写为 ：href="xxx"，xxx同样要写js表达式

                且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-???。

<a v-bind:href="url">学习</a></br>

2.数据绑定

1.单向绑定（v-bind）

数据只能从data流向页面。

<input type="text" v-bind:value="name">

2.双向绑定（v-model）

数据不仅能从data流向页面，还可以从页面流向data。

<input type="text" v-model:value="name">

3.简易写法

<input type="text" v-bind:value="name">
<input type="text" :value="name">
<input type="text" v-model:value="name">
<input type="text" v-model="name">

 4.结论

注意：

1.双向绑定一般都用在表单类元素上（如：input、select等）

2.v-model：value 可以简写成v-model ，因为v-model默认收集的就是value值。

最后

以上就是老实人生最近收集整理的关于Vue —02 模板语法 与 数据绑定1.模板语法2.数据绑定的全部内容，更多相关Vue内容请搜索靠谱客的其他文章。