vue双向数据绑定原理?
vue如何封装可复⽤的组件?以及请举例说明你封装过的组件?
讲解
- 分析项⽬的所有⻚⾯结构和业务功能,抽离出相同的⻚⾯结构和业务功能
- 在src⽬录下创建⼀个components这个的⽂件夹
- 在这个⽂件夹内创建可复⽤的组件
- 在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件,并进⾏注册,以标签的形式写在对应的地⽅
- 接下来就需要对可复⽤的组件内容要进⾏封装,那么在封装的时候我们要注意组件的封闭性和开放性以及粗细粒度
- 所谓的这个封闭性就是当我们在组件内部定义好之后外部是⽆法进⾏修改的,⽐如当前有⼀个关闭的符号,或者有⼀个箭头,我们需要不管任何⼈使⽤该组件时候都能够显示这个箭头,⽆法从外部进⾏修改
- 所谓的开放性就是我们需要将动态的内容以及组件通信的⽅式进⾏数据传递,保证组件的可扩展性
- ⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装,也可以⼀个⻚⾯包含了多个组件,⾄于到底选择哪种呢,这个是没有⼀个标准的,我们需要根据⾃⼰的业务需求去进⾏判断
- 总结来说,所谓的如何封装可复⽤组件其实技术核⼼就是通过我们vue提供的组件通信在结合slot插槽来进⾏分装
- ⽐如:封装⼀个搜索框组件:
- 在components⾥⾯创建search.vue
- 在search.vue⾥⾯实现搜索框的布局
- 在props⾥⾯接受 title, bgColor, size , icon,以及当点击搜索按钮或者点击回⻋键的时候,触发⼀个⽅法,通过this.$emit将输⼊框输⼊的值传递给⽗组件
- 接下来要使⽤这个搜索组件,我们需要通过import 在⽗组件内引⼊⼦组件,并在componetns属性⾥⾯进⾏注册
- 在⻚⾯就可以使⽤,这个时候我们可以通过传递titile⽼控制⼦组件搜索框显示的内容,通过bgcolor可以控制搜索框的背景颜⾊,也可以通过size设置搜索框字体的⼤⼩,也可以通过icon来设置搜索框的图标, 通过监听$emit⾥⾯定义的⽅法来获取搜索框输⼊的值
说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤?
keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，
我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现
被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated（激活） deactivated（停用）这两个钩子函数
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max-数字最多可以缓存多少组件。
keep-alive 标签 有 include 属性和 exclude 属性
include 属性 定义了要缓存谁
exclude属性 定义了不缓存谁
还可以利用 路由的 meta 信息去规定缓存谁不缓存谁
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: { //路由元信息
title: "首页",
keepAlive: false,
},
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
/* $route.meta 拿到路由元信息 用keepAlive属性来判断显示路由用那个坑 */
<!-- 也可以用路由的meta信息 去指定 哪个组件缓存哪个不缓存 -->
说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明?
所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filters来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部项⽬中我们通过过滤器将后台返回的状态0 和1 转化为⽀付或者未⽀付
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 通过管道符 使用自定义的过滤器 -->
<p>{{msg | change}}</p>
</div>
<script>
// 创建一个过滤器
Vue.filter('change',function(msg){
// 使用正则表达式 全局匹配
return msg.replace(/过滤器/g,'变量')
})
var vm = new Vue({
el: "#app",
data: {
msg:"过滤器，分为全局过滤器和局部过滤器"
},
})
</script>
</body>
