欢迎来到"雪碧聊技术"CSDN博客!
在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在"雪碧聊技术"与您共同成长!
目录
[①插值语法:{{ }}](#①插值语法:{{ }})
3、注意:v-model指令,只能用在表单类元素(也叫"输入类元素")
举例:input框、单选框、多选框、select框、多行输入元素。
4、由于v-model只能用在输入类元素,即:含有value的元素,因此v-model:value可以简写成v-model
一、模板语法
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知识,请关注本博主~~