Vue学习笔记（操作技巧，方法等）

事件操作技巧

阻止冒泡的三种方式

function中：

event.cancelBubble = true;
event.stopPropagation();

事件上：

@click.stop()

阻止默认事件

function中：

event.preventDefault();

事件上：

@click.prevent()

过滤器

vue内置过滤器

//写法
{{变量/方法 | 过滤器名称}}

过滤器名称有：
capitalize - 首字母变大写
uppercase - 所有字母变成大写
lowercase - 所有字母变小写
currency - 变成货币形式输出（美元）
currency -后可以跟两个参数，例如： currency ‘货币符号（默认$）’ ‘小数位数（默认2）’
pluralize -复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
debounce -延时，等待处理。默认是300毫秒，也可以自己定时。例如：debounce “5000”
limitBy -(通常用于循环)截取循环哪一段，第一个参数表示截取几个，第二个参数表示从第几位开始，例如 i in arr | limitBy 2 1。
filterBy -(通常用于循环)进行数据匹配筛选，匹配包含的字符。例如：i in arr | filterBy ‘sky’,筛选arr中包含sky的数据 或者 i in jsonarr | filterBy ‘h’ in ‘name’ ,在json数组中筛选name字段包含h的数据
orderBy 升序降序 orderBy 1 为升序，orderBy -1 为降序。例如：i in arr | orderBy 1 升序

自定义过滤器

Vue.filter('过滤器名称',function(val/**过滤数据，第一个数据默认为值，从第二个数据开始为传参*/){
	/**
	过滤方法
	*/
});

Vue.filter('过滤器名称',(
	read:function(){
	/**读过滤*/
	},
	write:function(){
	/**写过滤*/
	}
));

实例

$mount(’’)

用来设定vue实例的作用域，但是级别没有内部的el高

$data

就是vue的data数据

$el

可以获取vue的作用域的控件对象

$options

获取vue的一些选项，包括自己设定的私有属性（自定义属性）

$log

可以查看vue的data信息，能看到所有data信息但无法读取修改

$destroy

清楚（杀死）vue实例

自定义指令

普通自定义指令调用 v-指令名
如果自定义指令中包含大写字母如readInfo，则调用时方法为v-read-info

Vue.directive('指令名',function(){
	/**指令内容*/
	this.el.style.color = 'red';
	this.el.style.background = 'black';
	this.el.onclick = function(){
		this.style.color = 'green';
	};
});

自定义属性

可以自定义属性标签

<属性名>内容</属性名>
Vue.elementDirective('属性名',{
	bind(){
		this.el.style.background='red';
	}
});

Vue的生命周期

created() 实例创建

在Vue的生命周期中，Vue实例创建时会执行的函数

beforeCompile() 实例编译之前

在Vue的生命周期中，Vue实例编译之前会执行的函数（页面渲染之前）

compiled() 实例编译之后

在Vue的生命周期中，Vue实例编译完成后会执行的函数

ready() 实例插入文档时

在Vue的生命周期中，Vue实例插入文档中会执行的函数(Vue渲染完成后状态)

beforeDestroy() 实例销毁之前

在Vue的生命周期中，Vue实例销毁之前会执行的函数

destroyed() 实例销毁之后

在Vue的生命周期中，Vue实例销毁之后会执行的函数

Vue组件

全局组件

通常使用extend扩展组件。

let myDiv = Vue.extend({
	template:`<h1>我是一个组件</h1>`
});

Vue.component('mydiv',myDiv); //在html部分使用<mydiv>调用

new Vue({
	el:'body'
});

在组件中使用data时，不同于实例化Vue中的data， 组件中的data必须是个函数，如果想要输出内容调用使用时，需要使用return。

局部组件