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
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
Vue3的新特性
1、响应系统的变动由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。Proxy的属性及方法2、虚拟DOM重写（Virtual DOM Rewrite）虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行...
2024-01-10
Vue登录注册
注册1.1 注册页面的布局1.2 注册业务逻辑的实现1.3封装api登录3.导航守卫注册1.1 注册页面的布局需要用到Vant的Field组件1.views下新建一个注册页面 ，完成基本布局。引入Vue和Field并使用。3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方...
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报错处理
vue项目运行中,更改个东西,更新后报错如下搜索查询是node 内存溢出解决办法如下1 安装increase-memory-limitnpm i -g increase-memory-limit2 在此项目路径输入此命令 increase-memory-limitincrease-memory-limit运行完后执行npm run serve 啊，又报错了这是为什么呢，苦思冥想得知 仅需在 node_modules/.bin 文件夹搜索 "%_pro...
2024-01-10
Vue基本使用
Vue.js是一款流行的开源JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。由尤雨溪在2014年2月发布的。一 基本语法1. vue的使用要从创建Vue对象开始let vm = new Vue();2.创建vue...
2024-01-10
Vue采坑记录
一、vuex数据持久化 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules: { app, user }, getters, plugins: [createPersistedState...
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
Vue3教程，抢先学习
Vue 3尚未正式发布，但是维护者已经发布了Beta版本，供我们的参与者尝试并提供反馈。如果你想知道Vue 3的主要功能和主要变化是什么，那么我将在这篇文章中重点介绍一下，告诉你使用Vue 3 beta 9创建一个简单的应用程序。我将介绍尽可能多的新内容，包括fragments，teleport，Composition API以及其他一些晦...
2024-01-10
Vue最全知识点
声明：本篇文章纯属笔记性文章，非整体原创，是对vue知识的整理，基础篇说说你对MVVM的理解Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据了解mvc/mvp/mvvm的区别Vu...
2024-01-10
Vue知识点整理
Vue重学语法key的重要性由于vue循环时不是将dom元素循环创造, 而是一个dom元素重复使用, 而它的diff机制是同层元素进行对比; 如下图:如上图: 对比的原则是 父节点 A 与 父节点 A 对比,下面的子节点与子节点进行对比. 如果右边的A 节点 变为 B 节点, 但是B下面的子元素还是B1, B2, B3. Vue的diff机制会删除 A...
2024-01-10
Vue作用域插槽
假设我们有一个子组件slot-test<template> <span> <slot > {{ user.lastName }} </slot></span></template><script> export default { name: "slot-test", data: function () { return {user: {lastName: "guodong", firstName:"hu"}}; ...
2024-01-10
浅谈Vue数据响应
Vue 中可以用 $watch 实例方法观察一个字段，当该字段的值发生变化时，会执行指定的回调函数（即观察者），实际上和 watch 选项作用相同。如下：vm.$watch('box', () => { console.log('box变了')})vm.box = 'newValue' // 'box变了'以上例切入，我想实现一个功能类似的方法 myWatch。如何知道我观察的属性被修改了...
2024-01-10
Vue(day8)
继续上一篇文章的内容，本文主要内容为项目中新闻资讯模块的实现。新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面。一、新闻资讯的路由设计将新闻资讯的标签改为路由：(a标签改为router-link)。home.vue<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <router-link to="/home/newsList"...
2024-01-10
Vue3 编译流程-源码解析
前言：Vue3 发布已经很长一段时间了，最近也有机会在公司项目中用上了 Vue3 + TypeScript + Vite 的技术栈，所以闲暇之余抽空也在抽空阅读 Vue3 的源码。本着好记性不如烂笔头的想法，在阅读源码时顺便记录了一些笔记，也希望能争取写一些源码阅读笔记，帮助每个想看源码但可能存在困难的同学减少理...
2024-01-10
深入了解Vue3模板编译原理
目录ParseTransformcacheHandlershoistStaticprefixIdentifiersPatchFlagshoiststype 变化Codegen代码生成模式静态节点帮助函数 helpershelpers 是怎么使用的呢?如何生成代码？Vue 的编译模块包含 4 个目录：compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模...
2024-01-10
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码，供大家参考，具体内容如下实现的业务逻辑1、给[嗨起来]按钮，绑定一个点击事件 v-on（@）。2、在按钮的事件函数处理中，写相关的业务逻辑：拿到msg的字符串，后调用字符串中的substring来进行字符串的截取操作，放到最后一个位置。3、为了实...
2024-01-10
Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是查阅了资料，现在记录下来与大家分享先给大家画一个示意图理解一下冒泡和捕获(1) .stop修饰符请看如下代码<template> <div class="about"> <div @click="test1"> <div @click="test2"> 测试 </div> </div> ...
2024-01-10
Vue添加请求拦截器
一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令： npm install axios --save-dev2、在根目录的config目录下新建文件 axios.js ，内容如下：import axios from 'axios'// 配置默认的host,假如你的API host是：http://api.htmlx.clubaxios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器axios.interceptor...
2024-01-10
Vue介绍及入门案例
1.前言前端开发模式的发展。静态页面最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。异步刷新，操作DOM1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.随着JavaScript的诞生，我们可以操作...
2024-01-10
详解Vue实现直播功能
最近公司刚好在做直播，那么今天就记录一下遇到的坑，公司服务器用的亚马逊aws，所以直接看官方的api就可以了，aws官方地址aws直播api先看下具体的实现后的效果图把按照网上成熟的方法，使用的是video.js,然后aws做了一层封装，那么我们直接拿来使用把,这里使用vue版本的vue-video-player先安装下相关...
2024-01-10
Vue3中两种创建实例方式的区别
const app = Vue.createApp({ /* 通过配置对象选项创建 */})import App from 'App.vue'//通过.vue组件创建const app=Vue.createApp(App)1.请问这两种创建方式有什么区别2.这两种方式创建的实例是同一类型的实例吗？3.通过组件创建的实例，怎么配置data()、method()等4.起码在vite中会出现...
2024-03-09
