目录
第四章
一、混入mixin
1.1什么是Mixins
mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件中 script 项中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象时所有 mixins 对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。
1.2何时使用Mixins
当我们存在多个组件中的数据或者功能很相近时,我们就可以利用 mixins 将公共部分提取出来,通过 mixins 封装函数,组件调用他们是不会改变函数作用域外部的。
二、 自定义指令
directive
Vue中多有的指令都以 v- 来调用。但是,有时候Vue提供给我们的指令并不能满足我们的需求,这个时候 我们就需要自定义指令。
指令允许我们对普通 DOM 元素进行底层操作。可以全局注册也可以局部注册
2.1全局注册
使用Vue.directive
2.2局部注册
在Vue实例或组件中添加新的选项directives
2.3钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<input v-focus="msg" type="text" >
{{msg}}
<input v-myshow="msg" type="text" >
</div>
<script>
Vue.directive('focus',{
inserted(el){
el.focus()
},
bind(el,binding,vnode){
el.style.backgroundColor=binding.value
}
})
new Vue({
directives:{
'myshow':{
inserted(el){
},
bind(el,binding,vnode){
el.value=binding.value;
}
}
},
el:"#app",
data:{
msg:'red'
},
methods:{}
})
</script>
</body>
</html>
三、过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器:
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用过滤器 -->
<div>{{ new Date() | fmtDate_global}}</div>
<div :title="new Date() | fmtDate_global">鼠标悬停查看时间</div>
</div>
<script>
// 全局注册过滤器
Vue.filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
})
new Vue({
el: '#app',
})
</script>
</body>
</html>
四、render渲染函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
render函数的作用是,当场景中用 template 实现起来代码冗长繁琐而且有大量重复,这个时候使用就可以极大的简化代码
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a :friuts="friuts">
列表
</my-a>
</div>
<script>
let myA={
props:{
friuts:{
type:Array,
}
},
beforeMount(){
alert('beforeMount')
},
mounted(){
alert('mounted')
},
render(h){
alert('2222')
let lis=this.friuts.map(item=>{
return h('li',{},item)
})
return h('ul',{},[this.$slots.default,...lis])
},
// template:`
// <div>
// <ul>
// <li v-for='item in friuts'>{{item}}</li>
// </ul>
// </div>
// `,
data(){
return {
}
}
}
new Vue({
components:{
'my-a':myA
},
el:"#app",
data:{
friuts:['苹果','香蕉','菠萝']
},
methods:{}
})
</script>
</body>
</html>