Vue2进阶

https://www.bilibili.com/video/BV1Zy4y1K7SH

组件化编程

1.非单文件组件

1.基本使用

第一步：创建组件

注意不需要写el，所有组件由vm管理， vm决定组件服务于哪一个容器

const school = Vue.extend({
   
    template:``,
    data(){
   }
})

第二步：注册组件

1.全局注册，这样所有的vm都可以使用该组件

2.局部注册，这样对应的vm可以使用该组件

Vue.component('school', school)  //全局注册，第一个参数是名字，第二个是组件
new Vue({
   
      el: '#root',
      //局部注册
      components: {
   
        school,
      }
})

第三步：在使用组件的位置编写组件标签

<div id="root">
      <student></student>
</div>

注意点：

1.组件里的data一定要写成函数，因为同一组件可能会在多处地方调用，同一组件在不同的地方属性应该相互独立，所以不能A.data=B.data，而是，通过函数data()返回一个对象，使得A=data()，b=data()

2.简写：

const school = Vue.extend(options) 
//可以简写成 
const school = options

2.组件的嵌套

在组件内部注册组件，在template里面编写组件标签

 const school = Vue.extend({
   
    name: 'school',
    template: `<div><h2>学校名称：{
    {name}}</h2>	
					<student></student>
				</div>`,
    data() {
   
      return {
   
        name: '尚硅谷',     
      }},
    
    components: {
   //注册组件（局部）
      student
}})

3.VueComponent构造函数

1. 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的，如：const app=Vue.exten({}),app是构造函数
2. 我们只需要写或，Vue解析时会帮我们创建app组件的实例对象，即Vue帮我们执行new VueComponent(options)，也就是new app(options)
3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
4. 组件实例对象的this与Vue实例对象的this一样，Vue会帮我们绑定。我们称组件实例对象的this为vc，Vue实例对象的this为vm

4.一个重要的内置关系

1.Vue帮我们修改了VueComponent原型对象的原型，使下面代码成立。

VueComponent.prototype.__proto__ === Vue.prototype

2.所以组件实例对象vc可以访问到Vue原型上的属性和方法。（以后需要这功能）

2.单文件组件

main.js

import App from './App'

new Vue({
   
	el: '#root',
    template:`<App></App>`,
	component: {
   App},
})

App.vue

<template>
  <div>
     <School></School>
     <Student></Student>
  </div>
</template>

<script>
import School from './School'
import Student from './Student'
export default {
   
    name:'App',
    components:{
   
        School,
        Student,
    }
}

Vue脚手架文件结构

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

Render函数：

vue.js与vue.runtime.xxx.js的区别：

1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。

2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

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

4. vue.runtime.xxx.js比vue.js小很多。

5. 在vue下的package.json，里的module，指定了我们默认import vue时引入的是dist/vue.runtime.esm.js

   

import Vue from 'vue' //引入的是残缺的Vue，没有模板解析器，需要用render函数 

new Vue({
   
  render: h => h(App)
  //render(createElement) createElement函数返回一个Vnode节点 
  //render函数得到这个节点后，返回给mount函数，
  //mount函数渲染成真实的Dom节点，并挂在到根节点上，也就不需要el了
}).$mount('#app')

ref属性

1.ref可以理解为id的替代者

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

使用方式：

<h1 ref="title">.....</h1>
<School ref="scho"></School>

获取方式：this.$refs.xxx

methods: {
   
    showDOM() {
   
      console.log(this.$refs.title);//dom节点h1
      console.log(this.$refs.scho); //实例对象（vc）
    },

mixin混合

定义

所谓混合就是把2个组件共有的配置项提取出来，然后共同使用。

自定义混合

hunhe.js：暴露出你的配置项

export const hunhe = {
   
  methods: {
   
    showName() {
   
      alert(this.name);
    },
  },
  mounted() {
   
    console.log("你好啊！");
  },
};

使用

全局混入：在main.js下引入，然后Vue.mixin(xxx)，这样所有的vm,vc上都会有该属性
局部混入：将混合引入当前文件，然后在vm/vc的配置项里设置:mixins:[‘xxx1’,‘xxx2’]

插件

1.Vue会帮我们对象里的install方法，install可以接收vm的构造者，也就是Vue构造函数

2.Vue.use(pluins)：通过Vue.use使用插件，这样就会帮我们调用install方法

pugin.js:

暴露出一个对象，如果对象里有install方法，Vue会调用

export default {
   
  install(Vue) {
   
    Vue.filter("mySlice", function (value) {
   
      return value.slice(0, 4);
    });
}

main.js:

import Vue from "vue";
import App from "./App.vue";
import plugins from "./plugins";//引入插件

//应用（使用）插件
Vue.use(plugins);

scoped样式

作用：让样式只在对应的组件局部生效，防止冲突。

写法：

webStorage

1.webStorage分为SessionStorage和LocalStorage

1. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
2. 存储内容大小一般支持5MB左右（不同浏览器可能不一样）
3. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
4. LocalStorage存储的内容，需要手动清除才会消失。

2.相关API：

1.xxxxxStorage.setItem(‘key’, ‘value’);

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

2.xxxxxStorage.getItem(‘person’);

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

3.xxxxxStorage.removeItem(‘key’);

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

4.xxxxxStorage.clear()

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

3.tips：

1. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
2. JSON.parse(null)的结果依然是null。

nextTick

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

配置代理

安装

npm i axios

跨域：

1. 跨域就是你违背了 协议名（http）、主机名（locallhost）、端口号（8080）其中一个。
2. 结果就是你从8080发了请求，5050接到了请求，但发现你跨域了，所以5050不会给你返回结果

解决跨域：

1. 配置一个代理服务器，代理服务器和你本地都是8080，但因为代理服务器是服务器，它与5050交换数据不受跨域的影响，服务器之间不受跨域影响。

2. 开启代理服务器：

   ①使用nginx

   ②vue-cli（4行代码），在vue.config.js里配置

3. axios：axios返回的是promise对象

案例：

现在电脑上有2台服务器，一台是vue-cli或者chrome帮我们开的，8080，一台是我们自己用node开的5050，现在要实现它们之间的交互，我们需要自己创建一个代理服务器，它的端口也是8080.

使用1（有缺点）

vue.config.js:

module.exports = {
   
	pages:{
   
		index:{
   
			entry:'src/main.js'//入口
        },
    },
	LintOnSave:false,//关闭语法检查
	//开启代理服务器
	devServer:{
   // proxy：代理
    	//代理服务器就是与本地一样的8080，我们需要设置的是往哪代理
		proxy:'http://localhost:5050'
    }
}

App.vue