1. props属性验证
注意：还是会正常的运行代码，只是对数据类型进行验证，判断是否有误
- 常用形式：
props: {
key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
}
如下所示：
报错 ：
- 需求：我现在想要 > 1000 我才要， 没有 > 1000 我就不要
- 解决： vue提供了一个 ：validator
props: {
key: {
validator( value ){
return value 的条件
}
}
}
报错：
- 不常用形式（表单的验证）
props: {
propA: [],
propB: {
type: String,
require: true
},
propC: {
type:String,
default: 'yyb'
},
propD: {
type: String,
default: function(){
return 'yyb'
}
}
}
- 有时候有的项目也会使用 vue-validate validate这些第三方库
2. 过滤器
概念：对数据进行格式化的一个函数
- vue 1.x版本一共提供了10个过滤器， 但是不满足人们使用，vue2.x全部不提供了， 交给开发者自己写
- 但是vue提供了定义过滤器的方式
- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
- 过滤器用给一个 ’ | ’ 表示， 我们称之为 ‘管道符’
定义局部的过滤器
html：
<div id="app">
<p>
{{ time }}
{{ time | timeFilter('/') }}
</p>
</div>
Js:
new Vue({
el: '#app',
data: {
time: Date.now()
},
filters: {
timeFilter( value,type ){
const date = new Date( value )
const result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
return result
}
}
})
定义全局的过滤器
html：
<div id="app">
<p>
{{ time }}
{{ time | timeFilter('/') }}
</p>
</div>
Js:
Vue.filter('timeFilter',function( value , type ){
const date = new Date( value )
const result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
return result
})
new Vue({
el: '#app',
data: {
time: Date.now()
}
})
3. 自定义指令 directive
- 全局自定义指令
Html:
<div id="app">
<div v-append v-if = "flag">
{{ msg }}
</div>
<input type="text" v-focus>
</div>
Js:
Vue.directive('focus',{
/* 钩子函数 */
bind () {
console.log('指令和元素第一次绑定')
},
inserted ( el, binding, vnode, oldVnode ) {
console.log('el',el)
console.log('binding',binding)
console.log('vnode',vnode)
console.log('oldvnode',oldVnode)
el.focus()
el.style.background = 'red'
}
});
Vue.directive('append',{
inserted (el) {
var p = document.createElement('P')
p.innerHTML = '你好吗'
el.appendChild(p)
},
update () {
console.log('update')
},
componentUpdated () {
console.log( 'componentUpdated' )
},
unbind ( el ) {
console.log( 'unbind' )
}
})
new Vue({
el: '#app',
data: {
msg: 'hello 指令',
flag: true
}
})
- 局部自定义指令
- 指令的钩子函数（一共有5个）
- bind :只调用一次，指令和元素第一次绑定的时候调用
- inserted ： 指令绑定的元素插入父节点的时候调用
- update ： 指令绑定的元素自身， 或是他的内容（子节点）发生改变的时候出发
- componentUpdated ： 指令绑定的组件自身， 或是他的内容（子节点）发生改变的时候出发
- unbind ： 指令和元素第一次解绑是调用（移除元素）
- 指令的钩子函数的参数
- el 当前元素
- binding 前端指令的所有信息
- vNode 当前指令绑定的虚拟节点
- oldVnode 指令绑定前的虚拟节点
4. 渲染函数 和 jsx
- 渲染函数 render函数 — 》 createElment
- jsx( javascript + xml )
- xml 就是一种标签化的数据格式
- jsx语法浏览器无法解析， 必须靠babel来解析
- jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点
<body>
<div id="app"></div>
</body>
<script type="text/babel">
new Vue({
el: '#app',
data: {
msg: 'hello jsx'
},
render(){
return (
<div>
{{ this.msg }}
</div>
)
}
})
</script>
5. 过渡 & 动画
https://cn.vuejs.org/v2/guide/transitions.html#过渡的类名
过渡指的是 用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果
Vue中一共给了四种解决方案， 但是我们常用的只有一种
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
7. slot
可以代替组件内直接写的内容
注意：写在模板中，可以让模板中的内容被解析（原始的模板template中的标签内容不会解析）
如何调节模板中的顺序呢？
<div id="app">
<Hello>
<header slot = 'header'>头部</header>
<section slot = "content"> 内容 </section>
<footer slot = "footer"> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = 'header'></slot>
<h3>hello vue</h3>
<slot name = "content"></slot>
<slot name = "footer"></slot>
</div>
</template>
Js:
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})