Vue学习总结1--带你分析脚手架到了解自定义组件事件

1.分析脚手架

   ├── 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：包版本控制文件

1.1关于不同版本的vue的区别：

        1.vue.js和vue.runtime.xxx.js的区别是vue.js是完整版的vue，后者是运行时的vue

        2.vue.js包含核心功能和模板解析器，而后者只包含核心功能，由于后者没有模板解析器，所以template这个配置项不能使用，需要render函数的createElement去指定具体内容。

1.2vue.config.js配置文件：

        1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。

        2. 使用vue.config.js可以对脚手架进行个性化定制，详情见Vue CLI的官网：https://cli.vuejs.org/zh

2.ref属性

        1.被用来给元素或子组件注册引用信息（id的替代者）

        2.应用在HTML标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

应用方法：

        1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```

        2. 获取：```this.$refs.xxx```

示例代码：

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
        //此处给HTML标签元素button引用
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        //子组件引用
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

3.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中的数据。

 4.mixin混合

        1.功能：可以把多个组件之间的共用的配置提取为一个混入对象。

        2. 使用方式：

    第一步定义混合：

    {

        data(){....},

        methods:{....}

    }

    第二步使用混入：

    ​ 全局混入：```Vue.mixin(xxx)```

    ​ 局部混入：```mixins:['xxx']  ```

示例代码：

这是定义的混入代码hunhe,hunhe2,这里是需要向外暴露的:

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

子组件引入：

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>
<script>
//引入混合
	// import {hunhe,hunhe2} from '../mixin'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		// mixins:[hunhe,hunhe2]
        //此时会去mixin.js中去找hunhe,hunhe2中的代码调用showName的方法和对应的数据
	}
</script>

5.插件

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()```

具体使用方法可参考尚硅谷学习视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=68&vd_source=88722d10c1412095b1c9a4146924ef88

6.scoped样式

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

2. 写法：```<style scoped>```

有些人的写法是<style type="less" scoped>

其指定用less语法书写编译，需要安装less.loader安装包，安装方法: npm i  less_loader

7.总结TodoList案例

1. 组件化编码流程：

    ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

    ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    ​       1).一个组件在用：放在组件自身即可。

    ​       2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

    ​ (3).实现交互：从绑定事件开始。

2. props适用于：

    ​ (1).父组件 ==> 子组件 通信

    ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

由于TodoList案例较多，会单独发布一篇文章总结

8.浏览器的本地存储

1.存储内容大小一般在5MB左右（不同浏览器的大小有一定的差别）

2.浏览器通过Window.sessionStorage和Window.localStorage进行存储，两者有一定区别：        

        2.1.Window.sessionStorage在浏览器中如果你和浏览器的会话结束了，那么相对应的数据也会删除。而Window.localStorage的存储方式更为强大，即使你关闭了浏览器的会话窗口，所存储的数据也不会丢失，除非你手动删除。

        2.2.sessionStorage存储的数据只能在同一窗口下共享，localStorage存储的数据能够在多窗口下共享

共同点是：都以键值对的形式存取使用。

3. 相关API：

    1. ```xxxxxStorage.setItem('key', 'value');```

              该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. ```xxxxxStorage.getItem('person');```

        ​      该方法接受一个键名作为参数，返回键名对应的值。

    3. ```xxxxxStorage.removeItem('key');```

        ​      该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. ``` xxxxxStorage.clear()```

        ​      该方法会清空存储中的所有数据。

示例代码：给出了用Window.localStorage进行存储的相关代码，两者使用的API都是一致的，所以此处Window.sessionStorage的代码省略。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

注意：

 1. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。

 2. ```JSON.parse(null)```的结果依然是null。

9.组件自定义事件

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指向会出问题！