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 (获取全部)
-
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去解绑当前组件所用到的事件
javascript
//安装全局事件总线
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 安装这个库
javascript
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所指定的回调函数中执行