手记

【九月打卡】第1天+前端框架VUE3.0

课程名称: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()方法通常用来定义复杂数据类型(数组、对象)


课程收获:

老师讲的知识点很详细,初次接触编程,有很多东西看得不太懂,希望在今后的实战项目中能熟练这些知识。


截图:




0人推荐
随时随地看视频
慕课网APP