课程名称:Java工程师2022版
课程章节:前端框架VUE3.0
讲师姓名:(老师没说)
课程内容:
VUE简介:vue是一套用于构建用户界面的渐进式框架,简单理解就是用来
VUE的优点:
1、易用∶相对于React和Angular来说,Vue上手简单
2、灵活:渐进式技术,能够开发任何规模的Web应用程序
3、性能:Vue采用了虚拟DOM.双向数据绑定等技术,运行速度快
下载/安装Vue
1、Vue封装了一些自定义属性,这些自定义属性就叫指令
2、指令可以用来控制标签的数据显示、注册事件、样式设置等等
3、指令的核心作用就是帮助我们更好的操控页面1、差值表达式、v-html指令、v-text 指令
数据填充指令
1、差值表达式、v-html指令、v-text指令
2、v-html、v-text会覆盖标签内原有的内容,插值表达式不会
3、v-html:能识别标签
v-bind指令
v-bind用来为标签的属性节点绑定数据,可以简写为:
v-bind用来绑定class属性时有两种方式:
class样式绑定
1、对象方式:<div v-bind:class="{ active: isActive }"></div>
2、数组方式: <div v-bind:class="[fs, bgc]"></div>
对象方式
<div :class=" { active: isActive }"></div>
1、active:类名,定义在style标签中的类
2、isActive :布尔值,true类起效、false类失效,定义在data中
数组方式
1、fs、bgc:变量,要定义在data中
2、fs、bgc的值是类名,定义在style标签中的类名
Style样式绑定
v-bind用来绑定style属性时有两种方式︰
1、对象方式: <div :></div>
对象方式
1、fontSize :属性名
2、fs :样式值(变量),要定义在data中
<div :></div> :
数组方式
1、c1, c2:变量,定义在data中
2、c1, c2 ∶的值是对象形式,内部是样式属性和值
v-on指令
v-on用来为标签绑定事件,可以简写为@
v-if指令
v-if 能够根据表达式的真假值来有条件地渲染元素
v-else、v-else-if
v-model指令
v-model用于数据的双向绑定
mvvm开发模式
1、Vue是一种采用MVVM开发模式的框架
2、MVM是—种分离开发思想,将页面开发分为三个部分
1、Vue2采用的是OptionsAPl
CompositionAPI
2、Vue3采用的是CompositionAPl3、Vue3兼容Vue2的OptionsAPl
Vue2会将实现业务的数据和方法分拆到data、 methods 等不同的节点中,这种代码组织方式称为OptionsAPl
OptionsAPl
缺点∶如果页面的业务逻辑比较复杂,需要使用的功能比较多,那程序就会难于开发和维护
1、CompositionAPI提供了两种响应式数据声明方式ref()和reactive()
响应数据声明
2、setup()是CompositionAPI的入口函数
ref
ref()方法通常用来定义简单数据类型(数值型、字符串等)
reactive
reactive()方法通常用来定义复杂数据类型(数组、对象)
课程收获:
老师讲的知识点很详细,初次接触编程,有很多东西看得不太懂,希望在今后的实战项目中能熟练这些知识。
截图: