核心概念:
vue.js是一个用于构建用户界面的渐进式JavaScript框架,以数据驱动和组件化的思想,是的构建交互式Web应用更加简单快捷。
- 数据绑定:通过指令和插值表达式,实现数据与DOM之间的双向绑定。
- 组件化:将界面拆分成独立可复用的组件,每个组件有自己的数据、模板和逻辑。
- 虚拟DOM:通过虚拟DOM技术,在内存中构建整个DOM树结构,减少真实DOM的操作,提高性能和效率。
MVVM
M 模型(Model):
- 模型代表应用程序的数据和业务逻辑。
- 它是应用程序的数据源,负责获取和更新数据,以及定义业务逻辑的操作。
V 视图(View):
- 视图是用户界面的可见部分,它与用户进行交互并显示数据。
- 视图负责将模型中的数据显示出来,并将用户的操作反馈到视图模型。
VM 视图模型(ViewModel):
- 视图模型是视图和模型之间的中间层,负责协调视图和模型之间的数据交互和通信。
- 它将模型的数据转化为视图可用的格式,并处理视图的用户交互行为。
- 视图模型通过双向数据绑定将视图和模型连接在一起,使得数据的变化能够自动反映到视图中,并且用户的操作能够更新模型中的数据。
vue生命周期
创建阶段
- 创建前(beforeCreate):
vue实例还没有被创建,data里面的数据不可被调用; 也就是this.数据名 无效,页面仍然处于最原始的状态 - 创建后(created):
vue实例已经被创建,这个钩子函数是第一个能够访问到 data数据的钩子函数;页面仍然是最原始的状态,虚拟dom还没有开始生成;
挂载阶段
- 挂载前(beforeMount):
虚拟dom已经生成,但是还没有渲染到页面上, 但是这个钩子函数,做任何的dom操作,都不奏效;因为,在这个钩子函数里面删除的所有的dom,都已经被虚拟dom拷贝了一份 - 挂载后(mounted):
所有的dom都已经渲染到了页面上,dom是最新的;页面也是最新的; 组件的初始化已经完成了
更新阶段
- 更新前(beforeUpdate):
页面更新前,数据是最新的,但是页面还是旧数据; - 更新后(updated):
页面的是最新的,数据也是最新的;
销毁阶段
- 销毁前(beforeDestroy):
在实例销毁前都会触发的事件; - 销毁后(destroyed):
这个生命周期是最后一次,能够调用事件以及data里面数据的钩子函数 销毁后, 页面还在,页面的所有操作,都不在生效;一般在这个生命周期,做一些,停止计时器,清空内存等操作;
vue模板语法
插值表达式
插值表达式:使用双大括号{{}}将数据绑定到模板中。
指令
使用以 v- 开头的指令,如 v-bind,v-if,v-for 等来实现条件渲染、循环和绑定属性等功能。
1. v-if =“表达式” v-else-if = “表达式” v-else
<div id="app">
<div v-if="score>90"> <h2>优秀!</h2></div>
<div v-else-if="score>80"> <h2>良好!</h2> </div>
<div v-else-if="score>70"> <h2>中等!</h2> </div>
<div v-else-if="score>60"> <h2>及格!</h2> </div>
<div v-else><h2>不及格!</h2> </div>
</div>
2. v-show=“判断变量”
v-show 利用元素的display属性控制着元素的显示与隐藏
- v-if与v-show的区别:
隐藏时v-show是css方式隐藏,v-if是DOM节点直接移除,一般情况下,频繁切换显示与隐藏时使用v-show,反之使用v-if
3. v-for 循环遍历- v-for遍历普通数组
- in 前面如果是一个变量,那么该变量保存的是数组中的数据
- in 前面如果是两个变量,那么第一个变量保存的是数组中的数据,第二个变量保存的是下标
<view v-for="(item,index) in msg" :key="index+item">{{item}}</view>
- v-for遍历对象
- in 前面如果是一个变量,那么保存的是对象中的属性值
- in 前面如果是两个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名
- in 前面如果是三个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名,第三个变量保存的是下标
<view v-for="(d,c) in list">{{c}}:{{d}}</view>
- v-for循环数字
- in 后面不仅可以放数组、对象数组、对象,还可以放数字
- 在 in 前面用一个变量存储当前次数,注意:变量是从1开始,而不是从0开始
<view v-for="item in 3" :key="item">{{item}}</view>
注意:
- v-if 和 v-for 可以一起使用吗?
答:不建议一起使用,当v-for 和 v-if 出现在同一节点时,会先执行v-for,再执行v-if,会造成资源的浪费。 - 为什么v-for要加key值? (key值必须在兄弟元素之间是唯一的)
答:key优化虚拟dom 的diff算法,优化列表筛选排序更新的操作。
4.v-text指令
v-text:更新元素的文本内容。
<span v-text="msg"></span>
<span>{{msg}}</span>
5.v-html指令
可以将包含HTML标签的字符串作为数据绑定到指定的元素上,并让元素以HTML解析方式展示该字符串。
<p v-html="htmlContent"></p>
6.v-once指令
v-once用于指定元素或者组件只渲染一次
当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并且跳过;
7.v-bind指令
v-bind 用于绑定元素的属性或组件的 props 到 Vue 实例的数据。可直接写为:
- v-bind:属性=“值” ——> :属性=“值”
<img :src="imageUrl">
8.v-on指令
v-on用于监听DOM事件或自定义事件,并触发对应的方法。可直接写为@
<button @click="handleClick">点击我</button>
9.v-model指令
v-model:用于在表单元素和 Vue 实例之间双向绑定数据。
<input v-model="username" type="text">
表单双向绑定
- v-model=“msg” 可以视为 :value=“msg” @click=“msg=$event” 的简写
表单绑定修饰符
- .lazy:默认情况下,v-model指令在input事件中同步输入框的值到数据。使用.lazy修饰符可以转变为在change事件中同步输入框的值到数据。
<input v-model.lazy="message" type="text">
- .number:将输入值转成数值类型。
<input v-model.number="score">
- .trim:自动过滤首尾空格。
<input v-model.trim="username" type="text">
组件通信
1. 父传子
使用props:
通过props可以将父组件的数据传递给子组件,并在子组件中使用这些数据。在父组件中使用子组件时,可以通过属性的方式将数据传递给子组件。
2.子传父
使用事件:
通过事件可以在子组件中触发并向父组件传递参数。在子组件中,通过$emit方法触发自定义事件,并传递参数。
3.ref引用自组件
4. $parents, $children 获取当前组件的父组件和当前组件的子组件
5.provide,inject
父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。
路由和状态管理
路由管理
路由管理:通过vue-router实现单页面应用中的路由功能,进行页面的切换和导航。
- router-link:用于生成导航链接,通过to属性指定要跳转的路径。
- router-view:用于渲染匹配到的路由组件。
- 在组件中可以通过this.$ router访问路由实例,以及通过this.$route获取当前路由的信息。
状态管理
通过vuex实现管理全局状态,在组件之间进行状态共享和传递,可以更好集中管理数据,多个组件共享数据,其中vuex主要有以下组件:
- 存储数据的state
- 修改数据唯一方式 mutations
- 异步操作的Actions
- 模块:module
- 映射方法:getters