第 1 章:Vue 核心
1.1 Vue 简介
1.1.1 官网
英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/
1.1.2 介绍与描述
动态构建用户界面的渐进式JavaScript 框架
作者: 尤雨溪
1.1.3 Vue 的特点
遵循MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注UI, 也可以引入其它第三方库开发项目
1.1.4 与其它JS 框架的关联
借鉴Angular 的模板和数据绑定技术
借鉴React 的组件化和虚拟DOM 技术
1.1.5 Vue 周边库
vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于vue 的UI 组件库(PC 端)
......
1.2 初识Vue
1.3 模板语法
1.3.1 效果
1.3.2 模板的理解
html 中包含了一些JS 语法代码,语法分为两种,分别为:
插值语法(双大括号表达式)
指令(以v-开头)
1.3.3 插值语法
功能: 用于解析标签体内容
语法: {{xxx}} ,xxxx 会作为js 表达式解析
1.3.4 指令语法
功能: 解析标签属性、解析标签体内容、绑定事件
举例:v-bind:href = 'xxxx' ,xxxx 会作为js 表达式被解析
说明:Vue 中有有很多的指令,此处只是用v-bind 举个例子
1.4 数据绑定
1.4.1 效果
1.4.2 单向数据绑定
语法:v-bind:href ="xxx" 或简写为:href
特点:数据只能从data 流向页面
1.4.3 双向数据绑定
语法:v-mode:value="xxx" 或简写为v-model="xxx"
特点:数据不仅能从data 流向页面,还能从页面流向data
1.5 MVVM 模型
M:模型(Model) :对应data 中的数据
V:视图(View) :模板
VM:视图模型(ViewModel) : Vue 实例对象
1.6 事件处理
1.6.1 效果
1.6.2 绑定监听
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
1.6.3 事件修饰符
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
1.6.4 按键修饰符
keycode : 操作的是某个keycode 值的键
.keyName : 操作的某个按键名的键(少部分)
1.7 计算属性与监视
1.7.1 效果
1.7.2 计算属性-computed
要显示的数据不存在,要通过计算得来。
在computed 对象中定义计算属性。
在页面中使用{{方法名}}来显示计算的结果。
1.7.3 监视属性-watch
通过通过vm 对象的$watch()或watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
1.8 class 与style 绑定
1.8.1 理解
在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术
1.8.2 class 绑定
:class='xxx'
表达式是字符串: 'classA'
表达式是对象: {classA:isA, classB: isB}
表达式是数组: ['classA', 'classB']
1.8.3 style 绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize 是data 属性
1.9 条件渲染
1.9.1 条件渲染指令
v-if 与v-else
v-show
1.9.2 比较v-if 与v-show
如果需要频繁切换v-show 较好
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
1.10 列表渲染
1.10.1 效果
1.10.2 列表显示指令
遍历数组: v-for / index
遍历对象: v-for / key
1.11 收集表单数据
1.12 过滤器
1.12.1 效果
1.12.2 理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 是产生新的对应的数据
1.13 内置指令与自定义指令
1.13.1 常用内置指令
v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }
1.13.2 自定义指令
注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2. 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
使用指令
v-my-directive='xxx'
1.14 Vue 实例生命周期
1.14.1 效果
1.14.2 生命周期流程图
1.14.3 vue 生命周期分析
初始化显示
beforeCreate()
created()
beforeMount()
mounted()
2. 更新状态: this.xxx = value
beforeUpdate()
updated()
3. 销毁vue 实例: vm.$destory()
beforeDestory()
destoryed()
1.14.4 常用的生命周期方法
mounted(): 发送ajax 请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
第 2 章:Vue 组件化编程
2.1 模块与组件、模块化与组件化
2.1.1 模块
理解: 向外提供特定功能的 js 程序, 一般就是一个js 文件
为什么: js 文件很多很复杂
作用: 复用js, 简化js 的编写, 提高js 运行效率
2.1.2 组件
理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率
2.1.3 模块化
当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。
2.1.4 组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,
2.2 非单文件组件
模板编写没有提示
没有构建过程, 无法将ES6 转换成ES5
不支持组件的CSS
真正开发中几乎不用
2.3 单文件组件
2.3.1 一个.vue 文件的组成(3 个部分)
模板页面
<template>
页面模板
</template>
2. JS 模块对象
<script> export default {
data() {
return {
}
},
methods: {},
computed: {},
components: {}
}
</script>
3. 样式
<style>
样式定义
</style>
2.3.2 基本使用
引入组件
映射成标签
使用组件标签
第3 章:使用Vue 脚手架
3.1 初始化脚手架
3.1.1 说明
Vue 脚手架是Vue 官方提供的标准化开发工具(开发平台)。
最新的版本是4.x。
3.1.2 具体步骤
第一步(仅第一次执行):全局安装@vue/cli。
npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
第三步:启动项目
npm run serve
备注:
如出现下载缓慢请配置npm 淘宝镜像
npm config set registry https://registry.npm.taobao.org
Vue 脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpakc 配置,请执行:
vue inspect > output.js
3.1.3 模板项目的结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
3.2 ref 与props
3.2.1 ref
作用:用于给节点打标识
读取方式:this.$refs.xxxxxx
3.2.2 props
作用:用于父组件给子组件传递数据
读取方式一: 只指定名称
props: ['name', 'age', 'setName']
读取方式二: 指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
读取方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
3.3 混入
Vue 插件是一个包含install 方法的对象
通过install 方法给Vue 或Vue 实例添加方法, 定义全局指令等