前端学习笔记-Vue篇-03

3、使用Vue脚手架

Home | Vue CLI

3.1 具体步骤

第一步(仅第一次执行):全局安装@vue/cli npm install -g @vue/clie
第二步:切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx
第三步:启动项目npm run serve

3.2 脚手架项目的结构

-------版本一------------

|-- build : webpack 相关的配置文件夹 ( 基本不需要修改 )

|-- dev-server.js : 通过 express 启动后台服务器

|-- config: webpack 相关的配置文件夹 ( 基本不需要修改 )

|-- index.js: 指定的后台服务的端口号和静态资源文件夹

|-- node_modules

|-- src : 源码文件夹

|-- components: vue 组件及其相关资源文件夹

|-- App.vue: 应用根主组件

|-- main.js: 应用入口 js

|-- static: 静态资源文件夹

|-- .babelrc: babel 的配置文件

|-- .eslintignore: eslint 检查忽略的配置

|-- .eslintrc.js: eslint 检查的配置

|-- .gitignore: git 版本管制忽略的配置

|-- index.html: 主页面文件

|-- package.json: 应用包配置文件

|-- README.md: 应用描述说明的 readme 文件

-------版本二------------

|--node_modules

|--public

|--favicon.ico:页签图标

|--index.html:主页面

|--src

|--assets:存放静态资源

|--logo.png

|--component:存放组件

|--HelloWorld.vue

|--App.vue:汇总所有组件

|--main.js:入口文件

|--.gitignore:git版本控制忽略的配置

|--babel.config.js:babel的配置文件

|--package.json:应用描述文件

|--package-lock.json:包版本控制文件

关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别:

vue.js是完蜂版的Vue，包含:核心功能+模板解析器。
vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有板解器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement所数去指定具体内容。

3.3 ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真是的DOM元素，应用在组件标签上是组件实例对象（vc)
使用方式
- 打标识：<h1 ref="xxx">...<⁄h1>或<School ref="xxx">...<⁄School>
- 获取：this.$refs.xxx

3.4 props属性

功能:让组件接收外部传过来的数据

传递数据：

接收数据:

第一种方式(只接收):props:['name']

第二种方式(限制类型)

props:{

name :Number

}

第三种方式(限制类型、限制必要性、指定默认值):

props:{

name :{

type:string，//类型

required:true，//必要性

default:'老王’//默认值

}

}
备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

props声明方式

