一.脚手架文件结构
├── 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: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
二.ref属性
2.1作用及使用方式
1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 获取：```this.$refs.xxx```
2.2实例代码
//获取dom元素
<h1 v-text="msg" ref="title"></h1>
mounted() {
console.log("ref=>",this.$refs.h1)
}
//获取组件的vue compone对象
<todoHeader :addTodo="addTodo" ref="todoHeader"></todoHeader>
mounted() {
console.log("ref=>",this.$refs.todoHeader)
}
三.props配置
1. 功能：让组件接收外部传过来的数据
2. 传递数据：```<Demo name="xxx"/>```
3. 接收数据：
1. 第一种方式（只接收）：```props:['name'] ```
2. 第二种方式（限制类型）：```props:{name:String}```
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```js
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
```
> 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
3.1父组件向子组件传递数据
//1.父组件定义数据
data(){
return{
time:new Date(),
msg:"hello vx"
}
}
//2.在父组件的容器中向引用的子组件传递数据
<div id="root">
//不带:的话, 不会对数据进行解析
<vx msg1="msg" :msg2="msg"></vx>
</div>
//3.在子组件中定义props, 接收父组件的数据
const vx = {
template: "#vx",
props:['msg1','msg2']
}
//4.子组件展示数据
<h1>我是子组件,收到父组件的内容{{msg1}}</h1>
<h1>我是子组件,收到父组件的内容{{msg2}}</h1>
3.2子组件向父组件回传数据
//1.父组件定义数据和方法
data(){
return{
num:0,
}
},
components:{
vx
},
methods:{
sup(){
this.num++
}
}
//2.在父组件的容器中向子组件添加对应的方法
<vx :num="num" @sup="sup" @sub="sub"></vx>
//3.在子组件中的props添加接收到方法, 并在子组件的方法中回调父组件的方法
props:['num'],
methods:{
sup(){
this.$emit("sup")
}
}
四.mixin-混入
- 功能：可以把多个组件共用的配置提取成一个混入对象
- 使用方式：
- 第一步定义混合：
- 第二步使用混入： 全局混入：
Vue.mixin(xxx) 局部混入：mixins:['xxx']
//1.创建.js文件, 订阅共用的混入对象
export default {
data(){
return {
msg:"hello mixin"
}
},
methods:{
show(){
alert("hello mixin")
}
}
}
//2.在main.js导入创建的.js文件(可以采用全局导入或局部导入)
import mixin from "@/mixin";
//Vue.config.productionTip = false
Vue.mixin(mixin)
//3.在组件中输出
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
mounted(){
this.show()
}
}
</script>
五.自定义插件
5.1使用步骤
1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：
```js
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
```
4. 使用插件：```Vue.use()```
5.2实例代码
//1.自定义.js文件, 创建install对象
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
...
})
//定义混入
Vue.mixin({
...
})
//给Vue原型上添加一个方法（vm和vc就都能用了）
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
//2.在main.js中导入插件
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用（使用）插件
Vue.use(plugins,1,2,3)
//3.使用
<button @click="test">点我测试一个hello方法</button>
六.scoped作用
1. 作用：让样式在局部生效，防止冲突。
2. 写法：```<style scoped>```
七.webStorage
1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API：
1. ```xxxxxStorage.setItem('key', 'value');```
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. ```xxxxxStorage.getItem('person');```
该方法接受一个键名作为参数，返回键名对应的值。
3. ```xxxxxStorage.removeItem('key');```
该方法接受一个键名作为参数，并把该键名从存储中删除。
4. ``` xxxxxStorage.clear()```
该方法会清空存储中的所有数据。
4. 备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。
4. ```JSON.parse(null)```的结果依然是null。
八.自定义事件
1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。
3. 绑定自定义事件：
1. 第一种方式，在父组件中：```<Demo @atguigu="test"/>``` 或 ```<Demo v-on:atguigu="test"/>```
2. 第二种方式，在父组件中：
```js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。
4. 触发自定义事件：```this.$emit('atguigu',数据)```
5. 解绑自定义事件```this.$off('atguigu')```
6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。
7. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！
九.全局事件总线
9.1使用步骤
1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。
2. 安装全局事件总线：
```js
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})
```
3. 使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据：```this.$bus.$emit('xxxx',数据)```
4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。
十.消息的订阅与发布
1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。
2. 使用步骤：
1. 安装pubsub：```npm i pubsub-js```
2. 引入: ```import pubsub from 'pubsub-js'```
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
```
4. 提供数据：```pubsub.publish('xxx',数据)```
5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>
十一.nextTick
1. 语法：```this.$nextTick(回调函数)```
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。