基础
一套构建用户界面的渐进式js框架
组件化、声明式、虚拟dom+diff
Vue.config
const vm = new Vue({
el:'',
data: {},
methods: {}
})
插值语法 {{}}
指令语法
- v-bind: —> :
- v-on: —> @
- 调用和函数名一个效果
- 事件修饰符
@eventName.prevent/.stop/.once/.capture/.self/.passive - 键盘事件
@keyup.enter/.delete/.esc/.space/.tab/.up/.down/.left/.right
@keydown
- v-if
- v-show
- v-for
响应式原理
数据劫持：getter、setter
- Vue2
ES5 Object.definePropperty() - Vue3
ES6 proxy数据代理
methods 计算属性
computed: { //缓存
name: {
get(){return },
set(){}
},
name() {
return
}
}
监视器
watch: {
name: {
deep:boolean, //深度检测
immediate:boolean
handler(new,old){}
}
}
过滤器：
使用 val | fun
filter: {
function(val) {
return v
}
}
或者全局设置
Vue.filter(fun, function(){})
内置命令
- v-text
- v-html
- v-cloak v-cloak指令解决vue屏幕闪屏
vue编译之前隐藏不显示,与css结合使用
<div v-cloak>{{data}}</div>
[v-cloak] {
display: none;
}
- v-once 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
- v-pre 可以让元素及元素的子元素不编译解析，这样可以加快vue的解析速度
<div>
{{n}} //最后显示:{{n}}
</div>
自定义指令
directives: {
name: {
bind(){}//绑定时调用
inserted(){}//指令所在元素插入页面时
update(){}//指令所在模版重新渲染时
},
name2(elem, val) {
}
}
- 全局定义
Vue.directive(name,{}//function(){})
生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
组件
- 创建组件
Vue.extend({}) - 注册组件
new Vue({
el:"#app",
components: {
name:name
}
})
- 单文件组件SPA
仅在Web页面初始化时加载对应的html、js、css；不会因为用户操作重新加载或者跳转；利用路由机制实现html页面变化。- 优点
用户体验好，避免重复加载以及跳转
减少跳转，减少服务端压力
前后端分离，架构清晰，前端进行交互逻辑，后端进行对数据处理 - 缺点
首次加载（初始化）耗时
不能使用浏览器的前进后退
不利于搜索引擎SEO - 首屏加载慢优化
减少入口文件
静态资源本地化
图片压缩
精灵图使用
UI组件按需引入
使用SSR
组件重复打包
- 优点
- 多文件组件
- VueComponent
- 内置关系： VueComponent.prototype.proto === Vue.prototype
- 单文件组件.vue
- 组件间传参
- 父传子
- props
父组件
子组件<Child :params="params"> </Child>export default { name: "Child", props: ['params'] }; - $emit
父组件
子组件<Child @onEmitter="fn"> </Child>export default { name: "Child", methods: { fnChild(args) { this.$emit('fn', args) } } }; - $parent / c h i l d r e n t h i s . children this. childrenthis.parent.prop
- 子传父
- ref/$refs
父组件
<Child ref="child"></Child> export default { components: { Child }, mounted () { this.$refs.child.propName;//通过$refs.child获取子组件上信息 } } ``` - $parent / $children this.$children[i].prop //children是一个数组
- 多层级组件间传参
- 依赖注入 provide / inject （非响应式）
provide：发送数据
provide() {return {}}
inject：接受数据
inject:[] - $attrs / $listeners
a t t r s : 包含了父作用域除开 p r o p s 的属性，可通过 v − b i n d = " attrs:包含了父作用域除开props的属性，可通过v-bind=" attrs:包含了父作用域除开props的属性，可通过v−bind="attrs"传递给子组件
l i s t e n e r s : 包含父作用域除开 . s y n c 修饰的 v − o n 事件，可通过 v − o n = " listeners:包含父作用域除开.sync修饰的v-on事件，可通过v-on=" listeners:包含父作用域除开.sync修饰的v−on事件，可通过v−on="listeners"传递给子组件
- 依赖注入 provide / inject （非响应式）
- 兄弟间组件传参
- $parent + $refs
- 任意组件间传参
- eventBus事件总线
//调用beforeCreate() { //全局定义 Vue.prototype.$bus= this; }注册：this.$bus.$on('',()=>{}); 调用：this.$bus.$emit('fun', parms); 注销：this.$bus.$off('fun') ``` - 消息订阅发布PubSubJS 库 1. 订阅消息：消息名 2. 发布消息：消息内容 3. 安装：npm i pubsub-js 4. 使用： import pubsub from "subpub-js" pubsub.subscribe(name, ()=>{}) pubsub.pubscribe(name) pubscribe.unscribe('') - vuex
vue-cli
安装
- Vue2
npm install vue-cli -g
vue create name
cd name
npm install
npm run start - vue3
npm create vue@latest
cd name
npm install
npm run dev
render函数渲染
默认配置
webpack.config.js 通过运行 vue inspect >out.js 在新生成的out.js显示
ref属性
ref="name" => this.refs.name(获取组件属性)
props属性
mixin属性
两个组件共享一个配置
mixins:[] //单独抽出来的混合js对象
mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
插件
Vue.use(obj) //obj={instal(){ }}
scoped属性
浏览器存储-WebStorage
- localStorage
手动清理缓存 - sessionStorage
会话存储，关闭浏览器窗口就清除 - 方法：setItem getItem removeItem clear
自定义事件、内置事件
- 事件注册
第一种：@fun=‘’ + this. e m i t ( f u n ) 第二种： r e f = " n a m e " + t h i s . emit(fun) 第二种：ref="name" + this. emit(fun)第二种：ref="name"+this.refs.name. o n ( f u n n a m e , t h i s . f u n ) + t h i s . on(funname, this.fun) + this. on(funname,this.fun)+this.emit(fun) - 事件取消绑定：
this.$off(‘’) - 组件销毁
this.$destory() //销毁之后自定义事件都取消绑定
动画
<trasition></trasition>
.v-enter-active{}
.v-leave-active{}
@eyframes name {
from {
transfrom:translate() //动画变化属性
}
to {
}
}
请求
xhr
jQuery
axios
fetch
安装axios
npm i axios
vueResource
跨域：
cors
jsonp
只能解决get请求的并且前后端配合
配置代理
nginx
vue-cli
使用
devServer:{
proxy:url //开启代理，在vue.config.js文件中配置，只能配置一个代理
'': { //可配置多个代理
target: url,
ws:true, //用于支持websockt
changeOrigin:true, //用于控制请求中的头中的host值
pathRewrite: {'正则匹配字符串','需要修改成'} //重写路由
}
}
插槽
提前占位，调用组件时，在确定具体内容
- 默认插槽
- 具名插槽
- 作用域插槽
slot穿参给使用者
//传参
//接受 name随意
vuex
集中式管理状态（数据）管理的一个Vue插件，也是组件间通信的一种方式，适用于任意组件间。
- 安装
vue2: npm i vuex@3
vue3: npm i vuex //(vuex最新版本只能在vue3中使用) - 引用：
import Vuex from “vuex”
Vue.use(Vuex) - 核心
- actions
- mutations
- state
- getters
将state的数据进行加工 - …mapState({a:‘a’,…})
- mapGetters
- mapActions
- mapMutations
vuex模块化 nameSpaced:true
new Vuex.Store({
modules: {
a:a,
b:b
}
})
vue-router
vue2:vue-router3
vue3:vue-router4
- 路由配置
Vue.use(VueRouter);
new VueRouter({
routes:[
{
name:'',//路由名称，跳转可直接使用路由名称不需要每层都写
path:'/',
component:'',
children:[
{
path:'', //不带/
component:''
}
]
}
]
})
结合 <router-link>（replace以及push）以及<router-view>使用
嵌套路由 children: [{}]
- 路由组件传参
- query:
获取：this.$route.query
传参-字符串形式：?key=val&
对象形式：{
path:‘’,
query: {
key:val
}
} - params：
path:‘/name/:id/:name’
this.$route.params.id - props配置:
值为对象
值为true:把params作为props传过去
值为函数
- query:
- 编程式路由导航
this.$router.push({ //replace
path:'/',
query:''
})
back
go
forward
- 缓存路由组件
<keep-alive include="需要缓存的组件名称">
<router-view></router-view>
</keep-alive>
- 生命周期
activated //激活
deactivated //失活
- 路由守卫
- 前置路由守卫
router.beforeEach((to, from, next)=>{ //to:下一个路由 from：当前路由 next();//正常往下走 })- 路由元信息 meta: {}
- 后置路由守卫
router.afterEach((to, from)=>{
//to:下一个路由 from：当前路由
}) - 独享路由守卫
beforeEnter:(to, from, next)=>{} - 组件内路由守卫
beforeRouterEnter(to,from,next){}
beforeRouterLeave(to,from,next){}
- 路由器工作模式 mode
hash:# 不带给服务器
history:没有#
异步更新渲染 nextTick
在下次DOM更新循环结束之后延迟执行调用，在数据更新之后立即执行，获取更新之后的DOM
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
