一、Vue核心
模板语法
1.插值语法：
功能: 用于解析标签体内容
语法: {{xxx}} ，xxxx 会作为js表达式解析
2.指令语法：
功能: 解析标签属性、解析标签体内容、绑定事件
Vue 中有有很多的指令，v-bind 举个例子
数据绑定
1.单向数据绑定：
语法：v-bind:href = "xxx" 或简写为 :href
特点：数据只能从 data 流向页面
2.双向数据绑定
语法：v-model:value="xxx" 或简写为v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data
MVVM模型
- M：模型(Model) ：对应 data 中的数据
- V：视图(View) ：模板
-
VM：视图模型(ViewModel) ： Vue 实例对象
image.png
事件处理
1.绑定监听
- v-on:xxx = "fun"
- @xxx = "fun"
- @xxx = "fun(参数)"
- 默认事件形参：event
- 隐含属性对象 $event
2.事件修饰符 - .prevent : 阻止事件的默认行为 event.preventDefault()
- .stop : 停止事件冒泡event.stopPropagation()
- 按键修饰符
- keycode:操作的是某个keycode值的键
- keyName：操作的是某个按键名的键
计算属性与监视
1.计算属性-computed
- 要显示的数据不存在，要通过计算得来。
- 在 computed 对象中定义计算属性。
- 在页面中使用{{方法名}}来显示计算的结果。
2.监视属性-watch - 通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算
class与style绑定
在应用界面中, 某个(些)元素的样式是变化的， class/style 绑定就是专门用来实现动态样式效果的技术
1.class绑定：
- :class='xxx'
- 表达式是字符串: 'classA'
- 表达式是对象: {classA:isA, classB: isB
- 表达式是数组: ['classA', 'classB']
2.style绑定：
- :style="{ color: activeColor, fontSize: fontSize + 'px' }"
- 其中 activeColor/fontSize 是 data 属性
条件渲染
1.条件渲染指令:
- v-if v-else
- v-show
2.比较v-if 与 v-show
如果需要频繁切换 v-show 较好,当条件不成立时, v-if 的所有子节点不会解析(项目中使用
列表渲染
遍历数组: v-for / index
遍历对象: v-for / key
过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 是产生新的对应的数据
自定义指令
注册全局指令：
Vue.directive('my-directive', function(el, binding){el.innerHTLM = binding,value.toupperCase()})注册局部指令：
directives:{}使用指令：
v-my-directive = 'xxx'
Vue 实例生命周期
初始化显示：
beforeCreate()
created()
beforeMount()
mounted()更新状态：this.xxx=value
beforeUpdate()
updated()销毁vue实例：vm.$destory()
beforeDestory()
destoryed()
二、vue组件化编程
模块与组件
模块：
向外提供特定功能的js程序，一般就是一个js文件组件
用来实现局部功能效果的代码集合（html/css/js/image...）非单文件组件：
模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用
单文件组件
- 模板页面
template - js模块对象
script - 样式
style
基本使用：
引入组件、映射成标签、使用组件标签
三、使用Vue脚手架
Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
全局安装 npm install -g @vue/cli
创建项目 vue create xxxx
启动项目 npm run serve
-
模板项目的结构
image.png
ref与props
ref
作用：用于给节点打标识
读取方式：this.$refs.xxxxprops
作用：用于父组件给子组件传递数据
读取方式：
只指定名称：
props: ['name', 'age', 'setName']
指定名称和类型：
props: {
name: String, age: Number, setNmae: Function
}
指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx}, }
混入：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
插件：
Vue 插件是一个包含 install 方法的对象
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令
Vue中的自定义事件
绑定事件监听
@method
或者 refs.xxx.$on("method",this.method)触发事件
this.$emit('method',data)Vue 原型对象上包含事件处理的方法
- $on(eventName, listener): 绑定自定义事件监听
- $emit(eventName, data): 分发自定义事件
- $off(eventName): 解绑自定义事件监听
- $once(eventName, listener): 绑定事件监听, 但只能处理一次
全局事件总线
- 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
- Vue.prototype.
bus 这个属性对象
- Vue.prototype.
- 指定事件总线对象
new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.mount('#root')
绑定
this.on('deleteTodo', this.deleteTo
分发
this.
解绑
this.
消息订阅与发布
它包含以下操作:
(1) 订阅消息 --对应绑定事件监听
(2) 发布消息 --分发事件
(3) 取消消息订阅 --解绑事件监听
过度与动画
操作 css 的 trasition 或 animation
vue 会给目标元素添加/移除特定的 class
过渡的相关类名：
- xxx-enter-active: 指定显示的 transition
- xxx-leave-active: 指定隐藏的 transition
- xxx-enter/xxx-leave-to: 指定隐藏时的样式
四、Vue中的ajax
解决开发环境 Ajax 跨域问题
使用代理服务器
vue 项目中常用的 2 个 Ajax 库
- axios
- vue-resource
slot 插槽
父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用
slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。
- 默认插槽
- 命名插槽
- 作用域插槽
五、vuex
概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应
用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方
式，且适用于任意组件间通信。
Vuex 工作原理图
state
是vuex管理的状态对象，他应该是唯一的
actions
值为一个对象，包含多个响应用户动作的回调函数
通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
如何触发 actions 中的回调？
在组件中使用: $store.dispatch('对应的 action 回调名') 触发
可以包含异步代码（定时器, ajax 等)
mutations
值是一个对象，包含多个直接更新 state 的方法
谁能调用 mutations 中的方法？如何调用？
在 action 中使用：commit('对应的 mutations 方法名') 触发
mutations 中方法的特点：不能写异步代码、只能单纯的操作 state
getters
值为一个对象，包含多个用于返回数据的函数
如何使用？—— $store.getters.xxx
modules
- 包含多个 module
- 一个 module 是一个 store 的配置对象
- 与一个组件（包含有共享数据）对应
六、vue-router
vue 的一个插件库，专门用来实现 SPA 应用
路由的理解
- 什么是路由?
- 一个路由就是一组映射关系（key - value）
- key 为路径, value 可能是 function 或 component
- 路由分类
后端路由：
- 理解：value 是 function, 用于处理客户端提交的请求。
- 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
来处理请求, 返回响应数据。
前端路由： - 理解：value 是 component，用于展示页面内容。
- 工作过程：当浏览器的路径改变时, 对应的组件就会显示。
编写使用路由的 3 步
- 定义路由组件
- 注册路由
- 使用路由
七、Vue UI 组件
移动端常用 UI 组件库
- Vant https://youzan.github.io/vant
- Cube UI https://didi.github.io/cube-ui
- Mint UI http://mint-ui.github.io
PC 端常用 UI 组件库
- Element UI https://element.eleme.cn
- IView UI https://www.iviewui.c