//简单声明接收
props:['name','age','sex]//接收的同时对数据进行类型限制
props:{name:String,age :Number,sex:String
} //接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
props:{name :{type:string，//name的类型是字符串required:true，//name是必要的}age:{type:Number,default:99 //默认值}sex:{type:string,required:true}
}

3.5 mixin混入（合）

功能:可以把多个组件共用的配置提取成一个混入对象使用方式:
第一步定义混合，例如:

{
data(){....}

methods:{....}

}
第二步使用混入，例如:
(1).全局混入:Vue.mixin(xxx)
(2).局部混入:mixins:['xxx']

如果设置了数据以自己为准，涉及到声明周期函数则以混合为准

局部混合示例：

全局混合示例：

3.6 插件

功能:用于增强Vue
本质:包含instal1方法的一个对象，insta11的第一个参数是vue，第二个以后的参数是插件使用者传递的数据。

//定义插件
对象.install =function(Vue, options){// 1.添加全局过滤器Vue.filter(....)// 2.添加全局指令Vue.directive(....)// 3.配置全局混入(合)Vue.mixin(....)// 4.添加实例方法Vue.prototype.$myMethod =function(){...}Vue.prototype.$myProperty = xxxx
}
使用插件:Vue.use()

3.7 scoped样式

作用:让样式在局部生效，防止冲突。

写法:<style scoped>

可以设置在App.vue里面，特定的样式使用。设置了scoped就代表这个样式只是在当前的使用

3.8 Todo list案例

输入任务名称，按回车键确认后新增加的任务名称出现在页面顶端，“全部”数量增加1。
勾选框摁下，“已完成”增加1。
Footer的勾选框全选，“清除已完成任务”，悬浮任务名称时出现“删除”按钮，全部任务删除完就显示List和Footer为空白。

组件化编码流程(通用)
1.实现静态组件:抽取组件，使用组件实现静态页面效果
2.展示动态数据:
2.1.数据的类型、名称是什么?
2.2.数据保存在哪个组件?
3.交互--从绑定事件监听开始

1.组件化编码流程:
        (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。

        (2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
                1).一个组件在用:放在组件自身即可。
                2).一些组件在用:放在他们共同的父组件上(状态提升)

        (3).实现交互:从绑定事件开始
2.props适用于:
        (1).父组件 ==>子组件通信
        (2).子组件 ==>父组件通信(要求父先给子一个函数)
3.使用v-model时要切记:v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

App.vue

<template>
<div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :receive="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div>
</div></template><script>import MyFooter from './components/MyFooter.vue';import MyHeader from './components/MyHeader.vue';import MyList from './components/MyList.vue';export default {name:'App',components:{MyHeader,MyList,MyFooter},data(){return {todos:[{id:'001',title:'Smoking',done:true},{id:'002',title:'Drinking',done:false},{id:'003',title:'Driving',done:true}]}},methods:{/* 添加一个todo */addTodo(todoObj){this.todos.unshift(todoObj)},/* 取消勾选一个todo */checkTodo(id){this.todos.forEach(()=>{if(todo.id === id) todo.done = !todo.done})},/* 删除一个todo */deleteTodo(id){this.todos = this.todos.filters( todo => todo.id !== id)},/* 全选 | 全取消 */checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},/* 清除已经完成的所有todo */clearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}}}
</script><style>
/*base*/
body {background: #fff;
}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;
}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}.btn-danger:hover {color: #fff;background-color: #bd362f;
}.btn:focus {outline: none;
}/*app*/
.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'MyHeader',props:['addTodo'],data(){return{title:''}},methods:{add(){/* 校验数据 */if(!this.title.trim()) return alert("Your input cannot be null!")/* 将用户的输入包装成为一个todo对象 */const todoObj = {id:nanoid(),title:this.title,done:false}/* 通知app组件去添加一个todo对象 */this.addTodo(todoObj)/* 清空输入 */this.title=''}}}
</script><style scoped>/*header*/
.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;
}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

MyList.vue

<template><ul class="todo-main"><MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo":deleteTodo="deleteTodo"></MyItem></ul>
</template><script>import MyItem from './MyItem.vue';export default {name:'MyList',components:{MyItem},props:['todos','checkTodo']}
</script><style scoped>/*main*/
.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;
}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;
}
</style>

MyItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 以下代码也可以实现，但是不建议，因为有点违反原则，修改了props，但是Vue没有检测到 --><!-- <input type="checkbox" :checked="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>export default {name:'MyItem',/* 声明接受todo对象 */props:['todo','checkTodo','deleteTodo'],methods:{/* 勾选 | 取消勾选 */handleCheck(id){/* 通知app组件将对应的todo对象的done值取反 */this.checkTodo(id)},/* 删除 */handleDelete(id){if(confirm('Are you sure to delete?')){this.deleteTodo(id)}}}}
</script><style scoped>
/*item*/
li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}li label {float: left;cursor: pointer;
}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}li button {float: right;display: none;margin-top: 3px;
}li:before {content: initial;
}li:last-child {border-bottom: none;
}li:hover{background: #ddd;
}li:hover bottom{display: block;
}
</style>

MyFooter.vue

