一、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 实例对象
事件处理
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
-
模板项目的结构
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.[图片上传失败...(image-8e9536-1653963322386)]
bus 这个属性对象
-
Vue.prototype.[图片上传失败...(image-89aab5-1653963322386)]
bus 这个属性对象
-
指定事件总线对象
new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.[图片上传失败...(image-77e986-1653963322386)]mount('#root')
绑定
this.[图片上传失败...(image-7ace7-1653963322386)]on('deleteTodo', this.deleteTo
分发
this.[图片上传失败...(image-735826-1653963322386)]emit('deleteTodo', this.index
解绑
this.[图片上传失败...(image-c1022d-1653963322386)]emit('deleteTodo', this.index
消息订阅与发布
它包含以下操作:
(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 步
- 定义路由组件
- 注册路由
- 使用路由