vue
文章平均质量分 75
vue 案例和知识点
我叫张永宽@
你我山巅自相逢
展开
-
v-model双向绑定原理(数据劫持-->视图更新-->观察者)(未完)
v-model v-model双向数据绑定 通过变量可以修改v-model的值 , 而绑定了v-model的标签(input , textarea , components)进行赋值的时候 , 可以修改data变量的值 当一对多的时候 , 我们可以使用一个变量控制v-model 当一一对应的时候 , 通常使用一个对象里的属性来进行控制 而v-model的本质 : 绑定了input的value指向了data里的变量,并且在触发input事件的时候去动态把 data变量的值设...原创 2021-10-25 13:22:55 · 283 阅读 · 0 评论 -
项目打包,去除控制台打印
一行代码 重写console.log方法 // 重新console.log方法 , 放在main.js入口文件即可console.log = function () { } 优化写法 一行代码的写法 , 也可以控制台输出解决问题 , 但我们在开发环境下还需要对log进行删除,而生产环境还需要添加 , 虽然重复这样也可以解决问题 , 但为了优化 , 只需要判断生产环境重新方法 , 开发环境不重写即可 , 那么判断即可 在main.js入口文件复制这行代码即可 ...原创 2021-10-24 20:34:29 · 931 阅读 · 0 评论 -
如何优化你的vue项目
为何优化项目 我们的项目写好之后,为了优化用户的体验和减轻服务器的压力,我们回头一系列的优化,使自己的项目加载更快,所以要进行代码的优化 而优化的方式有很多,具体如下 路由懒加载 组件缓存 用户无感觉刷新token(登录后完成未完成的操作) 图片懒加载 减少代码的冗余(复用的代码封装函数) 为了后期的维护,可以封装以下工具文件 增删改查token 封装api接口(各种接口可以再分文件) 引入的第三方工具包(类似于day.js,moment...原创 2021-10-23 13:01:17 · 427 阅读 · 0 评论 -
你真的知道vuex?
什么是vuexvuex是一个专为vue.js应用程序开发的状态管理模式 采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生变化 简单描述就是状态管理模式(白话: '全局'统一集中式管理全局变量) 为何学习vuex 程序页面较多时,数据变量也多 常用于组件通信(简单的父子通信和兄弟通信我们可以通过props或$emit传值) 而复杂的通信我们不可能一步一步将数据传过去,而这个时候就可以通过vuex进行统一数据管理 veux的不同组件数据保..原创 2021-10-13 20:44:40 · 308 阅读 · 0 评论 -
项目打包出现路径错误解决方案
打包步骤 脚手架工程运行 npm run build 或yarn build 作用: 用vue-cli内部集成的webpack,把.vue,.less.js 等打包成浏览器可可直接执行的代码. 结果:会在项目根目录下创建/dist目录,在这个目录下产出打包后的结果 打包之后运行 直接使用vscode+liveserver插件运行打包后的静态网页index.html 打开之后显示空白页,打开控制台,发现全是路径引入错误 因为要的都是服务器根目录下的js..原创 2021-10-11 10:25:44 · 1511 阅读 · 0 评论 -
路由懒加载
// 引入登录页面路由// @是webpack里的内置路径// @代表src文件夹的绝对路径,不用加src// 引入的路径遇到文件夹默认找index文件// import Login from '@/views/Login'// import Layout from '@/views/Layout'// import Home from '@/views/Home'// import Article from '@/views/Article'// import Pubish from...原创 2021-10-11 09:47:16 · 147 阅读 · 0 评论 -
vue路由系统进阶使用指南
目录声明式导航-传参vue 重定向vue路由 404页面(兜底判断)vue路由 模式设置vue路由 编程式导航 跳转vue路由 编程式导航 传参路由嵌套vue路由 声明式导航 类名区别组件缓存组件缓存 设置条件组件缓存中的钩子函数总结 声明式导航-传参 在跳转路由时,可以给路由对应的组件传值 在router-link上的to属性传值,语法格式如下 /path?参数名=值 /path/值 – ...原创 2021-10-04 17:14:35 · 157 阅读 · 0 评论 -
vue路由系统基本使用指南
目录路由是什么路由的使用场景vue路由基本步骤分为七步案例结语 路由是什么 路由是一种映射关系 路径和组件的映射关系 接口和服务的映射关系 路由器和设备IP的映射关系 vue路由其实就是路径和组件的映射关系 路由的使用场景 我们为何学习和使用路由 单页面应用(SPA):所有的功能都在一个HTML页面上实现 前端路由的作用就是实现业务场景切换 优点 整体不刷新页面..原创 2021-10-02 22:34:12 · 413 阅读 · 0 评论 -
vue生命周期钩子函数
目录生命周期生命周期图解初始化阶段挂载阶段更新阶段销毁阶段完整代码(内含详细注释)总结 生命周期 一个组件从创建到销毁的整个过程就是生命周期 分为4个阶段,8个方法 生命周期图解 初始化阶段 含义 1.new Vue() – Vue实例化(组件也是一个小的Vue实例) 2.Init Events & Lifecycle – 初始化事件和...原创 2021-10-01 10:43:45 · 1200 阅读 · 0 评论 -
深入解析vue脚手架methods,computed,data
目录数据 Data Property方法 methods计算属性 computed 数据 Data Property 组件的data选项是一个函数. Vue在创建新组件实例的过程中调用此函数. 它应该是一个对象,然后Vue会通过响应系统将其包裹起来,并以$data的形式存储在组件实例中. 为方便起见, 该对象的任意顶级property也直接通过组件实例暴露出来. export default { // data 是一个函数 // data为了存储数据,并将数据放在实原创 2021-09-29 22:00:15 · 1095 阅读 · 1 评论 -
vue脚手架基础使用
脚手架准备 安装@vue/cli全局模块包 yarn global add @vue/cli 或者 npm install -g @vue/cli 检查是否安装成功 在cmd中输入vue -V 会显示版本好 如果未显示则安装失败,显示就是安装成功 脚手架创建项目 创建项目 # vue和create是命令, vuecli-demo是自己的文件夹名 vue create vuecli-demo 选择模板 ...原创 2021-09-24 16:49:42 · 102 阅读 · 1 评论 -
vue常用指令和优势-01
vue是什么? 一个JavaScript渐进式框架,有自己的规则和语法 渐进式就是按需逐渐集成功能的使用 vue的优势 vue作为一款轻量级框架 , 简单易学 , 双向绑定数据 , 组件化 , 数据和结构相分离 , 虚拟DOM , 运行速度块 , 并且作者为中国人尤雨溪, 对应的API文档对国内开发者优化, 作为前端开发人员的首选入门框架 优势 vue可以进行组件化开发 , 使代码编写量大大减少 , 读者更加易于理解 vue最突出的优势在于可以..原创 2021-09-24 15:49:01 · 209 阅读 · 0 评论