<template><div class="todo-footer" v-show="total"><label><!-- 1.<input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" :v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name:'MyFooter',props:['todos','checkAllTodo','clearAllTodo'],computed:{total(){return this.todos.length},doneTotal(){/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) */return this.todos.reduce(pre,todo=>pre+(todo.done ? 1 : 0),0)},/* 1.isAll(){return this.doneTotal === this.total && this.total > 0} */isAll:{get(){return this.doneTotal === this.total && this.total > 0},set(value){this.checkAllTodo(value)}}},methods:{/* checkAll(e){this.checkAllTodo(e.target.checked)}, */clearAll(){this.clearAllTodo()}}}
</script><style scoped>/*footer*/
.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;
}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;
}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;
}.todo-footer button {float: right;margin-top: 5px;
}
</style>

3.9 Webstorage

1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3.相关AP1:
1)xxxxxStorage.setItem('key', 'value');

                该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2)xxxxxStorage.getItem(person');
                该方法接受一个键名作为参数，返回键名对应的值
        3)xxxxxStorage.removeItem('key');
                该方法接受一个键名作为参数，并把该键名从存储中删除。
        4)xxxxxStorage.clear()
                该方法会清空存储中的所有数据
4.备注:

SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容，需要手动清除才会消失。
xxxxxstorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。
JSoN.parse(nul1)的结果依然是nul。

对案例进行浏览器存储设置

App.vue完整代码

        data(){return {/* 由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升） */todos:JSON.parse(localStorage.getItem('todos')) || []}},watch:{todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}}

3.10 组件自定义事件

1.一种组件间通信的方式，适用于:子组件 ==>父组件

2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

3.绑定自定义事件:

第一种方式，在父组件中:<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
第二种方式，在父组件中:

<Demo ref="demo"/>
......
mounted(){this.$refs.xxx.$on('hjj',this.test)
}

若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。

4.触发自定义事件:this.$emit('hjj',数据)
5.解绑自定义事件:this.$off('hjj')
6.组件上也可以绑定原生DOM事件，需要使用 native 修饰符
7.注意:通过 this.$refs.x.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

案例代码更新

App.vue

<template>
<div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/></div></div>
</div>
</template>

MyFooter.vue

<script>export default {name:'MyFooter',props:['todos'],computed:{total(){return this.todos.length},doneTotal(){/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) */return this.todos.reduce(pre,todo=>pre+(todo.done ? 1 : 0),0)},/* 1.isAll(){return this.doneTotal === this.total && this.total > 0} */isAll:{get(){return this.doneTotal === this.total && this.total > 0},set(value){/* this.checkAllTodo(value) */this.$emit('checkAllTodo',value)}}},methods:{/* checkAll(e){this.checkAllTodo(e.target.checked)}, */clearAll(){/* this.clearAllTodo() */this.$emit('clearAllTodo')}}}
</script>

3.11全局事件总线

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线:

new Vue({......beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm},......
})

3.使用事件总线:
1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){demo(data){......}
}
mounted(){this.$bus.$on('xxxx',this .demo)
}

2.提供数据:

this.$bus.$emit('xxxx',数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

案例代码更新：

Main.js

new Vue({el:'#app',render:h =>h(App),beforeCreate() {Vue.prototype.$bus = this},
})

App.vue

<template>/* 删除内容 */<MyList :todos="todos" />
</template><script>/* 以下为新增绑定 */methods:{/* 新增绑定 */mounted(){this.$bus.$on('checkTodo',this.checkTodo)this.$bus.$on('deleteTodo',this.deleteTodo)},deforeDestory(){/* 解绑 */this.$bus.$off('checkTodo')this.$bus.$off('deleteTodo')}}
</script>

MyItem.vue

<script>export default {name:'MyItem',/* 声明接受todo对象 */props:['todo'],methods:{/* 勾选 | 取消勾选 */handleCheck(id){/* 通知app组件将对应的todo对象的done值取反 *//* this.checkTodo(id) */this.$bus.$emit('checkTodo',id)},/* 删除 */handleDelete(id){if(confirm('Are you sure to delete?')){/* this.deleteTodo(id) */this.$bus.$emit('deleteTodo',id)}}}}
</script>

MyList.vue

<template><ul class="todo-main"><MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"></MyItem></ul>
</template><script>import MyItem from './MyItem.vue';export default {name:'MyList',components:{MyItem},props:['todos']}
</script>

3.12 消息订阅与发布 pubsub

1.一种组件间通信的方式，适用于 任意组件间通信。
2. 使用步骤:
        1.安装pubsub:npm i pubsub-js
        2.引|入:import pubsub from 'pubsub-js'
        3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){demo(data){......}
}
......
mounted(){this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}

