实验环境
- npm v10.8.1
- node v20.16.0
- vue.js v3.4.37
- VSCODE 1.88.1
什么是Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。在Vue中,一个核心的概念,就是让用户不再操作DOM元素,让程序员有更多时间关注业务逻辑。
什么是MVVM
- MVC 是后端的分层开发概念;
- MVVM是前端视图层的概念,分为了 三部分 Model, View , VM ViewModel
- Model(模型):代表应用程序的数据和业务逻辑
- Vie(视图):用户解密,用于数据的显示
- ViewModel(视图模型):连接Model和view的桥梁,负责将Model的数据转换为View可以显示的格式,并处理View的事件,更新Model
双向数据绑定:Model的数据变化会自动更新View,同时View的变化也会自动更新Model
来自 https://zh.wikipedia.org/wiki/MVVM的图例:
Vue.js示例
常用指令
指令 | 描述 |
{{}} | 插值表达式 |
v-cloak | 这个命令通常与css配合使用,用于在 Vue 实例加载和编译之前隐藏元素。可以用于解决 插值表达式闪烁的问题 |
v-text | 和插值一样也是使用vue中的变量,但是默认没有闪缩问题,但是会覆盖原本的内容,插值不会 |
v-html | 显示HTML的内容 |
v-bind | Vue提供的属性绑定机制,缩写是 ‘:’ |
v-on | Vue提供的事件绑定机制,缩写是:‘@’ |
插值表达式
在html页面中,我们获取vue中的数据,可以通过插值表达式来获取
注意,插值表达式有闪烁的问题,就是在刚开始加载页面时候会先闪烁显示{{msg}}
而不是具体的内容,不过在最新版本好像修复了,没模拟出来
v-cloak
v-cloak指令可以解决上面插值闪烁的问题,其实也是利用css的一些属性,将内容给隐藏
v-text
v-text
会覆盖掉原有的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空
v-html
从Vue对象中获取的信息如果含有HTML标签的话,可以使用v-html
指令来显示
v-bind
v-bind
是用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式
v-on
Vue 中提供了 v-on: 事件绑定机制,具体使用