初识Vue
这两天老大下任务，说要研究研究Vue，于是有了这篇博客。刚刚学习Vue也是很蒙圈的状态，看了几集视频，听了一个分享，这才有些门路，趁热打铁先画个思维导图，捋一捋silu思路。虽然内容不多吧，但是花费了我将近一个小时的时间。后续还会深入了解。...
2024-01-10
Vue笔记
Vue.js笔记常用命令安装webpacknpm install webpack [-g] //-g代表global，表示将webpack安装到全局环境中安装vue脚手架npm install vue -cli [-g]项目常用命令/** 通过webpack创建vue项目工程 */vue init webpack project-name //project-name为你的工程名，不能用中文，建议用小写/** 指定vue的版本创建vue项目工程 */vue ini...
2024-01-10
入坑Vue
长期的后端数据开发着实有些枯燥无趣，项目完工，闲暇之际，最近一直在研究前端方面的东西，不得感叹，前端技术发展速度快的让人有些目不暇接，从jQuery开启的插件化时代，几乎许多网站都被jQuery支配，而jQuery也成为了一个时代的经典，再到解决全局变量带来的命名冲突的模块化时代，再到Angula...
2024-01-10
Vue工程化
安装CLi// npm 安装npm install -g @vue/cli // yarn 安装yarn global add @vue/cli查看是否安装成功vue -V// 正确显示版本号初始化项目vue create vue-learn回车之后会出现以下画面Vue CLI v3.9.3┌────────────────────────────┐│ Update available: 3.10.0 │└───────────...
2024-01-10
Vue初体验
Vue特点 易用：HTML/CSS/JavaScript 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩 高效：20kB min+gzip 运行大小 超快虚拟DOM 最省心的优化 渐进式：如果之前页面全是jQ写的，那么我们想改进单个或多个页面，可以单独提取出来进行改进安装 方式一：直接CDN引...
2024-01-10
Vue随堂笔记
视频地址：https://www.bilibili.com/video/BV15741177Eh讲师：codewhy(B站搜索)资料：https://pan.baidu.com/s/1yBhquzLNs91-8fWFpwe4Bg提取码：em9kVue简介Vue (读音 /vjuː/，类似于 view)Vue是一个渐进式的框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。如果你希望将更多的业务逻辑使用Vu...
2024-01-10
Vue个人笔记
目录前言Vue的插值表达式怎么保留小数位表格列被挤，位置很小v-if多个条件前言此笔记仅仅记录我在使用过程中遇到的一些问题，不定期更新Vue的插值表达式怎么保留小数位插值表达式其实都是字符串之类的，...
2024-01-10
Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡概述 前面分别介绍了单元素CSS过渡和JS过渡，以及多元素过渡。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件【<transition-group>】 <transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag...
2024-01-10
Vue过渡动画
vue可以在元素或组件进入和消失的时候提供过渡效果使用过渡：<div > <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition></div>new Vue({ el: '#demo', data: { show: true }}).fade-enter-active, .fade-leave-activ...
2024-01-10
Vue网络请求
1.props的验证props可以指定类型：string、number、boolean、array、object类型传递动态和静态的props：title是静态，:age是动态默认值default，必选项required默认值如果是数组或者对象，必须返回一个function2.插槽:内容分发，同一个内容的不同展示效果1.基础插槽：SlotDemo与Slot2.具名插槽：template中slot与slot中的na...
2024-01-10
Vue入门笔记
在html文件里面引入 vue。js，vue-resource。js，插件把该逻辑写在 car。js 再引入该界面需要的逻辑的js-------------------------最简单的vue实例$mount()手动挂载 当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中； 假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。 <div id="app"> {{name}} ...
2024-01-10
Vue动画效果
1.哪些元素/那些组件适合在那些条件下实现动画效果条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点简单经典例子：（文字隐藏到显示效果）<div> <button @click="show = !show">show toggle</button> <transition name="fade"> //fade 自定义名称 <p v-if="show">hello</p> </transition></div><style>.fade-enter-acti...
2024-01-10
Vue登录注册
注册1.1 注册页面的布局1.2 注册业务逻辑的实现1.3封装api登录3.导航守卫注册1.1 注册页面的布局需要用到Vant的Field组件1.views下新建一个注册页面 ，完成基本布局。引入Vue和Field并使用。3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方...
2024-01-10
Vue3 如何复用模板
在Vue3里面如下图，红框的部分是一样的，在不抽离成组件，不使用h函数的条件下，如何复用这一块代码回答：template 本来就不适合复用，你见过哪个组件库里可以复用的部分是用 template 开发的？Vue3 本来为了更好的复用，提出了 Composition API，为啥非得在 template 一棵树上吊死呢？回答：如果内容固定并且一致，for循环应该是最好的选择。如果模型基本一致，内...
2024-02-19
Vue3 源码逐行解析
Vue3 源码解析本文编写于 2020-06-10，脚手架使用 vite-app 版本 0.20.0，内置 vue 3.0.0-beta.14。ps: 可能大部分人都不清楚 vue3 的开发api，将源码之前先讲述 使用方法环境搭建最容易搭建 vue3 的方式就是使用作者的 vite通过 npm 安装 $ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run dev也可以通过 ya...
2024-01-10
Vue3+TS项目报错
刚用Vue-Cli 5.x版本构建的Vue3+TS项目报错了，说找不到模块，上网查了很多资料说在shims-vue.d.ts文件中写入那些代码就可以，我这个用了好多人给的方法还是报错，问题出在哪里？main.ts文件router/index.ts文件组件中的helloworld文件store/index.ts文件回答：先 npm run build 试一下，看看是不是 ide 的问题如果是的话，...
2024-02-24
Vue的一些考点
前言作为前端开发中现行最火的框架之一，Vue 在面试中出现的频率不断增加。基于此，总结了一些 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注如果文章中有出现纰漏、错误之处，还请看...
2024-01-10
Vue跑马灯效果
前言Vue.js是一个Javascript框架，一套构建用户界面的渐进式框架通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件使用Vue框架一般都会使用组件化思想，由于初学，做一个跑马灯效果尝试基本框架用法代码<div id="app"> <input type="button" value="动起来" @click="lang"> <input type="button" value="暂停" ...
2024-01-10
狂神说Vue笔记
一、前端核心分析1.1、概述Soc原则：关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UI1.2、前端三要素HTML（结构）：超文本标记语言（Hyper Text Ma...
2024-01-10
Vue之事件绑定
Vue事件绑定点击事件@click="事件名" or v-on:click="事件名"结构部分： <el-button type="primary" circle @click="handleClick">默认按钮</el-button> <el-button type="primary" icon="el-icon-edit" v-on:click="handleEdit"></el-button>script部分： methods: { handleClick () { console.log...
2024-01-10
Vue核心知识点
一、vue.config.js 基本配置module.exports = { // 基本路径 cli3.3以前版本用baseUrl publicPath: \'/\', // 输出文件目录 outputDir: \'dist\', // 用于嵌套生成的静态资源 assetsDir: \'\', // 生产环境sourMap productionSourceMap: false, // webpack配置 configureWebpack: () => {}, chainWebpack:...
2024-01-10
Vue的核心思想
Vue的核心思想为数据驱动和组件化。一、数据驱动——双向绑定Vue是一种MVVM框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue就会通过Directives指令去修改DOM。同时也...
2024-01-10
Vue的基础使用
渐进式的前端框架 vue react augular 作者: 尤雨溪 facebook 谷歌公司 前端框架和库的区别 功能上的不同: jquery库：包含DOM(操作DOM)+请求，就是一块功能。 art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板 跟python 的模板类似) 框...
2024-01-10
