自定义指令-基础语法p61
自定义指令:自己定义的指令,可以封装一些dom操作,拓展额外功能
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 1.全局注册定义
Vue.directive('focus',{
//inserted会在指令所在的元素,被插入到页面中时触发
inserted(el){
//el就是指令所绑定的元素
el.focus()
}
})
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div class="app">
<BaseSelect ></BaseSelect>
<input v-focus ref="inp" type="text">
</div>
</template>
<script>
import BaseSelect from "./components/BaseSelect.vue";
export default {
directives:{
// 2.局部注册定义
focus:{
}
},
methods:{
},
components: {
BaseSelect,
},
};
</script>
<style>
</style>
自定义指令-指令的值
- 语法:在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值
- 通过binding.value可以拿到指令值,指令值修改会触发update函数
<template>
<div v-color="color1">wdf</div>
</template>
<script>
export default {
data() {
return {
color1: "red",
};
},
directives: {
color: {
// 1.inserted提供的是元素被添加到页面中时的逻辑
inserted(el, binding) {
// binding.value就是指令
el.style.color = binding.value;
},
// 2.update指令的值修改的时候触发,提供值变化时,dom更新的逻辑
updata(el, binding) {
el.style.color = binding.value;
},
},
},
};
</script>
<style>
</style>
自定义指令-v-loading指令封装p63
场景:实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态-用户体验不好
需求:封装一个v-loading指令,实现加载中的效果
插槽-默认插槽p64
作用:让组件内部的一些结构支持自定义
需求:要在页面中显示一个对话框,封装成一个组件
插槽基本语法:
- 组件内需要定制的结构部分,改用占位
- 使用组件时,组件标签内填入内容,传入结构替换slot
插槽-后备内容(默认值)p65
语法:slot标签里放置内容,作为默认显示内容
(外部不传默认显示,外部传了就替换默认)
插槽-具名插槽p66
需求:有多处结构需要定制插槽
语法:
- slot加个name属性
- template配合v-slot对应标签
v-slot:xx和slot的name的值对应
插槽-作用域插槽p67
作用域插槽是插槽的一个传参语法,定义slot插槽的同时可以传值,给插槽绑定数据
通过tamplate #插槽名=“变量名”接收,(obj接收的是一整个对象)
单页应用程序和路由介绍p72
单页面应用(spa):所有应用在一个html页面上实现
单页面应用优缺点
- 优点:按需更新性能高,开发效率搞,用户体验好(页面按需更新:明确访问路线和组件的对应关系-路由)
- 缺点:学习成本,首屏加载慢,不利于SEO
应用场景:系统类/内部/文档类/移动端网页或站点
路由
vue中的路由是路径和组件的映射关系
根据路由能知道不同路径的,应该匹配渲染哪个组件
路由的基本使用p73
VueRouter的介绍
是Vue官方的一个路由
作用:修改地址栏路径时,切换显示匹配的组件
2个核心步骤
- 创建需要的组件(views目录),配置路由规则
- Find.vue
- My.vue
- Friend.vue
- 配置导航,配置路由出口(路径path匹配的组件component显示的位置)
<template>
<div>
<a href="#/sb"></a>
<div>
<!-- 路由出口-匹配组件所展示的位置,可以改到上下 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
import Vue from 'vue'
import App from './App.vue'
import Sb from './views/Sb'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//vuerouter插件初始化
const router = new VueRouter({
//routes路由规则们
routes:{
path:'/sb',component:Sb
}
})//创建路由对象
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:router//这样可以简写成router
}).$mount('#app')
要求多个单词可以改name
export default {
name:'WhatSb'
}
组件存放分类问题(组件分类)p74
.vue文件分2类:页面组件&复用组件
- 页面组件-views文件夹-配合路由,页面展示
- 复用组件-components文件夹-封装复用