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"
<style>
[v-clock] {
display: none
}
style>
<p v-clock>{{msg}}p>
自定义指令
全局指令
Vue.directive('指令名', {
// el 代表了使用了此指令的那个DOM元素
// binding 可获取使用了此指令的绑定值 等
inserted: function(el, binding) {
// 逻辑代码
}
})
局部指定
directives: {
指令名, {
// el 代表了使用了此指令的那个DOM元素
// binding 可获取使用了此指令的绑定值 等
inserted: function(el, binding) {
// 逻辑代码
}
}
}
过滤器
全局过滤器
Vue.filter('过滤器名', function(value){
})
局部过滤器
filters: {
'过滤器名': function(value) {
}
}
使用
<div>{{数据属性名称|过滤器名称}}div>
<div>{{数据属性1|过滤器名称(数据属性2,数据属性3,...)}}div>
<div v-bind:id="数据属性名称|过滤器名称">div>
<div v-bind:id="数据属性1|过滤器名称(数据属性2,数据属性3,...)">div>
父子组件通信
props父组件向子组件传值$emit自定义事件slot插槽分发内容
通信规则
- 不要在子组件中直接修改父组件传递的数据
- 数据初始化时，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在使用的组件中
- 数据初始化在哪个组件，更新数据的方法就应该定义在哪个组件中
props 父组件向子组件通信
props的定义方式
方式一： 数组形式
props: ['id', 'name', 'salary', 'isPublished', 'commentIds', 'author', 'getEmp']
方式二：对象形式
props: {
id: Number,
name: String,
salary: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
getEmp: Function
}
方式三：指定属性名、数据类型、必要性、默认值
props: [
id: {
type: Number,
required: true,
default: 1
},
name: {
type: String,
required: true,
default: 'baize'
}
]
引用组件时动态赋值
<my-component :id="1" :name="baize" :salary="5000">my-component>
$emit 子组件向父组件通信
适用于子组件向父组件通信，不适用于隔代通信（建议使用props方式传递函数）
<my-component @child_edit="edit(value)">my-component>
this.$emit('child_edit', '传递的值')
slot 插槽分发内容
主要用于父组件向子组件传递 标签+数据，（props和 **$emit()**只是传递数据）
子组件自定义插槽
<div>
<slot name="aaa"> 不确定的标签结构 1 slot>
<div>确定标签结构div>
<slot name="bbb"> 不确定的标签结构 2 slot>
div>
父组件传递标签数据
<child>
<div slot="aaa"> 向 name=aaa 的插槽处插入此标签数据 div>
<div slot="bbb"> 向 name=bbb 的插槽处插入此标签数据 div>
child>
兄弟组件通信（PubSubJS）
订阅消息（绑定事件监听）
PubSub.subscribe('消息名称(相当于事件名)', function(event, data) {
// 事件回调处理
})
PubSub.subscribe('pubSub', (event, data) => {
this.data = data
})
// 使用function(event, data) this指PubSub对象
// 使用箭头函数 this指父对象
发布消息（触发事件）
PubSub.publish('消息名称(相当于事件名)', data)
PubSub.publish('pubSub', 1)
Vue生命周期
- beforeCreate Vue实例创建前被调用，数据和模板均未获取
- create Vue实例创建后，可以获取到数据，模板未获取到
- beforeMount 数据挂载之前，获取到了模板，数据还未挂载到模板上
- mounted 数据已经挂载到模板上
- updateBefore 数据更新之前
- updated 数据更新之后
请求数据建议在create阶段
ES6 语法
导出默认成员（只能有一个）
ES6之前的语法
// 导出一个默认函数
module.exports = function() {
console.log('es6 之前的语法')
}
var a = require('文件名路径') //引入
a() // 使用
ES6语法
导出函数
// 导出一个默认函数
export default function(){
console.log('es6 语法')
}
import a from '文件名路径' // 引入
a() // 使用
导出对象
export default {
name: 'baize'
}
import a from '文件名路径' // 引入
console.log(a) // 使用
导出非默认成员（可以有个）
ES6之前的语法
export.x = 'x'
export.y = 'y'
```html
var a = require('文件名路径') //引入
console.log(a.x, a.y)
#### ES6语法
```html
export default function(){
console.log('es6 语法')
}
export const x = 'x'
export const y = 'y'
export function fun(a, b) {
return a+b;
}
// 方式一
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) // 使用