Vue05

Vue05

一个重要的内置关系：VueComponent.prototype.__ proto ____===Vue.prototyoe

为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

单文件组件

注：cli的全称 command line interface

一般叫做：脚手架

具体步骤

全局安装@vue/cli

npm install -g @vue/cli

切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx

启动项目

npm run serve

分析脚手架结构

babel.config.js

把es6 转换成 es5

package-lock.json

包版本控制文件

package.json

配置名，版本，依赖

常用的命令

serve

build （最后的一次编译）

lint （语法检查）

main.js

npm run serve 执行后，直接去执行main.js

assets文件夹

放静态资源

index.html

// 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面

//开启移动端的理想视口

//配置页面图标

//配置网页的标题

<%= htmlWebpackPlugin.options.title %> render函数

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

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

vue.runtime.xx.js 是运行版的eVue，只包含：核心功能，没有模板解析器

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

render:h => h(App),

//完整的写法如下

render(createElement){ return createElement(‘h1’,‘你好啊’) }

//注：h 是 createElement ，前面是传入一个实例（需要在main.js里面引入），后面的参数，第一个是标签，第二个是标签内容

ref属性

被用来给元素或子组件注册引用对象（id的替代者）

应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象

使用方式

打标识

<h1 ref=“xxx”>…

<School ref=“xxx”/>

获取

this.$refs (获取全部)

this.$refs.xxx

props配置项 //功能：让组件接收外部传过来的数据 //传递数据 <Demo name="xxx"> //接收数据 //只接收 props:['name'] //限制类型 props:{ name:String } //限制类型，限制必要性，指定默认值 props:{ name:{ type:String, required:true, default:'老王' } } //备注：props是只读的，Vue底层回监测对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么复制props的内容到data中一份，然后去修改data中的数据 mixins配置项(混入)

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式： //第一步定义混合 //在一个单独的js文件中定义 { data(){…}, methods:{…}, … } //第二步使用混入，例如 //全局混入 Vue.mixin(xxx) //局部混入 mixins:[‘xxx’]

插件（plugins）

功能：用于增强Vue

本质：包含install 方法的一个对象，install的第一个参数是Vue，第二个以后的参数是缔造者传递的数据 //定义插件,写在一个js文件中 对象.install = function(Vue,options){ //添加全局过滤器 Vue.filter(…) //添加全局指令 Vue.directive(…) //配置全局混入 Vue.mixin(…) //添加实例方法 Vue.prototype.$myMethod = function(){…} } //使用插件，在main.js import xxx from ‘./plugins’ Vue.use(xxx)

scoped样式

在style标签里面，添加该属性，防止组件之间的属性重名，导致样式被覆盖

组件的自定义事件

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

注：a 是父组件，b 是子组件。b想给a传数据，那么就要在a中给b绑定自定义事件（事件的回调在a中）

绑定自定义事件

在父组件中：<Demp @xxx=“xxx”>或<Demp v-on:xxx=“xxx”>

在父组件中<Demo ref=“demo”/>,在其mounted钩子中写mounted(){ this.$refs.xxx.$on(‘xxxx’,this.fuanc)

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

触发自定义事件：this.$emit(‘xxxx’,数据)

解绑自定义事件: this.$off(‘xxxx’)

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

注意：通过this.$reds.xxx.$on(‘xxxx’,回调)，回调要吗配置在methods中，要么用箭头函数，否则this指向回出问题

全局事件总线

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

安装全局事件总线

使用事件总线

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

//安装全局事件总线 new Vue({ beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm } }) //使用事件总线 //1，接收数据：A组件想接收数据，则在A组件中给$bus绑定事件，事件的回调留在A组件自身 methods(){ demo(data){...} } ... mounted(){ this.$bus.$on('xxx',this.demo) } //2,提供数据 this.$bus.$emit('xxx',数据) 消息订阅与发布

npm i pubsub-js 安装这个库

1. 一种组件间通信的方式，适用于任意组件间通信 2. 使用步骤 //1 安装pubsub //2 引入 import pubsub from 'pubsub-js' //3 接收数据：a组件想接收数据，则在a组件中订阅消息，订阅的回调留在a组件自身 methods(){ demo(data){...} } ... mounted(){ this.pid = pubsub.subscribe('xxx,this.demo')//订阅消息 } //4 提供数据：pubsub.publish('xxx',数据) //5 最好在beforeDestroy钩子中，用PubSub.unsubsceibe(pid) 去取消订阅 nextTick

语法： this.$nextTick(回调函数)

作用：在下一次DOM更新结束后执行其指定的回调

什么是用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行