尚硅谷天禹老师Vue2.0笔记

笔记 关于不同版本的 Vue：

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

笔记 脚手架文件结构:

    |—— node_modules
    |—— public
    |   |__ favicon.ico: 页签图标
    |   |__ index.html: 主页面
    |—— src
    |   |__ assets: 存放静态资源
    |   |   |__logo.png
    |   |__ components: 存放组件
    |   |   |__HelloWord.vue
    |   |__ App.vue: 汇总所有组件
    |   |__ main.js: 入口文件
    |——— .gitignore: git版本管制忽略的配置
    |——— babel.config.js: babel的配置文件
    |——— package.json: 应用包配置文件
    |——— README.md: 应用描述文件
    |——— package-lock.json: 包版本控制文件

笔记 vue.config.js:

1.使用 vue inspect > output.js 命令可以查看vue脚手架的默认配置,vue.config.js可以对脚手架进行个性化定制
2.vue会吧该配置文件输送给webpack(因为webpack是基于Nodejs,Nodejs里的模块化采用的是commonJS)会和webpack里已经写好的看不见的配置文件进行合并。参考官方文档：https://cli.vuejs.org/zh

笔记 ref属性:

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

笔记 全新配置项 props:

功能：让组件接受父组件传递的数据
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改就会发出警告。如果业务需 求要修改，可以将props传入的复制到data中，然后修改data的值。
props的优先级高于data

笔记 全新配置项 mixins(混入/混合):

功能：可以把多个组件共用的配置提取成一个混入对象
全局混入可以在 入口文件 引入mixin文件 再Vue.mixin(xxx)
全局混入 vm vc 都可以使用

笔记 插件:

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个参数以后是插件使用者传递的数据
定义插件：

  对象.install = function(){
   
         Vue.mixin(...)
  }

使用插件：在入口文件import引入后 Vue.use()

笔记 scoped样式:

作用：让样式在局部生效，组件名防止冲突
写法：<style scoped></style>
npm命令查看版本： npm view webpack versions

笔记 自定义事件:

1. 一种组件通信方式,适用于 子组件 通讯 父组件
2. 第一种方法,在父组件中向子组件标签 <Demo @zdy="test" /> 或 <Demo v-on:zdy="test" />. 第二种方法,在父组件中向子组件标签加 ref 获取子组件的实例对象<Demo ref='demo' />

mounted(){
    this.$refs.demo.$on('zdy',this.test) }

3.如果只想事件触发一次可以使用 once 修饰符 或 $once 方法
4.触发自定义事件(给谁绑的在谁身上触发): this.$emit('zdy',参数)
5.解绑自定义事件: this.$off('zdy')
6.在组件标签上也可以绑定原生DOM事件,但Vue会把它当自定义事件解析,所以需要使用 native 修饰符

笔记 全局事件总线:

1.一种组件间通讯的方式,适用于任意组件间通讯
2.安装全局事件总线:

  new Vue({
   
         ....
         beforeCreate(){
   
                Vue,prototype.$bus = this;  安装全局事件总线,吧this给总线,让其拥有 vm 身上的属性方法.例 $on $emit $off
         }
  }