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知识,请关注本博主~~

相关推荐
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊9 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选9 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ13 小时前
Vue2上
vue.js·npm
江城开朗的豌豆13 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景16 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js