4.提供数据: pubsub.publish('xxx',数据)
5.最好在beforeDestrov钩子中，用 Pubsub.unsubscribe(pid)去

案例代码更新：

App.vue:

<script>import pubsub from 'pubsub-js'......export default {......,methods:{......,/* 删除一个todo */deleteTodo(_,id){this.todos = this.todos.filters( todo => todo.id !== id)},......,mounted(){......,deforeDestory(){/* 解绑 */this.$bus.$off('checkTodo')/* this.$bus.$off('deleteTodo') *//* 取消订阅 */pubsub.unsubscribe(this.pubId)}}
</script>

MyItem.vue

<script>/* 引入库 */import pubsub from 'pubsub-js'export default {.....methods:{......,/* 删除 */handleDelete(id){if(confirm('Are you sure to delete?')){/* this.deleteTodo(id) *//* this.$bus.$emit('deleteTodo',id) *//* 使用订阅 */pubsub.publish('deleteTodo',id)}}}}
</script>

3.13 Todo list案例新增编辑功能与nextTick

nextTick

1.语法: this.$nextTick(回调函数)
2.作用:在下一次 DOM 更新结束后执行其指定的回调。
3.什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

案例代码更新：

App.vue

<script>......methods:{......,/* 更新一个todo */updateTodo(id,title){this.todos.forEach(()=>{if(todo.id === id) todo.title = title})},......,mounted(){this.$bus.$on('checkTodo',this.checkTodo)this.$bus.$on('updateTodo',this.checkTodo)/* this.$bus.$on('deleteTodo',this.deleteTodo) *//* 订阅消息 */this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)},......}
</script><style>
.......btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}
/* 新增编辑的样式 */
.btn-edit {color: #fff;background-color: pink;border: 1px solid #9d2f29;margin-right: 5px;
}
......</style>

MyItem.vue

<template><li><label>......<input v-show="todo.isEdit" type="text" :value="todo.title"@blur="handleBlur(todo,$event)"ref="inputTitle"></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button><button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button></li>
</template><script>......,/* 编辑 */handleEdit(todo){if(todo.hasOwnProerty('isEdit')){todo.isEdit=true}else{this.$set(todo,'isEdit',true)}this.$nextTick(function(){/* nextTick所指定的回调，会在dom节点更新完毕之后再执行 */this.$refs.inputTitle.focus()})},/* 失去焦点回调，真执行修改逻辑 */handleBlur(todo,e){todo.isEdit=falseif(!e.target.value()) return alert('Your input cannot be null!')this.$bus.$emit('updateTodo',todo.id,e.target.value)}}}
</script>

3.14 Vue封装的过度与动画

Animate.css | A cross-browser library of CSS animations.

1.作用:在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2.图示：

3.写法：

1)准备好样式:

元素进入的样式:
- 1.v-enter:进入的起点
- 2.v-enter-active:进入过程中
- 3.v-enter-to:进入的终点
元素离开的样式:
- 1.v-leave:离开的起点
- 2.v-leave-active:离开过程中
- 3.v-leave-to:离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性:

<transition name="hello"><h1 v-show="isShow">你好啊!</h1>
</transition>

3.备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元素都要指定 key 值。

案例代码更新：

MyItem.vue

<template>/*给li添加transition*/<transition name="todo" appear><li>......</li></transition>
</template><style scoped>
/*添加代码*/
......
.todo-enter-active{animation: atguigu .5s linear;
}
.todo-leave-active{animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu {from{/*左边进入，设置为100%则是右边进入*/transform:translateX(-100%);}to{transform:translateX(0px);}
}
</style>