九、scoped样式管理
在新建组件时，会用到
style样式，scoped的作用就是让样式在局部生效，防止类名相同引起冲突
十、todo案例
1、思路
2、添加数据——Vue组件中按下回车键获取value值
==安装npm install nanoid，并在代码中导入并调用nanoid()函数可以生成随机的id值==
第一种：使用
event获取数据
<template>
<div>
<input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
import {
nanoid} from 'nanoid'
export default {
name:'AddMessage',
methods: {
add(event){
// 将用户的输入包装成一个todo对象
const todoObj = {
id:nanoid(),title:event.target.value,done:false)
}
}
}
</script>
第二种：使用
v-model双向绑定数据
<template>
<div>
<input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
export default {
name:'AddMessage',
data(){
return {
title:''
}
},
methods: {
add(){
// 校验数据
if(!this.title.trim()) return alert('输入不能为空')
// 将用户的输入包装成一个对象
const todoObj = {
id:nanoid(),title:this.title,done:false),
// 将输入框的数据进行清除
this.tite = ''
}
}
}
</script>
3、勾选与取消勾选
第一种写法：绑定点击事件
第二种方法：使用
v-model布尔值的点击绑定修改，但是不推荐使用，因为修改掉了props4、删除
5、统计已完成与全部完成
第一种：使用foreach循环添加【不推荐使用】
第二种，使用reduce函数实现：
reduce((函数)，初始变量接收值，类似于let i=0)
数组的长度为几，reduce中的函数部分就会调用几次。pre：上一次的值cuurrent：当前的值使用v-model，但需要get()方法和set()方法同时使用
6、清除已完成的todo
7、总结TodoList案例
==注意：vc中data、props、methods、computed中的名字不能重名==
十一、浏览器本地存储WebStorage
首先，定义几个
button1、location
2、session
十二、todoList案例中添加本地存储
十三、组件的自定义事件
1、自定义事件_绑定
组件的自定义事件需要子组件向父组件进行传递数据，父组件定义函数（带参），绑定在子组件上，子组件通过props去拿到父组件传递过来的函数进行调用并将参数传递出去，从而试下子——父组件之间的传递
父组件App.vue
除此之外还可以用ref去接受，并在mounted中去触发事件子组件Student.vue
2、自定义事件_解绑
解绑哪个事件就需要在哪个事件应用的组件上绑定解绑事件
十三、事件总线
想要在兄弟组件中互相传递数据，得用到父组件，但是非常麻烦
因此，学习事件总线可以有效的传递兄弟组件间的数据
首先在main.js文件中的实例对象vm上绑定一个事件如下
第二步在兄弟组件1——Student组件中设置方法将name通过事件总线发射出去
第三步，在兄弟组件2——School组件中的bus总线上绑定事件去接收传过来的数据
十四、消息订阅与发布
1、定义：
是一种组件间通信的方式，使用于任意组件间的通信
2、使用步骤
- 安装pubsub：
npm install pubsub-js - 引入：
import pubsub from 'pubsub-js' - 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
- 提供数据：
pubsub.publish('xxx',数据) - 最好在beforeDestroy钩子中，用
PubSub.unsubscribe(pid)取消订阅
十五、nextTick
- 语法：
this.$nextTick(回调函数) - 作用：在下一次DOM更新结束后执行其指定的回调
- 什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行
- 案例：在点击编辑下一任务时该任务取消焦点获取，下一任务获得焦点
十六、Vue中封装的过渡与动画
1、效果
向左向右过渡移动的效果
2、实现
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">{
{
msg}}</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data(){
return{
msg:'你好啊大家！',
isShow:true
}
},
}
</script>
2.1、第一种：使用动画效果实现
1、将要过渡的内容放在
<transition>标签中，添加name，在使用时对name进行过渡效果添加，添加apper表示在页面加载时开始过渡
2、在css中设置@keyframes中的移动效果
3、利用.hello-enter-active{}和.hello-leave-active{}添加进入，离开的效果
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active{
animation: tran 1s linear;
}
.hello-leave-active{
animation: tran 1s linear reverse;
}
@keyframes tran {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
2.2、第二种：使用过渡方式
2.3、第三种：使用第三方库实现过渡效果
该库的官网
第一步：安装库：npm install animate.css
第二步：导入库：import 'animated'
第三步：使用：
十七、vue脚手架配置代理
1、方法一
2、方法二
