Vue高级

slot 作用域插槽
1. 旧: slot-scope

	* 使用流程

		* 在组件的模板中书写slot插槽,并将当前组件的数据通过 v-bind 绑定在 slot标签上(<slot name = "default" :msg = "msg"></slot>)
		* 在组件使用时,通过slot-scope = "slotProp" 来接收slot标签身上绑定的数据( <template slot = "default" slot-scope = "slotProp">)
		* 通过 slotProp.xxx 就可以进行使用了( <p> {{ slotProp.msg }} </p>)
	* <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><Hello><template slot = "default" slot-scope = "slotProp"><p> {{ slotProp.msg }} </p></template></Hello></div><template id="hello"><div><slot name = "default" :msg = "msg"></slot></div></template></body><script src="../../lib/vue.js"></script><script>Vue.component('Hello',{template: '#hello',data () {return {msg: 'hello'}}})new Vue({el: '#app'})</script></html>
2. 新: v-slot
{{ slotProp.msg }}
new Vue({components: {'Hello': {template: '#hello',data () {return {msg: 'hello'}}}}}).$mount('#app')属性验证案例: 价格的增加 , 拿到的数据必须做验证 309 + 10 319 30910 1. props: [ 'msg' ] 没有进行验证,知识单纯的接收了一个父组件传递来的数据 2. props: { attr: attrType } 进行普通属性验证 3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值 4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意: 除了以上形式的属性验证以外,将来工作中还可能遇到的是 第三方封装的类库 vue-validate vee-validate …
过滤器
1.
什么是过滤器? 用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等
Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式
1.
使用方式

	1. 

全局定义过滤器
2.

{{ time | timeFilter('/)}}

3. Vue.filter('timeFilter',function ( val,type ) { console.log( val ) //val 就是我们获得的数据 // return newVal return 的结果就是格式化之后的新数据 return的结果就是页面呈现的结果

var date = new Date ( val )

// 2019-6-26

return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})

	1. 

局部定义过滤器

new Vue({
el: ‘#app’,
data: {
time: Date.now()
},
filters: { //过滤器的配置项
‘timeFilter’: function ( val,type ){
var date = new Date ( val )
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
}
}
})
1.
过滤器要想获得我们的数据,要通过一个叫做 ‘管道符 | ’ 来获取数据
2.
过滤器是对已经有的数据进行格式化,也就是必须先有数据,在去格式化

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一些可能会在 Vue 高级工程师面试中被问到的问题: 1. 说一下 Vue 的生命周期钩子函数及其执行顺序。 答:Vue 的生命周期钩子函数可以分为 8 个阶段,从创建、挂载、更新、销毁等不同的阶段。它们的执行顺序如下: - beforeCreate:实例刚被创建,组件属性和方法还未初始化; - created:实例已经完成数据观测、属性和方法的运算,但 DOM 元素还未生成; - beforeMount:模板编译完成,但还未挂载到 DOM 上; - mounted:模板已经编译完成,已经挂载到 DOM 上,可以进行 DOM 操作; - beforeUpdate:数据更新触发重新渲染之前执行,可以在此对更新前后的状态进行比较; - updated:数据更新导致重新渲染完成,此时 DOM 元素也已经更新完成,可以进行 DOM 操作; - beforeDestroy:实例销毁之前执行,可以进行清理工作; - destroyed:实例已经被销毁,组件中的属性和方法已经不存在,不能再访问。 2. 说一下 Vue 中组件间的通信方式。 答:Vue 中组件间的通信方式主要有: - 父子组件之间的通信:父组件通过 props 向子组件传递数据,子组件通过 $emit 向父组件发送事件; - 兄弟组件之间的通信:可以通过一个共同的父组件作为中介,将数据通过 props 层层传递,或者可以使用一个空的 Vue 实例作为事件总线,通过 $on 和 $emit 发送和接收事件; - 跨级组件之间的通信:可以通过 provide 和 inject 实现跨级组件之间的数据传递; - 任意组件之间的通信:可以使用一个空的 Vue 实例作为事件总线,通过 $on 和 $emit 发送和接收事件,或者使用 Vuex 管理应用的状态。 3. 说一下 Vue 中的 v-model 原理及如何自定义一个支持 v-model 的组件。 答:v-model 实际上是语法糖,相当于将组件的 value 属性绑定到一个输入框的 value 属性,并监听输入框的 input 事件来更新组件的 value 值。如果是一个自定义组件,需要通过 props 接收 value 值和 input 事件,并在组件内部触发 input 事件来更新 value 值。具体实现方法如下: ```html <!-- 父组件中使用自定义 v-model 组件 --> <custom-input v-model="message"></custom-input> <!-- 自定义 v-model 组件 --> <template> <div> <input :value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: ['value'] } </script> ``` 在自定义组件中,通过 props 接收 value 值,并将其绑定到 input 元素的 value 属性上,同时监听 input 事件,并在事件处理函数中通过 $emit 方法触发 input 事件,并将输入框的值作为参数传递给父组件来更新 value 值。 4. 说一下 Vue 中的虚拟 DOM 及其作用。 答:Vue 中的虚拟 DOM 是一个轻量级的 JavaScript 对象,它表示了真实 DOM 的层次结构和属性,可以通过对比两个虚拟 DOM 的差异,最小化地修改真实 DOM,提高页面渲染的效率。虚拟 DOM 的主要作用如下: - 提高页面渲染效率:使用虚拟 DOM 可以减少对真实 DOM 的操作,从而提高页面渲染的效率; - 跨平台:虚拟 DOM 可以在浏览器和服务器(Node.js)环境中使用,实现了前后端渲染的一致性; - 实现组件的高效更新:通过对比前后两个虚拟 DOM 的差异,可以最小化地修改真实 DOM,从而实现组件的高效更新。 5. 说一下 Vue 中的 computed 和 watch 的区别及适用场景。 答:Vue 中的 computed 和 watch 都是用来监听数据变化的,但它们的区别如下: - computed:计算属性是基于它们的依赖进行缓存的,只有在相关依赖发生变化时才会重新计算。计算属性适用于基于现有数据计算而来的数据,比如对数据进行过滤、排序、格式化等操作; - watch:观察者监听的数据发生变化时会执行回调函数。适用于监听某些数据的变化,并在数据发生变化时执行一些异步或开销较大的操作。 综上所述,computed 和 watch 适用于不同的场景,computed 适用于基于现有数据计算而来的数据,而 watch 适用于监听某些数据的变化,并在数据发生变化时执行一些异步或开销较大的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值