欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

目录

一、模板语法

1、什么是模板？

举例：

 2、模板有什么用？

3、模板语法分哪几类？

①插值语法：{{ }}

举例：

②指令语法

举例：

注意，v-bind：可以简写成：

4、总结

二、数据绑定

1、什么是数据绑定？

2、数据绑定分为哪几种？

①单向绑定：v-bind

举例：

②双向绑定：v-model

3、注意：v-model指令，只能用在表单类元素（也叫“输入类元素”）

举例：input框、单选框、多选框、select框、多行输入元素。

4、由于v-model只能用在输入类元素，即：含有value的元素，因此v-model：value可以简写成v-model

举例：

5、练习题：下面元素属性的全写是什么？

6、总结

---

一、模板语法

1、什么是模板？

        与vue实例绑定的容器，就是模板。

举例：

 2、模板有什么用？

        如下图，模板里的{{ name }}，就会被vue实例赋值，然后在页面中展示数据。

3、模板语法分哪几类？

①插值语法：{{ }}

举例：

运行结果：

②指令语法

举例：

v-bind：用在标签属性上，使得html标签属性的值，可以是vue实例中的数据。如：v-bind:href = "url"。说白了，v-bind的作用就是让标签属性的值可以动态变化。

此时标签属性href被v-bind修饰了，因此可以动态变化，值就是vue实例中的数据url的值。

如果不想让href属性的值动态变化了，那就删掉前面的v-bind即可。 

注意，v-bind：可以简写成：

4、总结

二、数据绑定

1、什么是数据绑定？

将容器的值，和vue实例的数据进行绑定

2、数据绑定分为哪几种？

①单向绑定：v-bind

举例：

此时之所以叫“单向绑定”，是因为此时修改vue实例中的数据，会影响容器中标签属性value的值；但是value属性 的值发生变化时，不会影响vue实例的数据。如下图：

②双向绑定：v-model

3、注意：v-model指令，只能用在表单类元素（也叫“输入类元素”）

举例：input框、单选框、多选框、select框、多行输入元素。

4、由于v-model只能用在输入类元素，即：含有value的元素，因此v-model：value可以简写成v-model

举例：

5、练习题：下面元素属性的全写是什么？

：value的全写是v-bind：value

v-model的全写是v-model：value

6、总结

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

1、单向绑定（v-bind）：数据只能从data流向页面。

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

      备注：①双向绑定一般都用在表单类元素的属性上（如：input、select等）

                 ②v-model：value可以简写成v-model，因为v-model默认收集的就是表单元素的value属性的值。

 

以上就是vue中的模板语法、数据绑定的全部内容，想了解更多的vue知识，请关注本博主~~