13、对于组件的理解
<script>
// 首先要提出一个问题：
// 我们用的或者自己定义的组件本质上一个名为VueComponent的构造函数
// 比如我们定义一个school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>{{name}}</h2>
</div>
`,
data() {
return {
name: '合工大'
}
}
})
// Vue.extend(options)会返回一个VueComponent构造函数，在Vue.extend的方法中有一句代码：let Sub = function VueComponent(options) {}; return Sub
// 可以看的出来，返回了一个名为VueComponent的构造函数,也就是我们的组件
// 当我们在html里面写上<school></school>标签时，Vue在解析的时候会帮我们创建组件的实例对象
// 也就是Vue帮我们执行勒new VueComponent(options)，所以每调用一次，就会创建一个VueComponent的实例对象
// 注意：
// vm: Vue的实例对象，是通过new Vue()实现的，在配置项里如data函数 methods watch computed中的函数他们的this均指向Vue的实例对象（vm）
// vc: VueComponent的实例对象，是通过new VueComponent() 实现的，配置项中的函数的this指向VueComponent的实例对象（vc）
// 仔细观察会发现vm和vc内部的属性和函数全都是一样的，但是他们不是同一个东西
// 最主要的区别就是new Vue()的时候配置项需要带el属性，new VueComponent()的时候不需要有template配置项就行了
// vm可以通过el属性指定自己去为哪个容器服务，vc不可以
// 还有一个很大的区别，通过new VueComponent()创建vm的时候配置项data必须是函数
// 但是通过new Vue()创建vc的时候配置项的data可以是对象
// 理解一下就是，我们创建的组件对象（vc）是可以多次调用的，就是html上你可以多次用这个组件标签
// 所以他们的data数据必须地址不一样，相互独立，互不干扰
// 而Vue的实例对象vm，全局只有一个，所以new Vue()的时候穿的data可以写成对象，没关系，全局就这一个，里面的数据就是整个项目公用的
// 总结：vm和vc都可以算作Vue实例，所以属性和方法都一样，但是组件是可复用的Vue实例，而vm只有一个，不会复用
// 重要！！！！一个重要的 内置关系！！！！！！！！
// VueComponent.prototype.__proto__ === Vue.prototype
// 这里就是 school.prototype.__proto__ === Vue.prototype
// 为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
// 仔细分析一下图片
</script>
14、单文件流程
15、脚手架为什么用render函数
// 这是vue2的main.js文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
// 这里要来详细介绍一下为什么用render函数
// 首先看下我们导入的vue文件
// 先去看一下vue这个包的文件夹，进入package.json
// 里面配置了这么一句话："module": "dist/vue.runtime.esm.js"，意思就是说你通过import直接导入的vue
// 是vue.runtime.esm.js这个版本的vue，esm是ES6 moudle的意思
// 你可以看到dist文件夹下有很多版本的vue,每个版本的功能是有区别的
// 其中vue.js是完整版的Vue,包含：核心功能+模板解析器
// vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要
// 使用render函数接收到的createElement函数去指定具体内容
// 这个createElement就是这里的 h16、Vue如何查看webpack.config.js
// 在Vue项目的根目录下输入：vue inspect > output.js
// Vue会把配置文件生成一个新的js文件，里面是所有的配置项
// Vue的webpack配置被隐藏了，因为他不希望别人修改配置
// 如果你想看就用上面的那个，如果你想改一些配置的话
// 那么你想需要在vue.config.js里写新的配置，当然这里面的配置
// 都是可选配置，支持修改的，不让改的在这里也是改不了的
// 具体支持哪些可选配置去脚手架官网看呗：https://cli.vuejs.org/zh/config/#vue-config-js
//下面是vue.config.js文件的内容，该配置叭~
const { defineConfig } = require('@vue/cli-service')
// 这种暴露方式是common.j的暴露模式
module.exports = defineConfig({
transpileDependencies: true,
// 关闭语法检查
lintOnSave: false
})17、安装一个loader
// 是这样的，我们经常在npm 一些loader的时候发现报错了，很多时候都是版本冲突
// 像以前webpack还是4版本的时候，如果装npm i less-loader，这种安装方式会直
// 接安装最新的版本，如果安装到less-loader9的话就会报错
// 因为less-loader9版本就是为了迎合webpack5的，所以webpack4摆平不了less-loader9
// 所以安装的时候可以先看下版本
// 先看webpack的版本有哪些：npm view webpack versions
// 看下less-loader的版本：npm view less-loader versions
// npm i less-loader@7: 安装7版本里最新的
// 当然也可以直接指定版本npm i less-loader@7.0.2
// 如何查看项目webpack的版本
// 进入到node_modules文件夹找到webpack文件夹，查看package.json文件
// 文件里的有一项配置为version，就是版本号18、浏览器本地存储（webStorage）
<body>
<h2>localStorage</h2>
<button onclick="saveData()">保存localStorage</button>
<button onclick="getData()">读取localStorage</button>
<button onclick="deleteData()">删除localStorage</button>
<button onclick="deleteAllData()">清空localStorage</button>
<script>
// 1、localstorage
// 本地存储: 常用的比如网站的历史搜索记录
// 如何存入用setItem
function saveData() {
localStorage.setItem('msg', 'hello!');
}
function getData() {
const myLocalStorage = localStorage.getItem('msg');
console.log(myLocalStorage);
// 如果读不到就会返回null，sessionStorage页一样
// 注意JSON.parse(null)的结果还是null；
}
function deleteData() {
localStorage.removeItem('msg', 'hello!');
}
// 清空localStorage
function deleteAllData() {
localStorage.clear();
}
// 需要注意的是，localStorage最大的特点就是关闭浏览器下次打开它依旧会存在
// 它的存储是永久的，必须手动删除
// 一般我们在用的时候会设置存储时间，怎么实现呢，这样实现
// 设置保存时间为一小时
let expires = Date.now() + 1000 * 60 * 60;
localStorage.setItem('key', JSON.stringify({ data: 'value', expires }));
// 读取并检查是否过期
let item = JSON.parse(localStorage.getItem('key'));
if (item.expires < Date.now()) {
localStorage.removeItem('key');
} else {
console.log(item.data);
}
// 2、sessionStorage
// 直译过来就是会话，那么浏览器的一次会话就是打开和关闭，也就是说浏览器关闭后会话结束，sessionStorage会清空
// sessionStorage的所有API和localStorage是一摸一样的
// 唯一的区别是sessionStorage的内容会在浏览器关闭被清除
// 还有一点很重要: localStorage 和 sessionStorage是针对网站来说的，各个网站的存储是独立的
// 浏览器不会再一个网站下显示其他网站的storage
// 还有浏览器清除缓存会把storage里的东西都清除，包括cookie等数据！！！！
// 这下知道为啥露哥经常说清缓存清缓存了吧！！！！！！！！！！！！！！！！
// webStorage的存储大小一般支持5MB左右
</script>
</body>
