Vue
关注
分享
扫一扫
文章平均质量分 60
咩有猫腻.
要努力哦.
展开
-
移动端适配问题：rem / px2rem+scss
→ 查看 【移动端适配文题】 → 查看【px2rem 的原理】原创 2021-11-02 14:48:44 · 482 阅读 · 2 评论 -
vue上线的时候 如何做性能优化 / 如何解决单页面应用程序首次加载慢的问题（使用外部的cdn资源对vue项目做性能优化）
vue打包的时候如何做性能优化:第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。也就是第一次加载的文件内容太多，解决的办法就是将文件变小第一个是使用动态路由的方式引入路由组件，用import方式引入，第二种是就是把我们的一些第三方资源库放在外部不进行打包的方式进行引入（把一些第三方库通过cd原创 2020-08-07 16:57:00 · 558 阅读 · 0 评论 -
vue项目使用hbuilder进行云打包
1.将写好的目录 ，比如头像项目，将自己新创建的vue.config.js文件内填写内容module.exports={ publicPath:'./' // 表示我们打包生成之后，我们资源目录的生成路径}2.如果不写的话，你直接 npm run build 之后，打开dist文件双击index.html将会得到下图所示效果3.vue.config.js文件内容填写完之后，再次npm run build4.还有一点就是 你的路由一定要是哈西路由，不能是浏览器历史记录路由，因为我原创 2020-07-28 13:08:23 · 921 阅读 · 0 评论 -
vue + ElementUI（饿了么UI） ---增删改查（用localStorage存储数据+过滤搜索）--demo
新增和修改写到了一个文件上该目录会上传到gitee上.eslintrc.js最后一行是自己添加的，其余内容是脚手架自动生成的module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/standard'], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-co.原创 2020-07-25 15:03:10 · 1092 阅读 · 2 评论 -
vue--父组件使用子组件里的方法和属性--$refs-ref、$el、$root三种属性+console.group
将组件的标签添加一个ref=“xxx” ，然后父组件使用子组件直接this.refs.xxx.xxx<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue中的ref&.原创 2020-07-18 21:13:23 · 372 阅读 · 0 评论 -
vue--注册登录、请求封装（axios，基地址，本地存储的封装）（vue脚手架的目录详解）---demo
随便写几个文件,详细的去7.14号的文件里文件看有底部导航切换，有登录，注册，config.js、auth.js、request.js文件App.vue<template> <div id="app" class="container"> <div class="header">小乖-shopping</div> <router-view class="content"></router-view>原创 2020-07-18 20:53:01 · 434 阅读 · 0 评论 -
vuex--vuex安装使用state和mutations、vuex中的action、组件之间使用vuex传递数据、store文件拆分----获取加载数据demo
vuexvuex是vue中的状态管理插件，可以实现全局统一的状态管理。在一个项目中只有一棵状态树，所有的数据都存储在上面单向数据流数据是单向流动的，view视图通过dispatch派发一个action(行为)，改变state(数据)，数据改变之后视图重新渲染如何使用vuexnpm i vuex # 安装插件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...原创 2020-07-15 13:39:46 · 533 阅读 · 0 评论 -
vue-路由钩子函数create、路由登录判断demo、商城页面布局demo---（图片的插入使用、地址栏logo的修改）
新建一个文件" .prettierrc " 目的是防止js文件出现双引号和分号，它会使文件变成单引号并去掉分号{ "singleQuote":true, "semi":false,}在.eslintrc.js文件中的rules里加入一条规则，目的是让函数（）前不空格，防止报错"space-before-function-paren":"off" 这个单引号双引号都可以 "off"还可以替换成0main.js文件不变App.vue<template> <d..原创 2020-07-14 21:20:04 · 278 阅读 · 0 评论 -
vue---路由嵌套3（1 2 3的综合）--demo（首页、列表页、用户中心）
main.jsimport Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import Home from './pages/Home'Vue.config.productionTip = falseVue.use(VueRouter) // 使用路由// 定义一个路由实例const router = new VueRouter({ routes: [ { ..原创 2020-07-14 17:15:45 · 375 阅读 · 2 评论 -
vue-路由传参和编程式跳转3--（params传参和query传参的区别、编程式跳转this.$router.push）
params传参和query传参是路由传参的两种常见形式。区别在于query传参，参数在url中可见，是标准的url传参形式。使用?分割参数和url地址params传参，参数在url默认是不可见的。除非设置了占位符query传参不怕刷新，刷新之后参数还在params传参除非设置了占位符，否则参数不能再刷新之后保存编程式跳转使用this.$router.push(路由对象)实现跳转List.vue<template> <div class="home">原创 2020-07-14 11:24:15 · 184 阅读 · 0 评论 -
vue--路由安装使用2---（$route和$router）
先安装命令 npm i vue-router然后在main.js文件中进行添加原创 2020-07-13 21:39:22 · 371 阅读 · 0 评论 -
vue----项目目录介绍1
终端输入命令行创建一个vue项目：vue create 目录名生成的目录orange-shop-app及其文件vue项目发布npm run build # 把vue项目进行打包发布，生成可以在web服务器中进行访问的网页# 我们写的.vue文件是源代码，是不能被浏览器解析的# 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候# cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器# 会把把我们写的vue文件进行编译运行# .vue文件原创 2020-07-13 15:58:12 · 216 阅读 · 0 评论 -
vue-cli脚手架生成目录-----大致讲解使用
packageindex.htmlmainApp.vue截图的li可替换成下面这个代码，这样点击title时，可进入对应的视频链接 <ul> <li v-for="item in list" :key="item._id"> <a :href="item.link">{{item.title}}</a> </li> </ul>list.vue 这个是自己创建的..原创 2020-07-11 16:12:53 · 329 阅读 · 0 评论 -
vue-cli脚手架的安装
vue-cli脚手架# 使用官网的说明，进行安装就好步骤：npm i @vue/cli -g # 全局安装vue脚手架 vue -V # 查看vue脚手架的版本号vue create xxx # 创建一个vue项目# 创建项目是，第一步选择第二项 Manually。。。 表示自定义的模式# 第二步 只选择第一个Babel，因为其他的暂时用不到.使用空格加方向键进行选择# 第三步 选择第一项，意思是把所有插件的配置文件放置在单独的文件中# 第四步 输入n，意思是以后原创 2020-07-11 15:09:02 · 177 阅读 · 0 评论 -
vue---slot插槽的使用
<title>slot插槽</title> </head> <body> <!-- html --> <div id="app"> <h1>这是一个如何使用插槽的文档</h1> <movie> <template v-slot:before> <p>这是故事的开始</p> ..原创 2020-07-10 21:26:15 · 339 阅读 · 0 评论 -
vue---移动端-获取爱奇艺movies数据展示列表demo
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习内容</title> <link href="https://cdn.bootc原创 2020-07-10 18:57:43 · 419 阅读 · 0 评论 -
vue----动态组件（将component放在app容器内）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>component</title> </head> <body> &.原创 2020-07-10 13:05:26 · 748 阅读 · 0 评论 -
vue---组件生命周期钩子函数（共11个，此处举例八个）
vue生命周期图示详情链接组件生命周期钩子函数有十一个，暂时学了八个，其中有六个是执行一次的，有两个是循环执行的如果在更新阶段，改变了data，会触发什么样的结果：内存溢出，死循环<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-原创 2020-07-10 12:55:05 · 748 阅读 · 0 评论 -
vue---component2---组件传参3 之 非相关组件之间传参/跨组件传参--eventBus事件总线（父组件向子组件传、子组件向父组件传、非相关组件之间传参）
sadfh原创 2020-07-09 22:35:58 · 267 阅读 · 0 评论 -
vue---component2---组件传参2 之 子传父-事件派发emit和自定义事件（父组件向子组件传、子组件向父组件传、非相关组件之间传参）
一、自定义事件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>自定义事件</title> </head> <body>原创 2020-07-09 22:32:26 · 465 阅读 · 0 评论 -
vue---component2---组件传参1 之 父传子props（父组件向子组件传、子组件向父组件传、非相关组件之间传参）
组件传参父组件向子组件传，通过props属性实现子组件向父组件传，通过事件派发非相关组件之间传参，使用事件总线一、父组件向子组件传参使用props属性进行传递demo1:props是数组的时候，不能解决内部元素身为对象所产生的问题，既报错又导致相应内容不出来<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view原创 2020-07-09 20:50:46 · 489 阅读 · 1 评论 -
vue---组件定义1（三种方式创建自定义组件）---component、template
vue中的组件----组件定义<title>vue中的组件</title> <style> .hello { border-bottom: solid deeppink 0.05rem; } </style> </head> <body> <!-- 3️⃣ --> <template id="tpl"> <div原创 2020-07-09 19:59:05 · 1071 阅读 · 0 评论 -
vue--增删改查信息demo
一.自己的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习</title> <!-- Latest compiled and minified CSS原创 2020-07-09 13:07:24 · 348 阅读 · 0 评论 -
vue---class样式绑定--demo
demo1：叠加class ，有问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>样式绑定</title> <style> .a {原创 2020-07-08 21:34:21 · 199 阅读 · 0 评论 -
vue---watch监听
监听,监听每一个数据的改变，改变之后做一些事情 一个数据的改变触发多个响应<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>watch</ti.原创 2020-07-08 20:44:06 · 156 阅读 · 0 评论 -
vue--计算属性3--computed--购物车总价计算demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <!-- --> <!-- Latest compil.原创 2020-07-08 20:28:32 · 2338 阅读 · 0 评论 -
vue---计算属性2--computed---全选反选demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>计算属性</title> <link rel="stylesheet" href="http://netdna..原创 2020-07-08 17:49:16 · 490 阅读 · 0 评论 -
vue--待办事项--demo
写法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Latest compiled and minif原创 2020-07-08 16:50:59 · 708 阅读 · 0 评论 -
vue---计算属性1--computed（filter、indexOf）---搜索内容过滤demo
计算属性 computed：**************************************************计算属性就是数据依赖项发生改变之后会进行重新的计算computed计算属性，他有一个特点，可以依赖当前数据改变之后进行重新计算会用到 filter（） indexOf（）filter() 方法***************** 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意： filter()原创 2020-07-08 15:33:49 · 712 阅读 · 0 评论 -
Vue---v-bind数据绑定、事件绑定、v-for循环绑定数据、v-model数据绑定、过滤器filters、v-show、v-if及练习（demo：切换小球颜色、获取数据进行展示、显示和隐藏）
一、如何创建一个Vue实例******************************************************* {{}} 在vue中是一个展示数据的方式 一个页面中可以有多个vue实例，他们之间互不影响 el 表示当前vue实例的作用范围 data 表示当前vue实例中使用到的数据 当vue声明变量时 vue内的内容可修改,二：v-bind数据绑定**********************************************原创 2020-07-07 22:43:49 · 841 阅读 · 0 评论 -
前端框架的发展历史
jQueryjQuery插件，可以实现很多非常酷炫的效果。jQuery最核心的一个操作叫元素选择。jQuery解决了浏览器中的js兼容性问题,可以使用统一的一种写法解决相同的操作。Backbone是前端早期一个制作spa单页面应用程序的框架。Backbone+jQuery+underscore,使用require.js实现模块化加载。是一个mvc的框架 m model 存储数据 v view 展示数据 c controller 数据以什么形式进行展示easy原创 2020-07-07 17:46:32 · 812 阅读 · 0 评论