vue
文章平均质量分 82
收集自己平时在学习vue过程中的笔记
小白小白从不日白
这个作者很懒,什么都没留下…
展开
-
vue--ssr
目录一、 什么是服务器端渲染?1.1 初始化项目1.2 服务端渲染小案例1.3 右键查看源代码二、什么是客户端渲染?2.1 初始化项目2.2 查看源代码三、客户端渲染vs服务端渲染3.1 运行架构对比3.2 开发模式对比四、vue框架中的服务端渲染4.1 初始化项目4.2 vue服务端渲染最小demo4.3 遗留问题五、理解同构理念六、Nuxt.js框架使用6.1. 使用nuxt.js创建一个ssr项目6.2 启动项目6.3 查看源原创 2022-01-26 12:47:36 · 9138 阅读 · 1 评论 -
vue--组件开发
目录一、button 组件开发1.1 整体目标1.2 确定组件API1.3 编写测试基础Button1.4 完成type配置1.5 完成size配置1.6 完成事件绑定1.7 总结二、Editor编辑器组件开发2.1 确定基础API2.2 编写测试基础Editor2.3 完成v-model双向绑定2.4 总结一、button 组件开发1.1 整体目标了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使用v-...原创 2022-01-25 14:44:02 · 2740 阅读 · 0 评论 -
vue--原理
一、数据响应式1.1 响应式是什么一旦数据发生变化,我们可以立刻知道,并且做一些你想完成的事情,这些事情包括但不限于以下:发送一个网络请求 打印一段文字 操作一个dom ....1.2 如何实现数据响应式在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别是: 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 1.原创 2022-01-23 18:05:22 · 829 阅读 · 1 评论 -
vue--自定义钩子函数
钩子函数: bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated:指令所在组件的 VNode 及其子 V原创 2021-09-03 14:29:21 · 663 阅读 · 0 评论 -
vue--Non-prop属性
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>1.inheritAttrs属性:<script> //Non-prop属性 const app = Vue.createApp({ template: ` <div> .原创 2021-08-08 17:26:11 · 138 阅读 · 0 评论 -
vue3.0--初识vue3.0、组合式API、EventBus、代码组织能力、Teleport、VueX中如何使用
一、初识vue3.0现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断地完善中,这是趋势。element-plus(opens new window) 基于 Vue 3.0 的桌面端组件库 vant(opens new window) vant3.0版本,有赞前端团队开源移动端组件库 ant-design-vue(opens new window) Ant Design Vue 2.0版本,社区根据蚂蚁 ant design 开发1.1 vue3.0 的优点最火框...原创 2021-12-20 18:59:02 · 817 阅读 · 0 评论 -
vue:Element-ui--表单校验
目录一、实现表单基本结构1.1 创建项目1.2 安装Element二、表单校验的先决条件2.1 model属性 (表单数据对象)2.2 绑定model2.3 rules规则2.4 设置prop属性2.5 给input双向绑定字段属性三、表单校验规则3.1 基本使用规则3.2 自定义校验规则3.3 手动校验的实现四、Async 和 Await4.1 回调模式和promise的链式调用4.2 关于Promise你必须知道几件事4.3 异步编程的原创 2021-12-20 18:15:22 · 4884 阅读 · 0 评论 -
vue--处理边界情况(了解):访问根实例、访问父组件实例、ref、依赖注入
公共部分:App.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <AsynchronousBoundary /> </div></template><script>import AsynchronousBoundary from "./components/AsynchronousBou原创 2021-08-27 18:01:25 · 307 阅读 · 0 评论 -
vue--mixin(混入)语法
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>a.组件data优先级高于mixindata优先级:<script> //局部 mixin const myMixin = { data() { return { num...原创 2021-08-18 09:46:11 · 854 阅读 · 0 评论 -
Vue-plugin(插件)
一、插件的基本使用1.1 初识插件Vue.use()做了什么事情?Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用什么时候需要定义插件?当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件例如: 网络加载指示器如何自定义一个插件?自定义插件https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB原创 2021-10-14 13:43:36 · 2178 阅读 · 0 评论 -
Vue--ElementUI组件库
Element官网PC端的后台系统适用于ElementUI组件库首先通过 vue create xxx 创建好 vue 项目其次,你可以通过npm i element-ui -S以上方式安装 element再者,也可以通过vue-cli@3 来安装,前提是你需要在全局先安装 @vue-cli ,然后进入到你创建的 vue 项目里,通过 vue add element 命令来安装 element注意: Fully import -- 全引用,即一次性将所有...原创 2021-09-15 19:53:22 · 1804 阅读 · 0 评论 -
Vue--Vant组件
官网地址适用于移动端首先,通过 vue create xxx 创建 vue 项目其次,对于 vant 的安装有如下几种方式:一是通过, --本项目用的方式# Vue 2 项目,安装 Vant 2:npm i vant -S# Vue 3 项目,安装 Vant 3:npm i vant@next -S一是通过 CSDN,<!-- 引入样式文件 --><link rel="stylesheet" href="https://cdn.js原创 2021-09-15 20:40:11 · 8586 阅读 · 1 评论 -
Vue-render&JSX
1.Vue渲染组件的两种方式1.1先定义注册组件, 然后在Vue实例中当做标签来使用1.2先定义注册组件, 然后通过Vue实例的render方法来渲染2.两种渲染方法的区别1.1当做标签来渲染, 不会覆盖Vue实例控制区域1.2通过render方法来渲染, 会覆盖Vue实例控制区域<script src="js/vue.js"></script> <!--这里就是MVVM中的View--> <div id="a原创 2021-10-12 15:19:09 · 196 阅读 · 0 评论 -
vue基础--axios:初识 axios、发送ajax 请求、GET/POST请求、全局配置及请求响应拦截器、封装及跨域配置、创建服务器提供数据实践
目录一、初识 axios1.1 什么是 axios1.2 使用 axios 发送ajax 请求二、axios方式GET/POST请求2.1 发送GET请求2.2 发送POST三、全局配置及请求响应拦截器3.1 全局配置3.2 拦截器四、封装及跨域配置4.1 跨域解决方案4.2 示例五、创建服务器提供数据实践5.1 前期准备一、初识 axios1.1 什么是 axios一个专门用于发送ajax请求的库通过 npm...原创 2021-09-05 16:53:34 · 1110 阅读 · 0 评论 -
vue基础--初识生命周期 、生命周期方法分类、$refs、$nextTick、组件里 name 属性的作用
目录一、初识生命周期1.1 生命周期函数图1.2 什么是生命周期方法?二、Vue生命周期方法分类2.1 初始化阶段的生命周期方法2.2 挂载阶段的生命周期方法2.3 更新阶段的生命周期方法2.4 销毁阶段的生命周期方法2.5 补充三、$refs--ref3.1 初识 ref3.2 ref的特点3.3 ref获取组件对象3.4 异步更新DOM四、$nextTick4.1 初识 $nextTick4.2 $nextTick 的其他应用场景五原创 2021-08-06 09:29:46 · 646 阅读 · 0 评论 -
VueRouter:初识路由、声明式导航、重定向和别名、404设置、模式修改(HTML5 History 模式)、编程式导航、嵌套路由、导航守卫、路由元信息、导航高亮
1.动态路由配置前期准备:通过 vue create xxx 创建vue项目,这里在创建时我们勾选上 router 选项,自动创建路由将前面学习 axios 时封装的跨域配置,utils文件夹以及 vue.config.js文件分别放置在该项目的src目录和根目录下通过 npm install axios --save 安装 axios项目结构:vue.config.jsmodule.exports = { devServer: { prox..原创 2021-09-06 20:58:38 · 787 阅读 · 2 评论 -
Vue状态管理(Vuex):初识VueX、Vuex与全局对象、核心概念、项目结构、插件、严格模式、表单处理、热重载
一个专为 Vue.js 应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化该状态自管理应用包含以下几个部分:state,驱动应用的数据源; view,以声明方式将 state 映射到视图; actions,响应在 view 上的用户输入导致的状态变化。什么情况下我应该使用 Vuex?构建一个中大型单页应用,为了能更好地在组件外部管理状态,Vuex 将会成为自然而然的选择Vuex的安装对于Vuex的安原创 2021-09-09 16:04:47 · 707 阅读 · 0 评论 -
vue--使用插槽和具名插槽解决组件内容传递问题
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>1.插槽:<script> // slot 插槽 里面可以传的有 DOM文档、字符串、数字、子组件等 // slot 无法直接绑定事件 const app = Vue.createApp({ te原创 2021-08-09 16:57:10 · 835 阅读 · 0 评论 -
vue基础--组件详解:初识组件、组件动画、父子组件、跨组件传值及多级传递、EventBus、匿名插槽、具名插槽、v-slot指令、作用域插槽、自定义指令
vue组件原创 2021-08-08 14:32:27 · 420 阅读 · 0 评论 -
vue基础:过渡动画、列表动画、案例
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>动画: @keyframes leftToRight { 0% { transform: translateX(-100px); } 50% {原创 2021-08-11 17:53:58 · 737 阅读 · 0 评论 -
vue基础--动态class、动态style、过滤器filter、方法methods、计算属性computed、侦听器watch
目录一、动态class1.1 基本用法1.2 示例二 、动态style2.1 基本用法2.2 示例三、过滤器filter3.1 定义使用3.2 额外用法--传参和多过滤器3.4 综合示例四、方法methods4.1 .使用绑定事件的方式4.2 在插值表达式里({{}})五、计算属性computed5.1 语法5.3 计算属性完整写法六、侦听器watch6.1 初识侦听器6.2 侦听器的基本使用6.3 深度侦听6.4 w...原创 2021-08-06 15:53:58 · 2151 阅读 · 0 评论 -
vue基础--表单中双向绑定指令--v-model的使用
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>1.input框的数据双向绑定--v-model:<script> const app = Vue.createApp({ data() { return { .原创 2021-08-07 17:26:52 · 618 阅读 · 0 评论 -
vue基础--模板语法、常用指令:v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
公共部分:<div id="root"></div><script src="https://unpkg.com/vue@next"></script>a.v-once:让某个元素标签只渲染一次<script> // const app = Vue.createApp({ data() { return { .原创 2021-08-11 15:11:43 · 944 阅读 · 0 评论