前端学习笔记-vue2-脚手架

Vue脚手架

初始化脚手架

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

1. 全局安装@vue/cli

   npm install -g @vue/cli

2. 使用命令创建项目

   vue create xxx

3. 启动项目

   npm run serve

main.js引入不同版本的Vue

1. vue.js是完整版的Vue，包含核心功能和模板解析器
2. vue.runtime.xxx.js 是运行版的Vue，只包含核心功能，没有模板解析器。因此不能使用template配置项，需使用render函数接收到的createElement函数指定具体内容

默认配置

1. inspect > output.js 查 看Vue脚手架的默认配置
2. 使用vue.config.js可以对脚手架进行个性化定制

脚手架文件结构

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者)
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象
3. 使用方法
   1. 标识元素：<元素 ref=“xxx”></元素> <组件 ref=“xxx”></组件>
   2. 获取：this.$refs.xxx

props配置项

让组件接收外部传的数据

1. 传递数据 <组件 数据名1=“xxx” 数据名2=“xxx”>

2. 接收数据

   • 简单接收

   props:['数据名1', '数据名2',...]
   

   • 类型限制

   props:{
      数据名1:数据类型, 
      数据名2:数据类型
      ...
      }
   

   • 类型限制、必要性限制、默认值设置

   props:{
      数据名1:{
          type:数据类型,
          required:boolean, //必要性
          default:默认值
      },
      数据名2:{
          type:数据类型,
          required:boolean, //必要性
          default:默认值
      },
      ...
      }
   

props是只读的，Vue底层会监测对props的修改，若进行了修改，会发出警告，若业务需求需要修改props接收的数据，可在data中配置数据，修改data中的数据

混合

1. 功能：可用把多个组件共用的配置提取成一个混入对象
2. 使用方法：
   1.定义混合

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

2.使用混和

• 全局混入：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.protptype.$方法 = function(){...}
        Vue.prototype.$属性 = xxx
    }

scoped样式

1. 作用：让样式在局部生效，避免命名冲突
2. 写法：<style scoped>

todoList案例

1. 组件化编码流程

   1. 拆分静态组件：组件按照功能点拆分，命名不要与html冲突
   2. 实现动态组件：考虑数据的存放位置
      • 单个组件使用，存放在组件自身
      • 多个组件使用，存放在父组件上(状态提升)

2. props适用

   1. 父组件→子组件 通信
   2. 子组件→父组件 通信（前提：父组件先给子组件一个函数）
      

3. 使用v-model时：v-model绑定的值不能是props传的值，因为props传的数据不允许修改

4. props传的是对象类型的值，修改对象中的属性时Vue不会报错，但不要这样做

webStorage

存储内容一般支持5MB左右，浏览器通过Window.sessionStorage和Window.locationStorage属性来实现本地存储机制

相关API

• xxxStorage.setItem(“key”,“value”) 接受一个键值对作为参数，将键值对添加到存储中，如果键名存在，则更新其值
• xxxStorage.getItem(“key”) 接受一个键名作为参数，返回键名对应的值
• xxxStorage.removeItem(“key”) 接受一个键名作为参数，从存储中删除键名对应的键值对
• xxxStorage.clear() 清空存储中的所有数据

备注

• SessionStorage存储的内容会随着浏览器窗口关闭而消失
• LocalStorage存储的内容，需要手动清除才会消失
• xxxStorage.getItem(“key”)，如果key对应的value获取不到，返回值为null
• JSON.parse(null)结果依然是null

组件的自定义事件

1. 组件间通信的方式，适用于：子组件→父组件

2. 绑定方式：

   1.v-on

   <Demo v-on:selfComponent="test"/>
   <Demo @selfComponent="test">
   

   2.ref

   <Demo ref="refComponent"/>
   ...
   mounted(){
       this.$refs.refComponent.$on('selfComponent', this.test)
   }
   

   若想让自定义事件只触发一次，可以使用once修饰符，或$once方法

3. 触发自定义事件：

   this.$emit('selfComponent',参数)
   

4. 解绑自定义事件

   this.$off()//无参数，解绑所有自定义事件
   this.$off('selfComponent')//解绑单个自定义事件
   this.$off(['selfComponent1', 'selfComponent2'])//解绑多个自定义事件
   

5. 组件也可绑定原生DOM事件，需要使用native修饰符

   注意：通过ref绑定自定义事件时，回调要么配置在methods中，要么使用箭头函数，否则this指向有误

全局事件总线

安装事件总线

new Vue({
   ...
   beforeCreate(){
      Vue.prototype.$bus = this
   },
   ...
})

使用事件总线

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

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

2.提供数据：

this.$bus.$emit('xxx', 数据)

销毁事件总线

new Vue({
   ...
   methods(){
   demo(data){...}
   ...
   mounted(){
      this.$bus.$on('xxx', this.demo)
   },
   beforeDestroy(){
      this.$bus.$off('xxx');
   }
}
   ...
})

消息订阅与发布（pubsub）

适用于任意组件间通信

使用步骤

1.安装pubsub

npm i pubsub-js

2.引入

import pubsub from 'pubsub-js'

3.接收数据

methods(){
   demo(data){...}
}
...
mounted(){
   this.pid = pubsub.subscribe('xxx', this.demo)
}

4.提供数据

pubsub.publish('xxx', 数据)

5.取消订阅

beforeDestroy(){
   pubsub.unsubscribe(pid)
}

对象可以具有属性，这些属性可以将Object.prototype的内建函数隐藏，可能导致意外行为或拒绝服务安全漏洞，因此最好使用Object.prototype调用这些方法。如：obj.hasOwnProperty(属性)应替换为Object.prototype.hasOwnProperty.call(obj, 属性)

nextTick

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

Vue封装的过渡与动画

在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

写法

1. 准备样式
   • 元素进入样式
     1. v-enter 进入的起点
     2. v-enter-active 进入的过程
     3. v-enter-to 进入的终点
   • 元素离开样式
     1. v-leave 进入的起点
     2. v-leave-active 进入的过程
     3. v-leave-to 进入的终点
2. 使用<transition>包裹过渡的元素，并配置name属性

<transition name='oneAnimate'>
    <元素>
</transition>

有多个元素需要过渡时，则使用<transition-group>，并给每个元素指定key值

更多前端学习笔记