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:\Users\Fujun.ssh\id_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
<template>
  <div id="app">
    <router-view></router-view>  
  </div>
</template>

<script>
export default {
  name:'app'
}
</script>

//路由
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

//页面结构
<template>
    <div>
        login
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        
    }
}
</script>
<style lang='less' scoped>

</style>

7.路由跳转

this.$router.push()//不可以返回
this.$router.replace()//可以返回上一级
this.$router.go()//返回上一级
<router-link to="">

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>
      <HistoryHot
        v-if="blockShow == 1"
        :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList"
        @Searchhistory="Searchhistory"
      />
</div>
<script>
export default{
    data() {
     return {
      searchvalue: "",
      iptplaceholder: "",
      // 历史区块的数组
      historyKeywordList: "",
      // 热门搜索的数组
    }
}
</script>

//son
<div class="down">
        <van-tag plain type="default" v-for="(item, index) in historyKeywordList" :key="index" @click="Searchhistory(item)" >{{ item }}</van-tag>
</div>
<script>
export default{
    created() {
 
  },
  props: ['historyKeywordList','hotKeywordList'],
</script>

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组件样式内部结构

<el-tooltip>
    <div v-html="内容" slot="content">
        
    </div>
</el-tooltip>

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": {
         "@/*": ["src/*"]
       }
   },
   "exclude": [
       "node_modules"
   ]
}

22.在css使用变量

<template>
   ...
</template>
 
<script lang="ts">
import dayjs from "dayjs";
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import { Button, Dialog, Toast } from "vant";
 
export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
    Button,
  },
  data() {
    return {
      direction: "top",
      pinPadding: 0,
      time: "",
      timer: 0,
      color: "red",
    };
  },
  methods: {
    showToast() {
      Toast("字体颜色已改蓝色");
      this.color = "blue";
    },
    handleClick() {
      Dialog({
        title: "标题",
        message: "这是一个全局按钮组件",
      });
    },
    initTime() {
      this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      this.timer = setInterval(() => {
        this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
  },
  created() {
    this.initTime();
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
});
</script>
 
<style vars="{ color }">
.text-color {
  color: var(--color);
}
</style>

23.跳转重新打开一个窗口

 var {href} = this.$router.resolve({
                  name: 'DatabaseDetail',
                  query:{durid:e.id,tid:template_id,sid:select_id,dids:database_id,docid:e.user_info.doctor_team_id,doc: e.user_info.doctor_team_id,title:title,name: e.user_info.user_name,xxx:1},
                  params:{id:1}
                
            })
            
       let Details_id=JSON.stringify({id:1})
          localStorage.setItem('Details',Details_id)
       console.log(localStorage.getItem('Details'));
          window.open(href, '_blank')

24.vue-router的history模式

const router = new VueRouter({
  mode:'history',
  base:'/cars/',//部署的公共路径
  routes,
})

25.添加网页标题

//vue.config.js
configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,//网页标题
        resolve: {
            alias: {
                '@': resolve('src'),
                '$img': resolve('/src/assets')
            }
        }
    },
//router/index.js
routes: [{
 path: '/',
 name: 'index',
 component: index,
 meta:{
   title:'首页' // 标题设置在这里
 }
},{
 path:'/detail',
 name:'detail',
 component:detail,
 meta:{
   title:'详情页' // 标题设置在这里
 }
}]

26.vuex导入变量，作为方法名

//一般用于同步和异步的使用、、方法名统一管理
import name from 'utils';

[name](){
    
}

27.子组件修改父组件数据的方式

• 1.子组件 $parent 访问父组件
• 2.子组件 $emit 访问父组件

28.vue初始化页面闪动问题

/*
在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
*/