Vue
文章平均质量分 83
ximingx
真正的力量永远不会属于天生就强壮过人、敏捷过人、聪明过人的家伙,绝不……它只会属于不惜一切达成目的的人
展开
-
Vue.js的响应式原理
Vue 的响应式原理主要通过:Object.defineProperty()劫持data属性的getter/setter观察者模式:属性变化触发setter,通知订阅者watcher更新模板编译:解析指令和插值,绑定更新函数virtual DOM更新真实DOMVue3则使用Proxy替代defineProperty,以更好地支持对象的响应式。原创 2023-07-14 08:02:01 · 407 阅读 · 0 评论 -
一个 vue 登陆页面
vue 登陆页面 组件原创 2021-12-08 08:45:47 · 9137 阅读 · 4 评论 -
vue.config.js
vue-cli4 vue.config.js原创 2021-11-24 23:41:20 · 374 阅读 · 0 评论 -
vue 轮播图效果
用自己的想法 , 完成一个轮播图演示主要功能:自动照片无限循环底部按钮点击切换左右按钮点击切换具体的方法看代码中的注释,很清楚<template> <div id="swiper"> <div id="box"> <!-- 设定一次只显示一张图片 --> <img :src="imgSrc[currentIndex]" alt="img"> </div> <原创 2021-11-12 22:47:06 · 2728 阅读 · 0 评论 -
Vue全家桶 Pinia状态管理
一个Store (如Pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态,你可以在你的应用程序中定义任意数量的Store来管理你的状态Store有三个核心概念:state、getters、actions,等同于组件的data、computed、methods一旦store 被实例化,你就可以直接在store 上访问state、getters 和actions 中定义的任何属性定义一个Store。原创 2023-01-06 11:21:28 · 1099 阅读 · 6 评论 -
1. 初步了解 vue.js
vue 的快速学习原创 2022-05-06 23:15:16 · 1379 阅读 · 7 评论 -
2. Vue 的应用方式
2. Vue 的应用方式原创 2022-05-06 23:18:27 · 866 阅读 · 0 评论 -
3. 响应式
vue 响应式原创 2022-06-06 08:48:11 · 863 阅读 · 0 评论 -
3. vue 系统指令
3. vue 系统指令指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下 6 大类:内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令Vue 的使用基于 HTML 的模板语法,允许您以声明方式将渲染的 DOM 绑定到底层组件实例的数据。所有 Vue 模板都是语法上有效的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。指令是带有v-前缀的特殊属性。Vue 提供了许原创 2022-05-07 13:45:53 · 471 阅读 · 0 评论 -
4. vue Reactivity
4. vue Reactivity4.1 data我们使用data选项来声明组件的反应状态。选项值应该是一个返回对象的函数。Vue 会在创建新组件实例时调用该函数,并将返回的对象包装在其响应系统中。此对象的任何顶级属性都代理在组件实例上(this在方法和生命周期挂钩中):data() { return { } }这些实例属性仅在首次创建实例时添加,因此您需要确保它们都存在于函数返回的对象中data。如有必要,使用null或undefined其他一些占位符值来表示所原创 2022-05-07 13:54:47 · 289 阅读 · 0 评论 -
5. Vue.js 生命周期
5. Vue.js 生命周期从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。生命周期钩子 = 生命周期函数 = 生命周期事件。生命周期中里有一个很重要的概念: 钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法5.1 创建期间生命周期函数原创 2022-05-07 14:14:51 · 383 阅读 · 0 评论 -
6. Vue 动画
6. Vue 动画Vue 提供了两个内置组件,可以帮助处理过渡和动画以响应不断变化的状态:<Transition>用于在元素或组件进入和离开 DOM 时应用动画。本页对此进行了介绍。<TransitionGroup>用于在将元素或组件插入列表、从中删除或在v-for列表中移动时应用动画。6.1 Transition<Transition>是一个内置组件:这意味着它可以在任何组件的模板中使用,而无需注册它。它可用于在通过其默认插槽传递给它的元素或组件上原创 2022-05-07 14:17:46 · 221 阅读 · 0 评论 -
7. Components
组件的使用, 组件传值的方法, vue2 到 vue3 中的改变原创 2022-05-17 22:13:02 · 644 阅读 · 0 评论 -
8. vue-router
8. Vue-routervue-router 它是一个Vue.js官方提供的路由管理器。Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router在了解 vue-router 之前先引入一个前端路由与后端路由的知识, 至少在之后的 Node.js 的学习中是有帮助的简单地说将路径和组件映射。在vue-router原创 2022-05-06 22:37:37 · 568 阅读 · 0 评论 -
9. axios
9. axios学习之前希望先去看一下 promise 好方便理解1. axios 的基本了解官方定义: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。它可以在具有相同代码库的浏览器和 nodejs 中运行在服务器端它使用本机 node.js 的 http模块,而在客户端(浏览器)它使用 XMLHttpRequests。axios必须先导入才可以使用使用get或者post方法即可发送请求,then方法的回调函数会在请求成功或者失败时触发原创 2022-05-06 22:03:41 · 260 阅读 · 0 评论 -
10. vuex
10. Vuexvuex 是 vue框架中状态管理工具。vue 脚手架创建项目时勾选 vuex,会自动生成一个store文件夹自带一个 index.js$ yarn add vuex$ yarn add vuex@next --save10.1 vuex 属性有五种,分别是 State、 Getter、Mutation 、Action、 Module。Vuex就是一个仓库,仓库里面放了很多对象。$store.state 或 context.state,访问state。$store.g原创 2022-05-06 21:52:19 · 178 阅读 · 0 评论 -
12. vue.config.js
12. vue.config.jsvue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。这个文件应该导出一个包含了选项的对象:常用配置const { defineConfig } = require('@vue/cli-service')// alias 中使用const path = require('path');function resolve (dir) {原创 2022-05-07 16:18:25 · 816 阅读 · 1 评论