Vue高级

最新推荐文章于 2023-07-13 16:10:33 发布
最新推荐文章于 2023-07-13 16:10:33 发布
阅读量360 收藏
点赞数
文章标签： slot 作用域插槽 属性验证 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxskr/article/details/93723680
版权

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.
过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化

yxskr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue高级用法
acm_cn1234567890的博客
10-11 932
1. 动画特效----transition 2. 插槽 slot 插槽就是子组件中的提供给父组件使用的一个占位符，父组件可以对插槽填充任何内容。 插槽和组件的区别是： ①组件之间的传递是单纯的数据的传递，而插槽的传递是视图的传递。 ②插槽的内容显示是由谁调用就由谁来决定插槽的内容，组件的内容是提前已经写好了，只进行数据的简单改变。 3. Mixin 4. 过滤器 vue3已弃用 过滤器的使用 5. keep-alive的实现原理 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现
vue基础+高级用法
kuangjianming的博客
05-14 878
在vue2.x中，v-if和v-for同时使用，v-for优先级更高。v-model - 双向绑定 => :value + @input。执行顺序：extends > mixin > 引入组件。v-html -渲染html，慎用，防止攻击脚本的注入。从预定的配置中拓展出来一个独立的配置项进行合并。在vue3中，v-if始终高于v-for。v-text - 只渲染字符串。外部做结构描述勾勒，内部做传参。v-once - 只渲染一次。
高级检索思路记录
qq_45118325的博客
07-13 242
高级检索实现思路记录
VUE3 添删改查示例代码 包含高级查询 排序 字段筛选 打印 导出
02-22 1048
这段实例代码是使用 ElementPlus完成的 由代码生成器生成。包含了表单验证 添删改查 表格排序 字段筛选 JS端的打印与导出。望vue3开发人员 开发越来越顺 赚钱越来越多。由于使用了自动引用 所以没有import。
Vue中的高级语法
qq_34771938的博客
12-01 533
一、Mixin 混入的基本语法 Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 一个 mixin 对象可以包含任意组件选项。 当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。 1. 选项合并 注意： 组件 data、methods 优先级高于mixin data、methods 优先级。 生命周期函数，先执行 mixin 里面的，再执行组件里面的。 const myMixin = { data(){ .
详解vue高级特性
10-15
Vue.js 是一款流行的前端框架，其高级特性极大地增强了开发者构建复杂应用的能力。本文将深入探讨Vue的几个关键高级特性，包括watch的进阶用法、$event的不同表现以及异步更新队列的工作原理。 首先，让我们关注Vue...
vue高级教程.zip
02-18
Vue高级教程旨在帮助开发者深入理解Vue的核心概念，并提升他们在实际项目中的应用能力。本教程将围绕“vue-router”展开，这是Vue.js官方推荐的路由库，用于管理应用的视图导航。 一、Vue.js基础 在开始学习vue-...
vue高级面试题2024-高级冲刺题
04-19
【Vue.js 高级面试题解析】 在前端开发领域，Vue.js 是一款广泛使用的轻量级MVVM框架，尤其在构建复杂用户界面时表现出色。本文将深入探讨Vue.js中的核心概念，以及与MVVM模式的关系。 **MVVM 模式详解** MVVM...
【Vue高级进阶】探索Vue自定义指令的无限可能
最新发布
07-04
Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序。它由前谷歌工程师尤雨溪（Evan You）创建，并首次发布于2014年。Vue以其简洁、高效和易学的特点迅速赢得了开发者的青睐。 ...
vue高级篇
apple_52138126的博客
04-13 734
笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: g
深入理解Vue router的部分高级用法
10-18
主要介绍了Vue router的部分高级用法，主要是针对已经有初步了解Vue-router的人，通过本文主要给大家介绍路由元信息，滚动行为以及路由懒加载这几个的使用方法。感兴趣的朋友一起看看吧
Vue.js中关于侦听器（watch）的高级用法示例
10-18
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。下面这篇文章主要给大家介绍了关于Vue.js中关于侦听器（watch）的高级用法的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
vue20道经典面试题，由初级到中高级
01-07
整理的vue20道经典面试题，由初级到中高级，高级部分可以忽略
VUE-高级使用
weixin_43624810的博客
04-25 277
脚手架环境配置 1.安装 node js 安装完成后 cmd 打开命令提示符窗口，输入： npm -v 检测是否安装成功，如果输出版本号，则表示安装成功。 2.配置 npm npm（node package manager）：nodejs 的包管理器，用于 node 插件管理（包括安装、卸载、管理依赖等）因为 npm 安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，所以我们乐于分享的淘宝团队干了这事。来自官网：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步
Vue —— Search搜索组件
weixin_54966486的博客
03-28 5622
步骤 拆分静态组件（略） 写 Api 接口 api/request.js //对 axios 进行二次封装 import axios from "axios"; //引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法 import nprogress from 'nprogress'; import "nprogress/nprogress.css" //1.利用axios对象的create,去创建一个axios实例 //2.
没有废话的vue高级进阶( 三 ) 组件高级用法及最佳实践
weixin_33755847的博客
05-09 6406
世界上有太多孤独的人害怕先踏出第一步。 ---绿皮书 书接上回，上篇介绍了vue组件通信比较有代表性的几种方法，本篇主要讲述一下组件的高级用法和最佳实践，争取用最少的篇幅占领高地！（多说一句，后续这个系列会有vue最佳实践和源码解读，我总有办法能让大家看懂，所以点赞关注，不迷路啊，小老弟 本篇主要内容 递归组件 动态组件 异步组件 内联模板 inline-template的使用 全局组...
《Vue 高级框架开发》——Vue基础语法（2）
吴小花的博客
02-19 278
1.表单控件绑定 v-model 指令在表单控件元素(输入框，复选框，多个勾选框，选择列表)上创建双向数据绑定 <template> <div> <input v-model="message" > <p>Message is: {{ message }}</p> <!-- 多个勾选框 --> ...
VUE 高级工程师面试题目
06-10
以下是一些可能会在 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、付费专栏及课程。

余额充值