Vue基础知识|Vue基础知识 javascript|前端|vue.js

class与style属性绑定语法格式 【Vue基础知识|Vue基础知识】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}}闪烁

msg = "hello"

> [v-clock] { display: none } {{msg}}

自定义指令全局指令

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

局部指定

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

过滤器全局过滤器

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

局部过滤器

filters: { '过滤器名': function(value) { } }

使用

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

父子组件通信

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' } ]

引用组件时动态赋值

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

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

slot 插槽分发内容主要用于父组件向子组件传递标签+数据，（props和 **$emit()**只是传递数据）
子组件自定义插槽

name="aaa"> 不确定的标签结构 1 确定标签结构 name="bbb"> 不确定的标签结构 2

父组件传递标签数据

向 name=aaa 的插槽处插入此标签数据向 name=bbb 的插槽处插入此标签数据

兄弟组件通信（PubSubJS）订阅消息（绑定事件监听）

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

PubSub.subscribe('pubSub', (event, data) => { this.data = https://www.it610.com/article/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) // 使用