![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue基础知识
文章平均质量分 60
Vue原理和Vue基础知识
youhebuke225
这个作者很懒,什么都没留下…
展开
-
Vue基础知识之目录
vue基础知识目录原创 2022-06-02 15:03:00 · 517 阅读 · 0 评论 -
vue判断组件的值是否传过来
在 Vue 中,判断组件是否接收到了传入的属性值(props),你可以直接在组件内部检查这些属性是否已定义和是否具有有效的值。提供一个默认值,这样即使父组件没有传递该属性,子组件也能有一个可用的值。首先,假设你有一个父组件,它向子组件传递了一个名为。的变化,并在其值改变时执行特定的逻辑。的值来显示不同的内容。然后,在子组件中,你可以通过。钩子函数中,你可以检查。指令用于在模板中根据。原创 2024-07-01 15:33:56 · 222 阅读 · 0 评论 -
vue在script中使用过滤器
如果你确实需要在全局范围内使用类似过滤器的功能,并且这些功能不依赖于特定的 Vue 实例或组件,那么你可以考虑在 Vue 原型上添加方法或使用 JavaScript 的模块系统来导出和导入这些函数。如果你确实需要在多个地方重复使用相同的格式化逻辑,并且不想在模板中直接调用方法,那么计算属性是一个很好的选择。计算属性是基于它们的依赖进行缓存的,只有当依赖项发生变化时,它们才会重新求值。在上面的示例中,我们并没有使用 Vue 的过滤器,而是使用了一个名为。中调用了这个方法,并将结果用于模板中的显示。原创 2024-06-22 17:19:55 · 263 阅读 · 0 评论 -
vue项目,普通js文件添加全局变量
最好的实践是避免在全局作用域中定义变量,因为这可能会导致不可预测的行为和难以调试的问题。尽可能使用模块导出或 Vuex 来管理你的状态。如果你确实需要全局变量,确保它们被适当地命名和文档化,以减少潜在的冲突和误解。原创 2024-04-26 16:21:41 · 515 阅读 · 1 评论 -
vue2中的文件命名规范
请注意,这些规范并不是硬性的规定,它们更多是最佳实践。不同的项目或团队可能会有自己的命名规范,重要的是保持项目内部的一致性。同时,在遵循命名规范的同时,也要考虑到代码的可读性和维护性。在Vue 2中,文件命名规范是保持项目一致性和可读性的重要部分。原创 2024-04-26 14:06:39 · 419 阅读 · 0 评论 -
vue使用外部的模板
在 Vue 2 中,没有直接内置的方式来使用外部 HTML 文件作为组件的模板。你通常需要结合前端工程化工具(如 Webpack)或使用 AJAX 等技术来实现。每种方法都有其适用场景和限制,你需要根据你的项目需求来选择最合适的方法。同时,无论使用哪种方法,都要确保外部 HTML 内容的安全性,避免潜在的安全风险。原创 2024-04-26 14:03:27 · 486 阅读 · 0 评论 -
vue2 mixin的用法
在 Vue 2 中,mixin 是一种分发 Vue 组件中可复用功能的非常灵活的方式。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin 在 Vue 中是一个非常强大的功能,它允许你创建可重用的代码片段,并在多个组件之间共享这些代码片段,从而提高了代码的可维护性和复用性。对于大多数值,如对象或数组,将使用深层次的合并。等选项将自动合并到组件中。你可以在组件的模板或方法中直接使用这些属性和方法。当你在组件中使用 mixin 后,mixin 中的。原创 2024-04-26 13:39:49 · 567 阅读 · 0 评论 -
vue3 emits: [‘update:modelValue‘]
您实际上是在告诉 Vue:“这个组件可以触发一个事件来更新与。与此组件绑定时,父组件的数据将会随着输入框的值的变化而更新。的 prop,并在输入框的值发生变化时触发。是 Vue 3 中用于自定义组件与。在这个例子中,自定义组件接收一个名为。选项用于声明组件可以触发的事件。这样,当您在父组件中使用。内部的输入框的值的变化而更新。所以,当您在自定义组件中声明。指令配合工作的特殊事件名。在 Vue.js 中,原创 2024-04-18 14:43:56 · 938 阅读 · 0 评论 -
vue计算属性不可传参
Vue 的计算属性(computed properties)本身是不能直接传参的。计算属性是基于它们的依赖进行缓存的,它们返回的值会根据其依赖属性的变化而自动更新。计算属性通常用于对复杂的数据进行处理,并返回处理后的值。如果你需要根据不同的参数来计算不同的值,你可能需要使用方法(methods)而不是计算属性。方法可以接受参数,并返回基于这些参数的计算结果。然而,方法不会像计算属性那样进行缓存,每次调用都会重新计算。是一个计算属性,它不能接受参数,并返回。是一个方法,它接受一个。原创 2024-04-03 10:11:07 · 644 阅读 · 0 评论 -
vue的diff算法
把属性结构按照层级进行分解,只比较同级元素他包括虚拟dom的对比,以及对比之后更新真实dom。原创 2023-04-03 17:59:14 · 260 阅读 · 0 评论 -
Vue3中的h函数
众所周知,vue内部构建的其实是虚拟DOM,而虚拟DOM是由虚拟节点生成的,实质上虚拟节点也就是一个js对象事实上,我们在vue中写的template,最终也是经过渲染函数生成对应的VNode而h函数就是用来生成VNode的一个函数,他的全名叫做createVNode。原创 2023-03-03 22:32:04 · 6915 阅读 · 2 评论 -
vue2原理之defineProperty
我们新建一个对象,建完对象后给对象赋值属性,我们一般进行如下的操作除此之外,我们还可以使用来对对象添加属性,如下我们可以看到,她也是为对象obj添加了age属性。原创 2022-11-04 17:31:13 · 279 阅读 · 0 评论 -
Vue2响应式原理之简介
vue响应式原理的大致图像如下当然我们现在看有点晕,不过,让我们一点一点的深入。原创 2022-11-01 23:36:10 · 170 阅读 · 0 评论 -
Vue原理之ref与shallowRef
专栏目录请。原创 2022-10-08 09:34:10 · 424 阅读 · 0 评论 -
vue路由之路由的两种模式
一般路由分两种形式一种是哈希路由,最明显的特征就是路由中有一个#还有一种就是history路由,路由中不带#原创 2022-09-30 14:55:34 · 505 阅读 · 0 评论 -
vue响应式原理之reactive与shallowReactive
vue响应式原理之reactive与shallowReactive原创 2022-08-11 10:51:14 · 190 阅读 · 0 评论 -
Vue3响应式原理
vue3 Proxy代理原创 2022-08-10 09:16:16 · 140 阅读 · 0 评论 -
vue-router4之路由元信息
访问第一种方法路由可能匹配到多个路由记录,比如,会匹配到和,这两个路由组件这个时候我们需要遍历的数组,来寻找路由记录中的字段第二种方法,他记录着所有的信息TS可以通过扩展 接口来输入 字段......原创 2022-07-07 17:51:22 · 554 阅读 · 0 评论 -
vue-router4之组合式API
我们在setup函数中我们用来访问,使用来访问其中 是一个响应式的对象,所以我们可以对他的任何属性进行监听,但是应该尽量避免监听整个对象,应该直接监听希望改变的参数导航守卫在组合式api中只有离开守卫和更新守卫......原创 2022-06-30 22:03:31 · 729 阅读 · 0 评论 -
vue-router4之导航守卫
参数即将要进入的目标当前导航正要离开的路由表示路由是否要放行,他是一个函数,里面可以跟一个对象,对象中是重定向的路由,每次导航需要注意的是,next只能调用一次返回值 表示取消导航,不跳转一个路由地址,效果和相同或者,直接导航到所在的路由错误抓取当路由跳转出现任何错误的时候,都会调用事件 点击调用时机:导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。后置钩子后置钩子不会接受函数,也不会改变到行本身一般用于它们对于分析、更改页面标题、声明页原创 2022-06-29 09:16:04 · 660 阅读 · 0 评论 -
vue-router4之重定向与别名
他后面可以跟 字符串、对象或者函数字符串这里的可以完全不用写,因为重定向到了不会渲染对应的对象这里我们使用了命名路由函数相对重定向别名当我们访问的时候,他其实是访问的多个别名需要我们提供一个数组...原创 2022-06-28 09:08:02 · 517 阅读 · 0 评论 -
vue-router4之命名路由与命名视图
跳转or命名视图如果路由没有设置名字,则默认为 官网添加上了属性路由配置注意加上了s子路由的页面嵌套的定义原创 2022-06-27 09:28:49 · 371 阅读 · 0 评论 -
vue-router4之嵌套路由
例子目录index.jsAboutChildA.vueAboutChildB.vueAbout.vue效果原创 2022-06-26 12:37:36 · 804 阅读 · 0 评论 -
vue-router4之路由匹配语法
这里我们需要明白一些正则表达式 点击语法在参数后面直接加一个括号,括号中写正则表达式,表示当前参数值匹配什么类型可重复的参数传参的时候我们要提供一个数组sensitive 与 strict默认情况下,路由不区分大小写,并且能匹配尾部是否有斜线的路由...原创 2022-06-25 11:01:29 · 1062 阅读 · 0 评论 -
vue-router4之路由的跳转
replace他最终调用的是此外,还有属性,点击所有的导航方法都会返回一个params参数需要注意的是如果提供了属性又提供了属性,那么属性会自动失效params参数一般只提供和的数据类型,其他类型如、会被自动字符串化router.replace他不会向history中添加新纪录router.go接收一个整数为参数,前进或者后退多少步...原创 2022-06-25 10:30:05 · 1932 阅读 · 0 评论 -
vue-router4之路由传参
传参定义路由跳转的时候传参展示的页面我们这里使用了两种传参的方式定义传参使用所有的参数都保存在下定义我们会发现query传参的时候,我们对于参数没有什么特殊的定义传参使用所有的参数都保存在下.........原创 2022-06-24 17:52:57 · 4736 阅读 · 1 评论 -
vue-router之简单使用
或者项目中的使用我们在src下新建的目录,并在下面新建的文件,专门用于管理路由并在src下新建来专门存放路由组件,这里我们新建了两个路路由文件和目录如下展示位置使用标签进行路由的展示使用进行路由的跳转路由注册路由文件路由挂载效果当我们点击不同的路由导航的时候,在路由的显示位置,就会展示不同的页面......原创 2022-06-24 14:51:19 · 208 阅读 · 0 评论 -
Vuex之在项目中使用
对于大型项目,官方推荐的项目结构如下实例具体的例子可以看官方给的一个github上的例子,点击原创 2022-06-22 09:21:19 · 108 阅读 · 0 评论 -
Vuex4之Composition API
访问mutation 和 action注意在我们使用组合式api的时候,也可以使用ES6的接口语法原创 2022-06-22 09:08:02 · 267 阅读 · 0 评论 -
Vuex之module的使用
vuex的module原创 2022-06-21 09:37:14 · 1493 阅读 · 0 评论 -
vuex4之Actions
但是遇到异步请求怎么办?原创 2022-06-20 09:23:58 · 278 阅读 · 0 评论 -
vuex4之Mutation
注册事件触发带参数的注册参数为基本类型注册触发参数为对象注册触发第一种方式第二种方式mapMutations在组件中的使用原创 2022-06-18 09:33:32 · 281 阅读 · 0 评论 -
vuex4之mapGetter的简单使用
效果当我们点击增加人数的时候,我们会发现所有的属性都跟着动了原创 2022-06-17 14:03:01 · 846 阅读 · 0 评论 -
Vuex值mapstate的简单使用
在模板中直接使用这些变量原创 2022-06-17 09:21:45 · 582 阅读 · 3 评论 -
Vuex4之简单使用
或者原创 2022-06-16 22:49:55 · 389 阅读 · 0 评论 -
Vue3之单文件组件(SFC)
就是的文件,必须由 预编译为标准的 JavaScript 与 CSS样式特性点击我们可以在标签上写上,这样表示当前的样式只在当前文件中有用,他是通过postCSS来实现的编译后选择器深度选择器插槽选择器全局选择器style标签全局选择器moudle我们可以在标签上写上,这样他会把相关的类封装到一个的对象中,使用的时候使用绑定以及对象的取值语法在标签中定义的类也是在当前组件有用单文件组件的可以使用函数,他的参数是一个响应式数据,这样css属性可以访问到我们定义的响应式的数原创 2022-06-14 09:58:32 · 3126 阅读 · 0 评论 -
Vue3之新的api
新的api原创 2022-06-13 09:18:42 · 177 阅读 · 0 评论 -
Vue3之Suspense
异步组件使用Suspense当我们刷新加载异步组件的时候就会发现,在没有加载出异步组件的时候,会先显示,这样会有一个比较好的用户体验原创 2022-06-12 11:53:40 · 386 阅读 · 0 评论 -
vue3之vue2到vue3到底变化了什么
官网原创 2022-06-12 09:49:13 · 128 阅读 · 0 评论 -
Vue3之Teleport
效果我们会发现我们的弹窗被放到了下面原创 2022-06-12 09:34:57 · 301 阅读 · 0 评论