随机——vue

vue 组件

注册全局组件：

方法，Vue.component(tagName,options)，如下

第一个参数是自定义的组件名, 命名规则：小写，并且包含一个短杠

第二个参数是一个对象，里面的 template 位置储存着这个第一个参数（自定义的组件名）所代表的元素

Vue.component('my-component', {

​	template: '<div>一个自定义的元素<div>'

})

ps.确保在初始化实例之前注册组件

new Vue({

​	el: '#example'

})

局部注册组件

可以通过某个 Vue 实例/组件 的实例选项 components 注册仅在某个作用域可用的组件

var child = {

​	template: '<div>一个自定义的元素<div>'

}

new Vue({

​	// ...

​	components: {

​		'my-conponent': child

​	}

})

这样， my-component 将只在父组件模板中可用

构造 Vue 实例时可传入很多选项，其中 data 数据必须是一个函数。以下这样会报错：

Vue.component('my-conmponent', {

​	template: '...',

​	data: {

​		message: 'hello'

​	}

})

实际上应该要这样写 data

data : function() {

​	return {

​		message: 'hello'

​	}

}

组件组合

在 Vue 中， 父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

使用 prop 传递数据

组件实例的作用域是孤立的，父组件的数据需要通过 prop 才能下发到子组件中。

Vue.component('magua', {

​	// 声明 props

​	props : ['message'],

​	template: '<span>{{message}}<span>'

})

使用时：

<child message='hello'><child>

显示结果：

hello

绑定HTML Class

可以使用 v-bind:class 实现动态的切换 class

对象语法

使用对象的方式实现

<div v-bind:class='{ active: isActive }'><div>

上面表示 这个 active class 存在与否取决于它的数据属性 isActive 。可以在对象中传入不止一个动态属性，不必在内联里

<div v-bind:class='classObj'><div>

data: {

​	classObj: {

​		active: true,

​		'text-danger': false

​	}

}

数组语法

以数组的方式实现

<div v-bind:class='[activeClass, errorClass]'></div>

data: {

​	activeClass: 'active',

​	errorClass: 'text-danger'

}

实际渲染

<div class='active text-danger'>

数组语法实现根据条件来切换列表中的 class，使用三元表达式

<div v-bind:class='[isActive ? activeClass : '', errorClass]'></div>

当有多个条件的 class 时，这样写有些繁琐，所以在数组语法中也可以使用对象语法

用 key 管理可重复使用的元素

当两个模板使用了同样的 input 元素时，切换时，input 不会被替换，仅仅是替换它的其他属性，例如 placeholder 。当这样的方式不符合实际需求时， 需要让两个同样的元素分别独立时，可以通过给元素添加一个具有唯一值的 key 属性 实现

事件处理方法

v-on

事件修饰符

.stop 阻止事件继续传播

<a v-on:click.stop=doThis></s>

不再重复页面

<form v-on:submt.prevent = 'onSubmit'></form>

修饰符可以串联

<a v-on:click.stop.prevent='dathat'></a>

zv-if 与 v-show 的区别

v-if 在初始渲染时条件不成立，则什么也不做，直到条件第一次成立，才会开始渲染条件块，它在切换过程中条件块内的事件监听器和子组件会适当地被销毁和重建。所以 v-if 的切换开销较大，如果需要频繁地切换，则使用 v-show

v-show 只是简单进行基于 css 进行切换

v-once

只渲染元素和组件一次，随后当进行页面数据操作，变动数据时，拥有 v-once 的元素及组件将被视为静态内容并跳过。可用于优化更新性能

v-pre

拥有这个属性的元素不需要 vue 表达式。可以用于跳过大量没有指令的节点，加快编译

在 vue 里传递 event

直接使用，不需要在调用的地方写进 args