1、回顾
-
创建项目 vue create myapp
-
准备 scss 库
-
修改了页面的主结构 App.vue 构建页面的基本结构
-
分离页面主结构，创建各个页面组件 views
views/home/index.vue + views/home/store.js
-
配置各个页面的路由结构 router/index.js
-
App.vue 中添加路由视图
-
页面底部导航添加点击链接
-
配置UI库 - vant 、 mint-ui / element-ui 、iview
-
结合状态管理器 编写 每一个页面的业务逻辑
-
项目打包 cnpm run build ---- dist文件夹
day04/myapp
2、slot分发内容 -- 插槽
**组件中内容是显示还是不显示，在哪里显示，如何显示，这就是内容分发所干的活
**
默认情况下，调用组件时，内部写内容是不会显示的，如果想要显示，就需要使用到插槽
// 定义组件
<template>
<header class="header">
<ul>
<li>左</li>
<li>中</li>
<li>右</li>
</ul>
</header>
</template>
// 使用组件
<Header>
你好！！！！！
</Header>
浏览器中并未显示 你好！！！！！
定义组件添加 slot 标签，可以使组件的内容显示
// 定义组件
<template>
<header class="header">
<ul>
<li>左</li>
<li>
<!-- +++++++++++++++++++++++++++++ -->
<slot>中</slot>
</li>
<li>右</li>
</ul>
</header>
</template>
// 使用组件
<Header>
你好！！！！！
</Header>
<Header></Header>
第一个中间显示 您好！！！！ 第二个中间显示的是默认的 中
如果组件的结构都需要 可 自定义传递 ----- 具名插槽
// 定义组件
<header class="header">
<ul>
<li>
<slot name="left">左</slot>
</li>
<li>
<slot>中</slot>
</li>
<li>
<slot name="right">右</slot>
</li>
</ul>
</header>
// 使用组件
<Header>
你好！！！！！
</Header>
<Header></Header>
<Header>
<div slot="left" @click="clickLogo">logo</div>
<div>首页</div>
<div slot="right">扫一扫</div>
</Header>
<Header>
<div slot="left" @click="back">返回</div>
<div>详情</div>
<div slot="right">分享</div>
</Header>
可以给各个组件添加不同的事件
组件中内容是显示还是不显示，在哪里显示，如何显示，这就是内容分发所干的活
一般在 自定义组件 和 UI 库使用时居多，可以提高组件的 复用性
3、ref
可以获取DOM节点
<template>
<div class="home">
<h1 ref="title" id="title">标题</h1>
<p ref="desc" id="desc">段落描述</p>
<button @click="getDOM">获取DOM节点</button>
</div>
</template>
<script>
export default {
methods: {
getDOM () {
console.log(document.getElementById('title'))
console.log(document.getElementById('desc'))
console.log('----------------------')
console.log(this.$refs.title)
console.log(this.$refs.desc)
}
}
}
</script>
获取子组件的数据
<template>
<div class="home">
<Reftest ref="test" />
<button @click="getData">获取子组件的数据</button>
</div>
</template>
<script>
import Reftest from '@/components/Reftest'
export default {
components: {
Reftest
},
methods: {
getData () {
console.log(this.$refs.test.msg)
}
}
}
</script>
4、$parent
子组件可以直接获取父组件中的数据和方法
<template>
<div>
<button @click="getData">子组件直接获取父组件的数据</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'child-----------------------------'
}
},
methods: {
getData () {
// ++++++++++++++++++++
console.log(this.$parent.message)
}
}
}
</script>
5、混入mixins
组件中的相同部分抽离为一个 js 模块，使用组件的混入选项导入即可,如果有相同的部分，以组件的选项为主
mixins/header.js
import Header from '@/components/Header'
export default {
components: {
Header
},
methods: {
userFn () {
console.log('个人中心')
}
}
}
Home.vue
<template>
<div class="home">
<Header>
<div>首页</div>
<div slot="right" @click="userFn">我的</div>
</Header>
</div>
</template>
<script>
import header from '@/mixins/header'
export default {
mixins: [header]
}
</script>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<Header>
<div>关于</div>
<div slot="right" @click="userFn">我的</div>
</Header>
</div>
</template>
<script>
import header from '@/mixins/header'
export default {
mixins: [header],
methods: {
userFn () {
console.log('about - 个人中心')
}
}
}
</script>
简化组件的代码 ----- 提交组件的复用性
6、自定义指令
- v-model/v-if/v-else-if/v-else/v-show/v-for/v-on/v-bind.....
<input type="text" autofocus/>
- 自定义指令实现 自动获取焦点
全局的自定义指令 Vue.directive() ---- main.js
Vue.directive('focus', { // 此处不是一个函数
// 当被绑定的元素插入到 DOM 中时……
inserted: (el) => { // el代表DOM元素
el.focus() // js操作DOM
}
})
局部的自定义指令 { directives: {}} -- 哪里使用哪里定义 --- Home.vue
export default {
directives: {
'focus': {
inserted: (el) => {
el.focus()
}
}
}
}
使用指令 v-name name为自定义指令的名称
<input type="text" v-focus>
7、过滤器
全局过滤器 --- main.js
Vue.filter('sexFilter', (val) => {
return val === 0 ? '女' : '男'
})
局部过滤器 --- 哪里使用哪里定义 --- Home.vue
filters: {
lessonFilter (val) {
return val === 1 ? '一阶段' : val === 2 ? '二阶段' : '三阶段'
}
}
使用 {{ val | filtername }}
8、路由的过渡效果
页面间切换效果
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- transition 包裹 设置name值，设置css -->
<transition name="slide">
<router-view/>
</transition>
</div>
</template>
<style lang="scss">
* { padding: 0; margin: 0; list-style: none}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-enter {
// 定义进入过渡的开始状态
transform: translateX(100%);
}
.slide-enter-active {
// 定义进入过渡的开始状态
transition: all 300ms;
}
.slide-enter-to {
// 完全进入
transform: translateX(0%);
}
.slide-leave {
// 开始离开
transform: translateX(0%);
}
.slide-leave-active {
transition: all 0;
}
.slide-leave-to {
transform: translateX(-100%);
}
</style>
9、nextTick
- 状态改变，视图渲染，实际上DOM节点的值并未及时发生改变，使用nextTick可以解决此问题
<template>
<div class="home">
<div ref="test"> {{ count }} </div>
<button @click="getData">加1获取div的值</button>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
getData () {
this.count++
// console.log(this.$refs.test.innerHTML) // 是上一次的DOM节点的值
this.$nextTick(() => {
console.log(this.$refs.test.innerHTML)
})
}
}
}
</script>