Vue基础知识

class与style属性绑定

语法格式

v-bind:class=“表达式” 或 :class=“表达”

• 字符串 :class="activeClass" activeClass = ‘active’ 等价于 class="active"
• 对象 :class="{active: isActive, error: hassError}" isActive = true, hassError = true等价于class="active, error"
• 数组 :class="['active', 'error']" 等价于 class="active, error"

v-bind:style="表达式"或:style="表达式"
:style="{color: activeColor, fontSize: fontSize + 'px'}"

v-on事件

语法格式

v-on:click="index" 或 @click="index"

获取原生dom事件

• 无参 @click="index" index(event)
• 有参 @click="index('name', $event)" index(name, event)

v-text/v-clock指令

解决界面加载时候，出现{{msg}}闪烁

<p v-text="msg">p>
msg = "hello"
1
2

<style>
	[v-clock] {
		display: none
	}
style>
<p v-clock>{{msg}}p>
1
2
3
4
5
6

自定义指令

全局指令

Vue.directive('指令名', {
	// el 代表了使用了此指令的那个DOM元素
	// binding 可获取使用了此指令的绑定值 等
	inserted: function(el, binding) {
		// 逻辑代码
	}
})
1
2
3
4
5
6
7

局部指定

directives: {
	指令名, {
		// el 代表了使用了此指令的那个DOM元素
		// binding 可获取使用了此指令的绑定值 等
		inserted: function(el, binding) {
			// 逻辑代码
		}
	}
}
1
2
3
4
5
6
7
8
9

过滤器

全局过滤器

Vue.filter('过滤器名', function(value){
})
1
2

局部过滤器

filters: {
	'过滤器名': function(value) {
	}
}
1
2
3
4

使用

<div>{{数据属性名称|过滤器名称}}div>
<div>{{数据属性1|过滤器名称(数据属性2,数据属性3,...)}}div>

<div v-bind:id="数据属性名称|过滤器名称">div>
<div v-bind:id="数据属性1|过滤器名称(数据属性2,数据属性3,...)">div>
1
2
3
4
5

父子组件通信

• props 父组件向子组件传值
• $emit 自定义事件
• slot 插槽分发内容

通信规则

• 不要在子组件中直接修改父组件传递的数据
• 数据初始化时，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在使用的组件中
• 数据初始化在哪个组件，更新数据的方法就应该定义在哪个组件中

props 父组件向子组件通信

props的定义方式
方式一： 数组形式

props: ['id', 'name', 'salary', 'isPublished', 'commentIds', 'author', 'getEmp']
1

方式二：对象形式

props: {
	id: Number,
	name: String,
	salary: Number,
	isPublished: Boolean,
	commentIds: Array,
	author: Object,
	getEmp: Function
}
1
2
3
4
5
6
7
8
9

方式三：指定属性名、数据类型、必要性、默认值

props: [
	id: {
		type: Number,
		required: true,
		default: 1
	},
	name: {
		type: String,
		required: true,
		default: 'baize'
	}
]
1
2
3
4
5
6
7
8
9
10
11
12

引用组件时动态赋值

<my-component :id="1" :name="baize" :salary="5000">my-component>
1

$emit 子组件向父组件通信

适用于子组件向父组件通信，不适用于隔代通信（建议使用props方式传递函数）

<my-component @child_edit="edit(value)">my-component>
1

this.$emit('child_edit', '传递的值')
1

slot 插槽分发内容

主要用于父组件向子组件传递 标签+数据，（props和 **$emit()**只是传递数据）

子组件自定义插槽

<div>
	<slot name="aaa"> 不确定的标签结构 1 slot>
	<div>确定标签结构div>
	<slot name="bbb"> 不确定的标签结构 2 slot>
div>
1
2
3
4
5

父组件传递标签数据

<child>
	<div slot="aaa"> 向 name=aaa 的插槽处插入此标签数据 div>
	<div slot="bbb"> 向 name=bbb 的插槽处插入此标签数据 div>
child>
1
2
3
4

兄弟组件通信（PubSubJS）

订阅消息（绑定事件监听）

PubSub.subscribe('消息名称(相当于事件名)', function(event, data) {
	// 事件回调处理
})
1
2
3

PubSub.subscribe('pubSub', (event, data) => {
	this.data = data
})
// 使用function(event, data) this指PubSub对象
// 使用箭头函数 this指父对象
1
2
3
4
5

发布消息（触发事件）

PubSub.publish('消息名称(相当于事件名)', data)
1

PubSub.publish('pubSub', 1)
1

Vue生命周期

• beforeCreate Vue实例创建前被调用，数据和模板均未获取
• create Vue实例创建后，可以获取到数据，模板未获取到
• beforeMount 数据挂载之前，获取到了模板，数据还未挂载到模板上
• mounted 数据已经挂载到模板上
• updateBefore 数据更新之前
• updated 数据更新之后

请求数据建议在create阶段

ES6 语法

导出默认成员（只能有一个）

ES6之前的语法

// 导出一个默认函数
module.exports = function() {
	console.log('es6 之前的语法')
}
1
2
3
4

var a = require('文件名路径') //引入
a() // 使用
1
2

ES6语法

导出函数

// 导出一个默认函数
export default function(){
	console.log('es6 语法')
}
1
2
3
4

import a from '文件名路径' // 引入
a() // 使用
1
2

导出对象

export default {
	name: 'baize'
}
1
2
3

import a from '文件名路径' // 引入
console.log(a) // 使用
1
2

导出非默认成员（可以有个）

ES6之前的语法

export.x = 'x'
export.y = 'y'
```html
var a = require('文件名路径') //引入
console.log(a.x, a.y)
1
2
3
4
5

#### ES6语法

```html
export default function(){
	console.log('es6 语法')
}
export const x = 'x'
export const y = 'y'
export function fun(a, b) {
	return a+b;
}
1
2
3
4
5
6
7
8
9
10
11

// 方式一
import {x, y, fun} from '文件名路径' // 引入
console.log(x, y, fun(1, 2)) // 使用
// 方式二
import * as temp from '文件名路径'  // 引入
console.log(temp.default(), temp.x, temp.y, temp.fun(1, 2)) // 使用
// 方式三 按需导入
import {x, y} from '文件名路径' // 引入
console.log(x, y) // 使用
1
2
3
4
5
6
7
8
9