vue
文章平均质量分 63
江呱呱
这个作者很懒,什么都没留下…
展开
-
vue router的补充
1.命名视图2.路由别名3.history模式4.路由导航5.过渡6.滚动行为原创 2020-12-03 09:53:23 · 181 阅读 · 1 评论 -
px2vw 单位转换插件
在收藏里面原创 2020-11-24 14:48:40 · 726 阅读 · 0 评论 -
vue的一些小点
想要在组件上使用原生事件 就必须在事件后面加上.native例子 <BackTop @click.native="backClick"></BackTop>原创 2020-11-20 14:29:45 · 129 阅读 · 0 评论 -
封装一个简单的axios
import axios from 'axios'// ES6 Promise的封装export function request(options) { return new Promise((resolve, reject) => { // 1.创建axios的实例对象 const instance = axios.create({ // baseURL: 'http://152.136.185.210:8000/api/w6', baseURL:原创 2020-11-19 20:42:01 · 236 阅读 · 0 评论 -
vue创建快速的path路径
module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', } } }}原创 2020-11-19 20:37:54 · 616 阅读 · 0 评论 -
better-scroll的使用
1.首先在页面中要有一个固定高度的容器注:.wrapper就是这个容器 且这个容器只能有一个子容器 <div class="wrapper" ref="wrapper"> <ul class="moviebox"> <li v-for="(ele,index) in movieList" :key="index" class="movieContainer">原创 2020-11-18 20:44:58 · 1802 阅读 · 2 评论 -
vue之keep-alive
1. vue可以用is来加载组件<component :is="About"><component>2. 那么在被渲染的组件 用一个keep-alive套住 就可以解决每次切换组价都无法保存状态的问题<keep-alive> <router-view/> //或者 <component is="About"></component></keep-alive>...原创 2020-11-17 20:21:10 · 87 阅读 · 0 评论 -
vue之路由懒加载
其实路由懒加载就是在写路由表的时候 最最基本的写法是routes:[{ path:'/about', component:About //这是在之前引入的组件}]路由懒加载的写法routes:[{ path:'/about', component:()=>{import './component/About'}}]...原创 2020-11-17 20:10:58 · 89 阅读 · 0 评论 -
vue中tab栏的切换,保存状态,以及过渡
//当点击这个li的时候 将currentActive转换为hotting 然后在样式中比较 为true的话就可以显示样式<ul class="hotAndComing"> <li @click="currentActive='Hotting'" :class="{'activeClass' : currentActive ==='Hotting'}">正在热映</li> <li @click="currentAc原创 2020-11-10 11:38:58 · 1396 阅读 · 0 评论 -
在vue中使用swiper
下载之后引入这些文件在组件中使用原创 2020-11-10 10:10:38 · 115 阅读 · 0 评论 -
Vue文档的一些没学到的知识
1.在v-if和v-for中使用template2.关于key3.计算属性vs方法总之就是计算属性只要依赖的属性没有变化,那么下次使用这个属性的时候只会从缓存中取值,而方法的话是不管有没有变化都会将这个值重新计算一次4. 计算属性的set和get5.事件修饰符6.事件修饰符7.按键修饰符8.全局组件可以认为是可复用的Vue实例9.解析DOM的注意事项10.单向数据流11.prop验证12.插槽的后备内容13.作用域插槽14.在原创 2020-11-08 17:01:05 · 108 阅读 · 0 评论 -
vue3.x的初使用
1.vue3.x的新特性1.Vue3.0六大亮点Performance:性能比Vue 2.x快1.2~2倍Tree shaking support:按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support:更好的 Ts 支持Custom Renderer API:暴露了自定义渲染APIFragment, Teleport(Protal), Suspense:更先进的组件2.vue是怎么变快原创 2020-11-06 19:43:32 · 212 阅读 · 0 评论 -
nuxtjs的初使用
1.安装$ npx create-nuxt-app <项目名>//或者$ yarn create nuxt-app <项目名>2.路由只要在page目录下生成vue文件 nuxtjs就会自动将改组件添加到路由中去++ 在page文件中创建目录接下来就可以直接用http://localhost:3000/news访问了++动态路由动态路由只要在vue文件命名的时候加上下划线例如这样就可以直接访问了++路由嵌套在目录下创建一个vue文件 同时在同原创 2020-11-05 18:52:00 · 212 阅读 · 0 评论 -
Vue SSR的基本使用
1.安装npm install vue vue-server-renderer --save2.尝试在命令行中显示出来在服务器端渲染的元素// 第 1 步:创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ template: `<div>Hello World</div>`})// 第 2 步:创建一个 rendererconst renderer = require('vue-server-原创 2020-11-05 17:45:07 · 1004 阅读 · 0 评论 -
Vue的render函数
其实render函数就跟template一样 是用来渲染模板的1.两种方式使用render函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl原创 2020-11-05 17:33:36 · 190 阅读 · 0 评论 -
Vuex的初使用
1.statestore的index.js文件在store文件中定义了这些数据然后要在组件文件中用计算属性取出这些数据export default new Vuex.Store({ strict: true, state: { count: 0, title: 'hi store!', UserList: [] }, })组件文件<template><h1>{{titleAlias}}</h1></templ原创 2020-11-04 19:25:09 · 233 阅读 · 0 评论 -
Vue换主题颜色和更换语言
1.换主题颜色在这个面板重新下载规定好颜色 按下载按钮 然后将下载得到的css文件跟原先引用的element-ui的css文件替换下2.更换语言原创 2020-11-04 13:02:05 · 507 阅读 · 0 评论 -
Vue自定义插件
1.第一步首先创建一个plugin文件夹 把响应的代码放到其中对应的文件夹中var MyPlugin = {}//第一个参数是vue 第二个参数就是引入这个包 Vue.use()的时候的第二个参数MyPlugin.install = function (Vue, options) { console.log(options); // 1. 添加全局方法或 property //一般自定义插件都会在名字前面加上$符号 Vue.prototype.$dialog = function原创 2020-11-04 11:47:24 · 239 阅读 · 0 评论 -
vue脚手架
1.命令行安装npm install -g @vue/cliORyarn global add @vue/cli2.创建项目vue create my-projectORvue ui3.局部安装需求:要是从别人那里取得项目要重新安装脚手架 获得的项目是2.x的 但是自己电脑里面的是3.x的,那么如果安装了2.x的,自己电脑原先的3.x的项目就用不了了,这时候就要进行局部安装2.x的脚手架了。yarn add @vue/clinpx vue create myapp4.安装2.x原创 2020-11-03 20:11:09 · 97 阅读 · 0 评论 -
Vue初学4 vue路由
1.vue-router的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&原创 2020-10-25 16:27:10 · 154 阅读 · 0 评论 -
Vue初学3 组件的学习
1.组件注册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2020-10-16 15:36:24 · 148 阅读 · 0 评论 -
初学vue2
初学vue21.表单基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px原创 2020-10-08 16:11:50 · 157 阅读 · 0 评论 -
初学vue
初学vue1.cloak解决页面闪动问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-10-05 20:13:26 · 191 阅读 · 0 评论