1.vue工作实用案列大全

1.配置axios发起登录请求

import axios from 'axios'

//配置请求
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http=axios

2.配置Message全局弹框

import {Message} from 'element-ui'
Vue.prototype.$message=Message

3.挂载路由导航守卫

router.beforeEach((to,from,next)=>{
  if(to.path=='/login') return next();

  //获取token
  const totoken=window.sessionStorage.getItem('token');
  if(!totoken) return next('/login');
  next();
})

4.通过axios拦截器添加token验证

axios.interceptors.request.use(config=>{
  config.headers.Authorization=window.sessionStorage.getItem('token');
  return config;
})

5.git的使用

git branch 查看当前分支
git branch -a 查看远程分支
git checkout name 选择分支
git checkout –b newname 创建新分支
git push –u origin newname 推送到码云
git status 查看状态
① git add . 添加到缓冲区
② git commit –m ‘ok’ 提交
③ git push 上传到码云

6．创建码云仓库

生成/添加SSH公钥
ssh-keygen -t rsa -C “邮箱”
按照提示完成三次回车，即可生成 ssh key。
C:UsersFujun.sshid_rsa之中
终端输入ssh -T git@gitee.com
关联仓库
mkdir web
cd web
git init
git commit -m “first commit”
git remote add origin https://gitee.com/fujun1997/web.git
git push -u origin master
处理版本冲突

①方案
git mergetool

②方案
git stash
git pull

git stash pop
git mergetool
git stash clear
git pull 

git add .
git commit -m 'ok'

git push origin

6.vue的页面注册

//APP.vue

//路由
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'

const routes = [
  {path:'/login',component:Login}
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

//页面结构

7.路由跳转

this.$router.push()//不可以返回
this.$router.replace()//可以返回上一级
this.$router.go()//返回上一级

8.路由重复点击错误

@clik=‘$router.push().catch(err=>{})’

//官方版本的bug
import { Toast } from 'vant';
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function(location) {
  return originalPush.call(this, location).catch(err => {})
};

9.父传子组件

//father
div>

//son

        {{ item }}

10.组件弹框

子组件，要给父组件，传递关闭信息

11.element Dialog封装成组件

会有多个遮罩层加append-to-body就可以

12.多个同级路由

//router.js
// 这里的/相当于第一层
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    meta: { title: '数据库', icon: 'dashboard', affix: false, breadcrumb: false },
    // 下面就是数据库的内容
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/database/index'),
      meta: { title: '数据库', isShow: true, icon: 'dashboard', affix: false }, // icon 就是需要显示的内容的图标
      hidden: true,
      // 这里的子就是数据库下面的库
      children: [{
        name: 'detail',
        path: 'detail',
        component: () => import('@/views/database-detail/index'),
        meta: { title: '数据库详情', isShows: true, icon: 'dashboard', affix: false },
        hidden: true,
        children: [
          {
            name: 'DatabaseVariable',
            path: 'variable',
            component: () => import('@/views/database-variable/index'),
            meta: { title: '变量管理', icon: 'dashboard', affix: false },
            hidden: true
          },
          {
            name: 'VariableContent',
            path: 'content',
            component: () => import('@/views/database-variable/content'),
            meta: { title: '目录设置', icon: 'dashboard', affix: false },
            hidden: true
          }
        ]
      }]
    }]
  },
//页面使用v-show="$route.meta.isShows"(表示当前路由)

13.父组件传递数据给子组件，子组件不能改变，要传回给父组件改变 14.this.$nextTick() 下次dom渲染后，马上执行 15.操作dom

// 模拟点击事件
let input = this.$refs[`${id}`][0];
input.click();
// 改变样式
// let img = this.$refs[`radioimg${id}`][0];
let addminImg = this.$refs[`addminImg${id}`][0];
let div = this.$refs[`class${id}`][0];
if (div.getAttribute("class").trim() == 'flex-c') {
div.setAttribute("class", " flex-c bge")
// img.src = "__PUBLIC__/wap/images/单选_复选.png";
document.getElementById(`addminText${id}`).innerText = "移出";
document.getElementById(`addminText${id}`).style.color = "red";
} else {
div.setAttribute("class", " flex-c")
// img.src = "__PUBLIC__/wap/images/单选-未选.png";
addminImg.src = "__PUBLIC__/wap/images/addWB.png";
document.getElementById(`addminText${id}`).innerText = "添加";
document.getElementById(`addminText${id}`).style.color = "#499FF8";
}
//改变style样式
this.$refs.name[0].style.display='none'
//element-ui组件
this.$refs.name[0].$el.style.display='none'

16.移入和移出事件

@mouseenter="enter(item)" @mouseleave="leave(item.item_id)

17.directives自定义指令

//用法 元素内加v-focus
// 自定义指令
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    },
    select: { // 默认选中
      inserted: function(el, binding) {
        el.querySelector('input').select()
        // 因为el-input在input标签外面还包了其他标签，所以要通过querySelector选中input框
      }
    }
  },

18.移入移出事件

@mouseover//移入
@mouseout//移出

19.v-if和v-show的使用详解

v-if更高的切换消耗
v-show更高渲染消耗
切换频繁使用v-show，反之使用v-if

20.v-html可以改变el-element组件样式内部结构

21.Vue项目配置@路径后的自动提示

1、vs-code下载“Path Intellisense”插件。
2、打开设置 - 首选项 - 搜索 Path Intellisense - 打开 settings.json ，添加
"path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
3、在vue项目 package.json 所在同级目录下创建文件 jsconfig.json：,将以下代码复制粘贴即可
  {
   "compilerOptions": {
       "target": "ES6",
       "module": "commonjs",
       "allowSyntheticDefaultImports": true,
       "baseUrl": "./",
       "paths": {
         "@

1.vue工作实用案列大全

Linux相关栏目本月热门文章