Vue基础
一、Vue
1. 简介
-
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 JavaScript 框架
-
它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型
-
由个人维护:尤雨溪,华人
-
官网 https://cn.vuejs.org/
2. 基本使用
Vue的页面使用方式:
- 在页面中直接引入Vue核心库的js文件
- 该方式只是为了让开发者在学习Vue语法时可以快速掌握
- 实际上Vue并不适合直接使用 页面方式进行语法定义,更推荐使用模块化方式
使用步骤:
-
获取Vue核心库的js文件
-
在页面中引入Vue
<script src="js/vue.js"></script>
-
创建Vue实例并应用
3. 调试工具
安装vue-devtools插件,便于在Chrome浏览器中调试vue
步骤:
- 打开Chrome浏览器的扩展程序——>更多扩展程序
- 将
vue_devtools_6.5.0.crx
拖放到扩展程序中
在VSCode中安装Vue相关插件:Vue-Official
、vue-helper
二、基本交互
1. 插值表达式
语法: {{ }}
由两对大括号组成,称为“Mustache”语法
作用:用于在页面标签中插入值,进行数据的绑定显示,且当值发生变化时标签会重新渲染加载,称为响应式特性,即数据状态同步操作
用法:<标签>{{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}</标签>
只能用在标签中间的内容位置
2. 指令
2.1 简介
指令 (Directives)是用来扩展html标签的功能,以v-
作为前缀
2.2 常用指令
指令 | 取值 | 作用 |
---|---|---|
v-text | string | 更新元素的textContent |
v-html | string | 更新元素的innerHTML |
v-on | Function | Object | Array | 行内表达式 | 绑定事件监听器,用于事件绑定 |
v-show | any | 根据表达式的boolean结果,切换元素的 display CSS 属性,控制元素的显示隐藏 |
v-if、v-else-if、v-else | any | 根据表达式的boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏 |
v-for | Array | Object | number | string | 基于数据多次渲染元素或模板块,用于循环数据 |
v-bind | any | 动态的为标签绑定属性,用于属性绑定 |
3. 双向数据绑定
v-model双向数据绑定指令
- 取值:随表单控件类型不同而不同
- 限制:仅限于表单中可输入或者可选择的元素,如
<input>
、<select>
、<textarea>
四、数据控制
1. 计算属性
计算属性(computed)也是用来存储属性数据的,但具有以下特点:
- 可以对数据进行逻辑处理操作,实现数据包装
- 计算属性通常依赖于当前Vue对象中的普通属性
- 当依赖的普通属性发生变化时计算属性也会变化,实现数据监控
2. 监视器
监视器(watch)是用来监视数据的变化,对数据进行监控
new Vue({
watch: {
变量:function(newValue, oldValue){}, // 监控方法
变量:{
handler: function(newValue, oldValue){}, // 监控方法
deep: true // 开启深度监视
}
},
})
五、实例属性和方法
1. 简介
通过Vue实例对象可以直接访问的属性和方法,称为实例属性和实例方法
实例属性和方法都以 $
开头
2. 实例属性
- vm.$el:当前Vue实例使用的根 DOM 元素
- vm.$refs:当前Vue实例容器中定义了ref属性的所有 DOM 元素
3. 实例方法
- vm.$mount:手动挂载Vue实例
- vm.$destroy:销毁Vue实例,只会销毁vue的实例对象,不会销毁与其关联的页面容器
- vm.$nextTick:在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM并操作
六、模板
模板(template)就是定义Vue时指定的页面结构构成
- 默认使用
el
选项指定的挂载元素的内容来构成页面模板,同时指定挂载位置 - 可以使用
template
选项独立定义页面模板,此时el挂载元素的内容将被忽略
七、生命周期
Vue实例从创建到销毁的过程,称为生命周期,共有八个阶段:
- beforeCreate、created
- beforeMount 、mounted
- beforeUpdate、updated
- beforeDestroy、destroyed
在生命周期的每个阶段都提供了相应的钩子函数,可以在钩子函数中执行操作,控制生命周期的各个阶段
八、组件
1. 简介
Component 组件是可复用的Vue实例,可以将项目中重复出现的页面结构定义为组件
组件会带有一个名称,可以把组件作为自定义元素来使用,相当于是自定义了一个标签
2. 定义组件
通过选项 components:{}
来定义
用法:
new Vue({
el: '#app',
components: {
'comp-a': {
template: '<h3>{{ msg }}</h3>',
data() {
return {
msg: "aaa"
}
}
}
}
})
九、组件间数据传递
1. 组件间的关系
页面组件的关系结构,是一个由许多组件构成的树状结构,组件间存在着两种关系:父子关系、非父子关系
默认情况下,每个组件实例都是独立的,组件间无法直接访问数据,因此需要进行组件间的数据传递,也称为组件间的通信
2. 父子组件间的数据传递
2.1 父向子传递数据
技术:属性绑定+数据拦截
步骤:
- 父组件在调用子组件时,以属性绑定的方式将要传递的数据绑定在子组件标签上
- 在子组件对象中,使用
props
选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据
2.2 子向父传递数据
技术:事件监听+事件触发
步骤:
- 父组件在调用子组件时,监听子组件触发的自定义事件,并在父组件中定义回调方法,用来接收数据
- 在子组件中使用
vm.$emit(事件名,数据)
触发自定义事件