Vue全局API、选项、内置组件
目录
- 全局API
- Vue.directive( 指令名称, 指令的配置选项 ) 自定义指令
- Vue.filter( id, [definition] ) 过滤器
- 全局过滤
- 局部过滤
- Vue.component( id, [definition] ) 组件注册
- Vue.mixin( mixin ) 混入
- 全局混入 Vue.mixin(config)
- 局部混入 mixins:[ ]
- 选项
- computed 计算
- 方法一：方法形式，下拉菜单案例
- 方法二：存储器方法，可以读写，注册中双向填写案例
- watch 侦听
- 浅度侦听
- 深度侦听
- 常用选项
- 内置组件
- 动态组件
- 过渡效果
- 插槽 slot
- 普通插槽
- 命名插槽
- 作用域插槽
全局API
Vue.directive( 指令名称, 指令的配置选项 ) 自定义指令
用于自定义全局指令
Vue.directive('focus', {
bind: function() {//可用于一次性初始化设置
console.log('当指令绑定到dom元素是触发')
inserted: function(el) {//被绑定元素插入父节点时调用
el.focus();//第一个参数，获取DOM元素
}
})
Vue.filter( id, [definition] ) 过滤器
用于操作数据。相当于computed选项，不过没有全局computed。
<div id="app">
全局过滤
全局书写，Vue.filter(‘过滤名称’，function(){} )
Vue.filter('timerFilter',function ( val,type ) {
var date = new Date( val )
if ( val ) {
return date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
} else {
return ''
}
})
new Vue({
el: '#app',
data: {
time: ''
},
methods: {
getTime () {
this.time = new Date()
}
}
})
局部过滤
组件中书写，filters:{
‘过滤名称’：function(){}
}
new Vue({
el: '#app',
data: {
time: ''
},
methods: {
getTime () {
this.time = new Date()
}
},
filters: {
'timerFilter': function ( val ) {
var date = new Date( val )
if ( val ) {
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
} else {
return ''
}
}
}
})
Vue.component( id, [definition] ) 组件注册
用于全局注册组件
<template id="father">
<div>
<h3>fatherh3>
<Son>Son>
div>
template>
Vue.component('Father', {
template: '#father'
})
Vue.mixin( mixin ) 混入
用于将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想。
全局混入 Vue.mixin(config)
注：所有实例可用，且分离出去的mixin权利没有总部的大
<script src="./js/mixin.js"></script>//引入
Vue.mixin({
methods: {
...obj.methods
}
})
局部混入 mixins:[ ]
注：仅当前实例可用，且分离出去的mixin权利没有总部的大
<script src="./js/data.js"></script>
<script src="./js/mixin.js"></script>//引入
new Vue({
el: '#app',
data: {
yybMsg: '这是一个信息',
num: 2000
},
mixins: [data, obj]
})
选项
computed 计算
作用：在VM中处理数据信息，而并不是在V中
方法一：方法形式，下拉菜单案例
<body>
<div id="app">
<select name="" id="" v-model="state">
<option value="A">alloption>
<option value="F">finishedoption>
<option value="U">unfinishedoption>
select>
<ul>
<li v-for="todo in Newtodos">
{{ todo.task }}
li>
ul>
div>
body>
//JS部分
new Vue({
el: '#app',
data: {
state: 'A',
todos: [{
id: 1,
task: '任务一',
done: true
}, {
id: 2,
task: '任务二',
done: false
}, {
id: 3,
task: '任务三',
done: false
}, {
id: 4,
task: '任务四',
done: true
}]
},
computed: {
Newtodos() {
switch (this.state) {
case 'A':
return this.todos;
break;
case 'F':
return this.todos.filter(item => item.done == true);
break;
case 'U':
return this.todos.filter(item => item.done == false);
break;
}
}
}
})
方法二：存储器方法，可以读写，注册中双向填写案例
<body>
<div id="app">
<div>
请输入FirstName: <input type="text" v-model="firstName">
div>
<div>
请输入LastName: <input type="text" v-model="lastName">
div>
<div>
请输入FullName: <input type="text" v-model="fullName">
div>
div>
body>
//JS部分
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: {
get() {
if (this.lastName != '') {
return this.firstName + ' ' + this.lastName
} else {
return this.firstName
}
},
set(val) {
if (val.split(' ').length == 1) {
this.firstName = val.split(' ')[0];
} else {
this.firstName = val.split(' ')[0];
this.lastName = val.split(' ')[1];
}
}
}
}
})
watch 侦听
- 解释：
- watch里面key名称就是数据的名称
- 当数据改变时，watch里方法将自动触发
- 运用
- 项目中 - 上拉加载
- 异步操作 - 数据请求
浅度侦听
<div id="app">
<button @click="add">+button>
<p>{{ count }}p>
div>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add() {
this.count++
}
},
watch: {
count() {
document.title = this.count;
}
}
})
深度侦听
对象形式，将会侦听数据num对象中的所有数据
要点：deep:true , handler( )
<div id="app">
<button @click="add">+button>
<p>{{ num.count }}p>
div>
new Vue({
el: '#app',
data: {
num: {
count: 0
}
},
methods: {
add() {
this.num.count++
}
},
watch: {
num: {
deep: true,
handler() {
document.title = this.num.count;
}
}
}
})
常用选项
- data 数据
- props ( Array| Object ) 接收父组件的数据
- methods 方法
- el 挂载
- template 模板，替换挂载
内置组件
动态组件
- 可以通过component绑定不同的组件名称来动态展示不同组件。
<component is="组件名">component>
<component :is="val">component>
- 动态缓存组件
- keep-alive组件可以实现组件的缓存，让组件的切换能够更快
- keep-alive会激活两个钩子函数（设置在组件中）
- activated 激活（正在显示）时触发
- deactivated keep-alive被停用时触发
<keep-alive :include="val">
<component :is="val">component>
keep-alive>
过渡效果
使用 transition 组件
推荐使用 Bootstrap 动画库
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
属性：
- name 过渡名称
- mode 过渡模式 in-out / out-in
- enter-active-class 进入时的动画
- leave-active-class 离开时的动画
- 必写animated属性值
<div id="app">
<button @click="change">动画按钮button>
<transition
name="ZERO"
mode="in-out"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<p v-if="flag">p>
transition>
div>
插槽 slot
插槽，指给组件的内容预留一个空间。
组件标签内部的内容是不会被渲染的；但是，如果给一个插槽slot，就可以被渲染。
普通插槽
<div id="app">
<Hello> <p> 你好 p> Hello>
div>
<template id="hello">
<div>
<h3> hello组件 h3>
<slot>slot>
div>
template>
命名插槽
用name和slot属性绑定
<div id="app">
<Con>
<header slot="header">头部header>
<footer slot="bbb">尾部footer>
Con>
div>
<template id="con">
<div>
<slot name="header">slot>
<h3>组件h3>
<slot name="bbb">slot>
div>
template>
作用域插槽
作用域插槽可以让本只能在组件的模板中使用的数据，应用到组件的内容中。
<div id="app">
<Hello>
<template v-slot:default="scope">
<p>{{ scope.money }}p>
template>
Hello>
div>
<template id="hello">
<div>
<slot :money="money">slot>
div>
template>