Vue入门
环境搭建安装node下载官网npm 会自带安装安装 vue -cli使用淘宝NPM镜像源下载比较快命令：npm install -g cnpm --registry=https://registry.npm.taobao.org命令：cnpm install vue-cli -g安装webpack命令：npm install -g webpackcmd创建项目：命令：vue init webpack projectname2可以进行默认就行最后结果：运行命令，就可以按照...
2024-01-10
入坑Vue
长期的后端数据开发着实有些枯燥无趣，项目完工，闲暇之际，最近一直在研究前端方面的东西，不得感叹，前端技术发展速度快的让人有些目不暇接，从jQuery开启的插件化时代，几乎许多网站都被jQuery支配，而jQuery也成为了一个时代的经典，再到解决全局变量带来的命名冲突的模块化时代，再到Angula...
2024-01-10
简谈Vue
Vue的基本目录Vue的基本1.0、Vue的出现.1.1、CSS预处理器1.2、JS框架1.3、Vue框架1.4、Axios框架1.5、框架知识扩展1.6、开发相关JS后台开发NodeJs是什么？1.0、Vue的出现.创建者:尤雨溪Vue自底向上逐层应用，注重视图层（HTML结构层+CSS表现层+JS行为层）网络通信：axios页面跳转：vue-router状态管理：vuexvue-UI：I...
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的插值表达式怎么保留小数位表格列被挤，位置很小v-if多个条件前言此笔记仅仅记录我在使用过程中遇到的一些问题，不定期更新Vue的插值表达式怎么保留小数位插值表达式其实都是字符串之类的，...
2024-01-10
Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡概述 前面分别介绍了单元素CSS过渡和JS过渡，以及多元素过渡。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件【<transition-group>】 <transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag...
2024-01-10
Vue入门例子
根据官方文档和视频进行学习用 idea 进行开发导入js新建HTML,在HTML输入以下代码 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> {{message}} <span v-bind:title="message"> 提示信息 </span> </div>3.写js代码<script>//通过new Vue 可以声明全局变量,new返回的对...
2024-01-10
Vue之初始化
前言之前分析过Moon的源码，对于Moon实现的双向绑定、computed、事件分发、生命周期有了比较详细的阅读分析，学到了很多。不足之处也比较明显，对于component、虚拟DOM、模板解析不够深入，之后会逐渐完善，这个高仿库是非常值得深入学习的。本文会介绍Vue.js加载过程中主要的初始化工作，vue版本是...
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入门笔记
在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.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知识的整理，基础篇说说你对MVVM的理解Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据了解mvc/mvp/mvvm的区别Vu...
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之事件绑定
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
Vue3状态管理的使用详解
目录背景Provide / Inject抽离共享状态提供数据注入数据小结reactive抽离共享状态使用共享状态小结结语背景随着Vue3的逐步应用，对状态管理的需求越来越多。起初是基于Vuex4进行状态管理的，但是Vuex4也暴露了一些问题。从个人角度来说，Vuex4类似于过渡期产品，对TypeScript的支持性并不完整。如果使用Ty...
2024-01-10
Vue的手风琴过渡
我想给Accordion组件与车身的过渡整合，但没有成功:(所有的工作，以及除动画Vue的手风琴过渡模板：。<div class="accordion"> <div class="accordion-title" @click="isOpen = !isOpen" :class="{'is-open': isOpen}"> <span>{{title}}</span> <i class="ic ic-next"></i> </div> <div class="ac...
2024-01-10
深入了解Vue3模板编译原理
目录ParseTransformcacheHandlershoistStaticprefixIdentifiersPatchFlagshoiststype 变化Codegen代码生成模式静态节点帮助函数 helpershelpers 是怎么使用的呢?如何生成代码？Vue 的编译模块包含 4 个目录：compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模...
2024-01-10
Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是查阅了资料，现在记录下来与大家分享先给大家画一个示意图理解一下冒泡和捕获(1) .stop修饰符请看如下代码<template> <div class="about"> <div @click="test1"> <div @click="test2"> 测试 </div> </div> ...
2024-01-10
Vue记事本实例详解
本文实例为大家分享了Vue实现记事本功能的具体代码，供大家参考，具体内容如下实例功能点不多，主要难点在于笔记文本对象数组的添加，删除，以及对组件的绑定同步事件。核心代码<section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="...
2024-01-10
Vue探索历程（一）
使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子： 例一：Helloworld html代码：let arr = [1,2,3]<div > {{ message }}</div> js代码：new Vue({ el: '#app', data: { messa...
2024-01-10
