Vue2.0介绍(二)

一、生命周期

将要创建 ===> 调用beforeCreate函数
创建完毕 ===> 调用created函数
将要挂载 ===> 调用beforeMount函数
挂载完毕 ===> 调用mounted函数(重要钩子)
将要更新 ===> 调用beforeUpdate函数
更新完毕 ===> 调用updated函数
将要销毁 ===> 调用beforeDestroy函数(重要钩子)
销毁完毕 ===>调用destroyed函数

Vue2.0介绍(二)_第1张图片

二、Vue组件化编程

1.模块

理解:向外提供特定功能的js程序,一般就是一个js文件。
作用:复用js,简化js的编写,提高js运行效率。

2.组件

理解:用来实现局部(特定)功能效果的代码集合(html\css\js\image…)
作用:复用编码,简化项目编码,提高运行效率。

3.模块化

当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。

4.组件化

当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。

三、关于不同版本的Vue

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

四、ref属性

1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(VueComponent)。
3.使用方式
打标识:
获取:this.$refs.xxx

五、props配置项

功能:让组件接收外部传过来的数据。

传递数据:

<Demo name="xxx"/>

接收数据:
1.只接收数据:

props:['name']

2.限制数据类型:

props:{name:String}

3.完整限制:

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

六、mixin(混入)

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

使用方式:
第一步定义混合,例如:

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

第二步使用混入,例如:
(1)全局混入:Vue.mixin(xxx)
(2)局部混入:mixins:['xxx']

七、插件

功能:用于增强Vue

本质:包含install方法的一个对象,install的第一个参数是vue,第二个以后的参数是插件使用者的数据。

定义插件:

对象.install = function(Vue, options){
        // 添加全局过滤器
        Vue.filter(...)
        // 添加全局指令
        Vue.directive(...)
        // 配置全局混入
        Vue.mixin(...)
        // 添加实例方法
        Vue.prototype.$myMethod = function() {...}
        Vue.prototype.$myProPerty = xxx
}

使用插件:Vue.use()

八、scoped样式

作用:让样式在局部生效,防止冲突。

写法:

九、webStorage

1.存储内容大小一般支持5M左右(不同浏览器可能不一样)。
2.浏览器端通过Windows.sessionStorage和Windows.localStorage属性实现本地存储机制。
3.相关API:
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值添加到存储中,如果键名存在,则更新其对应的值。
xxxxxStorage.getItem('key');
该方法接受一个键名作为参数,返回键名对应的值。
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
xxxxxStorage.clear();
该方法会清空存储中的所有数据。
4.备注
sessionStorage存储的内容会随着浏览器窗口关闭而消失;
localStorage存储的内容,需要手动清除才会消失;
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null;
JSON.parse(null)的结果是null。

十、组件的自定义事件

1.一种组件间通信的方式,适用于:子组件 ===> 父组件。
2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
3.绑定自定义事件:
第一种方式:在父组件中:
第二种方式:在父组件中:

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

若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
4.触发自定义事件:this.$emit('test',data)
5.解绑自定义事件:this.$off('test')
6.组件上也可以绑定原生DOM事件,需要使用native修饰符。
7.注意:通过this.$refs.xxx.$on('test',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会指向Windows。

十一、全局事件总线(GlobalEventBus)

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

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前应用的Vue实例对象
	}
	......
})

3.使用事件总线:

接收数据:A组件接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。

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

提供数据:this.$bus.$emit('xxx',data)

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

十二、消息订阅与发布(pubsub)

1.一种组件间通信的方式,适用于任意组件间通信。
2.使用步骤:

安装pubsub:npm i pubsub-js
引入:import pubsub from 'pubsub-js'
接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件中。

 	methods() { 	
		demo(data) {.....}
	} 
	...... 
	mounted() {
		this.pid = pubsub.subscribe('xxx',this.demo) // 订阅消息 
	}

4.提供数据:pubsub.publish('xxx',data)
5.最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)去取消订阅。

十三、nextTick

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

十四、插槽

1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适应于父组件 ===> 子组件
2.分类:默认插槽、具名插槽、作用域插槽。
3.使用方式:

1.默认插槽:

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

2.具名插槽

父组件中:
	<Demo>
		<template slot="center">
			<div>html结构1</div>
		</template>
		<template v-slot:footer>
			<div>html结构2</div>
		</template>
	</Demo>
子组件中:
	<template>
		<div>
			<!-- 定义插槽 -->
			<slot name="center">插槽默认内容...</slot>
			<slot name="footer">插槽默认内容...</slot>
    	</div> 
    </template>

3.作用域插槽:
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由APP组件决定)
具体编码:

      <template scope="scpoeDate">
        <!-- 生成的是ul列表 -->
        <ul>
          <li v-for="g in scpoeDate.games" :key="g"></li>
        </ul>
      </template>
    </Category>
    <Category>
      <template slot-scope="scpoeDate">
        <!-- 生成的是h4标题 -->
        <h4 v-for="g in scpoeDate.games" :key="g">{{g}}</h4>
      </template>
    </Category> 子组件中: 	<template> 	  <div>
	    <slot :games="games"></slot> 	  </div> 	</template>

	<script> 		export default {
		  name: 'Category',
		  data() {
		    return {
		      games: ['test1', 'test2', 'test3']
		    }
		  } 		}; 	</script> ```

你可能感兴趣的:(vue,vue.js)