一、Vue
1. 简介
-
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 JavaScript 框架
-
它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型
-
由个人维护:尤雨溪,华人
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 Language Features
、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)是用来监视数据的变化,对数据进行监控
XML
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实例,可以将项目中重复出现的页面结构定义为组件
组件会带有一个名称,可以把组件作为自定义元素来使用,相当于是自定义了一个标签
组件分类:
-
全局组件,在所有Vue实例中都可以使用
-
局部组件,只能在构建组件的 Vue实例的容器范围内使用
2. 定义组件
通过选项 components:{}
来定义
用法:
XML
new Vue({
el: '#app',
components: {
'comp-a': {
template: '<h3>{{ msg }}</h3>',
data() {
return {
msg: "aaa"
}
}
}
}
})
九、组件间数据传递
1. 组件间的关系
页面组件的关系结构,是一个由许多组件构成的树状结构,组件间存在着两种关系:父子关系、非父子关系
默认情况下,每个组件实例都是独立的,组件间无法直接访问数据,因此需要进行组件间的数据传递,也称为组件间的通信
2. 父子组件间的数据传递
2.1 父向子传递数据
技术:属性绑定+数据拦截
步骤:
-
父组件在调用子组件时,以属性绑定的方式将要传递的数据绑定在子组件标签上
-
在子组件对象中,使用
props
选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据
2.2 子向父传递数据
技术:事件监听+事件触发
步骤:
-
父组件在调用子组件时,监听子组件触发的自定义事件,并在父组件中定义回调方法,用来接收数据
-
在子组件中使用
vm.$emit(事件名,数据)
触发自定义事件