vue基础之3:模板语法、数据绑定

欢迎来到"雪碧聊技术"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知识,请关注本博主~~

相关推荐
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
影子信息7 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月7 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu7 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20187 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿7 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘7 小时前
vue文本插值
javascript·vue.js·ecmascript
华子w9089258597 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
老家的回忆9 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf