【vue框架】vue2 知识点整理

脚手架文件结构

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

不同版本的Vue引入

1. vue.js 与 vue.runtime.__.js 的区别：
   1. vue.js 是完整的 Vue ，包含：核心功能 + 模板解析解析器；
   2. vue.runtime.__.js 是运行版的 Vue ，只包含核心功能；
2. 因为vue.runtime.__.js没模板解析器，所以不能使用 [template] 配置项，需使用 render 函数接收到的 createElement函数去指定具体内容；

vue.config.js 配置文件

1. 查看Vue脚手架默认配置，执行语句

vue inspect > output.js

使用 vue.config.js 可以对脚手架进行个性化定制，配置项文档

ref 属性

1. 被用来给子元素或子组件注册引用信息。（相当于绑定id）；
2. 应用在HTML标签上，获取的是真实的DOM元素，应用在组件标签上就是组件实例对象【vc】；
3. 使用方式：官网文档
   1. 绑定方式：<h1 ref="___"> ... </h1> 或 <Demo ref="___"/>；
   2. 获取方式：this.$refs.___；

props配置项

官网文档

1. 功能：让组件接收到外部传来的数据；
2. 传递数据：<Demo name="www"/>；
3. 接收数据（3种）：
   1. 只接收：props['name']；
   2. 接收但限制类型：props:{name:String}；
   3. 接收但限制类型、限制必要性 / 指定默认元素：
      一般必要性和指定默认元素二选一进行配置

props:{
   
    name:{
   
        type: String, //类型
        required:true, //必要性
        default: 'greeny' //默认值
    }
}

备注：

• props接收的数据是只读的，Vue底层会监测 props 的修改，如果进行了修改控制台会出现警告，若业务中需要修改，则将props中的数据存到data中，再去使用修改data中的数据；
• 当props中的对象数据，其属性值被改变，Vue是没有监测到其被修改的，因为其对象的地址没有改变，但不提倡这样修改；

mixin 混入

官网文档

1. 功能：可以把多个组件共用的配置提取成一个混入对象；
2. 使用方式：

• 第一步定义混合：
  可以另起一个 js 文件

{
   
    data(){
   ...},
    methods:{
   ...},
    ...
}

• 第二部使用混入：
  全局混入：Vue.mixin(xxx)；
  局部混入：mixins['xxx']

插件

1. 功能：通常用来为Vue添加全局功能。功能范围没有严格的限制；

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个及以后的参数是插件使用者传递的数据；

3. 定义插件：

__.install = function(Vue, options){
   
    // 1.添加全局过滤器
    Vue.filter(...)
               
 	// 2.添加全局指令
    Vue.directive(...)
    
    // 3.配置全局混入
    Vue.mixin(...)
              
    // 4.添加实例方法
    Vue.prototype.$myMethod = function () {
   ...}
    Vue.prototype.$myProperty = xxx;
}

4. 使用插件：Vue.use(xxx)；

scoped样式

1. 作用：让样式在组件中局部生效，防止类名冲突；
2. 写法：style scoped；

组件的自定义事件

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

2. 使用场景：A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调在父组件A中）；

3. 绑定自定义事件：

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

       <Demo ref='demo'/>
       ...
       mounted(){
        
               this.$refs.demo.$on('test', this.test); // this.test 方法可以在methods中定义 or 在这里写箭头函数，保证this指向
       }
   

   3. 若只想触发一次，可以使用once修饰符，或$once方法；

4. 触发自定义事件：this.$emit('test',data)；

5. 解绑自定义事件：this.$off('test')；

6. 组件上可以绑定原生DOM事件，需要使用native修饰符；该原生DOM事件会绑定在组件的根节点上；

全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于 任意组件间；

2. 安装全局事件总线：

new Vue({
   
    ......
    beforeCreate(){
   
    Vue.prototype.$bus = this //安装全局事件总线
  },
})

3. 使用：

   1. 接收数据：A组件想要接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身；

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

   2. 提供数据：this.$bus.$emit('xxx', data)；

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

nextTick

官方文档

1. 用法：this.$nextTick(回调函数)；
2. 作用：在下一次DOM更新结束后执行其指定的回调函数；
3. 使用场景：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所制定的回调函数中执行；

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 ；

2. 分类：默认插槽、具名插槽、作用域插槽；

3. 使用方式：

   1. 默认插槽：

      //父组件中：
      <Category>
         <div>html结构1</div>
      </Category>
      //子组件中：
      <template>
          <div>
             <!-- 定义插槽 -->
             <slot>插槽默认内容...</slot>
          </div>
      </template>
      

   2. 具名插槽：

      //父组件中：
      <Category>
          <template slot="center">
            <div>html结构1</div>
          </template>
      
          <template v-slot:footer>
             <div>html结构