vue项目基础用法教程（二）

已于 2022-04-29 14:20:10 修改
阅读量7.5k 收藏 3
点赞数
分类专栏： 搭建vue环境 Vue项目优化 vue 文章标签： vue
于 2022-03-28 14:00:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Genius_cxx/article/details/123793805
版权

创建项目

vue-cli脚手架生成项目

vue create 项目名称

配置参考

vue-router配置

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

1. 安装vue-router（创建项目时若已勾选vue-router请忽略）
npm install vue-router --save
2. 创建路由实例

一般在src目录下创建router文件夹再创建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

// 注入插件
Vue.use(VueRouter)

// 定义公共路由
const routes = [
]

// 创建路由实例
const router = new VueRouter({
    // 配置单页应用的基路径
    base: '',
    // 路由模式 hash || history
    mode: 'hash',
    // 切换路由滚动条置顶
    scrollBehavior: () => ({
        y: 0,
    }),
    // 路由数组
    routes: routes
})

// 导出实例
export default router
3. 挂载到vue实例中

在main.js中引入router

import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  router, //挂载
  render: h => h(App)
}).$mount('#app')
4. 创建路由组件

在views目录下创建about.vue和home.vue两个组件
home.vue

<template>
  <div>
      <h2>我是首页标题</h2>
      <p>我是首页内容</p>
  </div>
</template>
 
<script>
export default {
    name: 'home'
}
</script>
 
<style>
 
</style>

about.vue

<template>
  <div>
      <h2>我是关于标题</h2>
      <p>我是关于内容</p>
  </div>
</template>
 
<script>
export default {
    name: 'about'
}
</script>
 
<style>
 
</style>
5. 配置组件和路径的映射关系

创建路由实例的index.js中创建了router实例，但是我们并没有配置路由间的映射关系

import Vue from 'vue'
import VueRouter from 'vue-router'
 
 
Vue.use(VueRouter)
 
const routes =  [
  {
	//默认首页
    path: '/',
    redirect: '/home'
  },
  {
    // 路由地址
    path: '/home',
    // 路由名称
    name:'Home', 
    // 采用异步引入方式
    component: () => import('@/views/home')，
    // 存储一些自定义参数
    meta:{
        title:'首页',
        hidden: false // menu是否显示此路由
    }
  },
  {
    path: '/about',
    name:'About',
    component: () => import('@/views/about')，
    meta:{
        title:'关于我们',
    }
  }
]
 
// 创建路由实例
const router = new VueRouter({
    // 配置单页应用的基路径
    base: '',
    // 路由模式 hash || history
    mode: 'hash',
    // 切换路由滚动条置顶
    scrollBehavior: () => ({
        y: 0,
    }),
    // 路由数组
    routes: routes
})
 
// 导出router实例
export default router
6. 使用路由

在App.vue中使用路由

<template>
  <div id="app">
    <!-- 
        1. :to="" 可以实现绑定动态的 路由 和 参数
        根据路由路径（/home）跳转 <router-link :to="{path: '/home', query:{id: 'abc'}}">点击查看子页面</router-link>
        根据路由名称（About）跳转 <router-link :to="{name: 'About', params:{id: 'abc'}}">点击查看子页面</router-link>
        另外还可以直接在path后面+?拼接key=value&key=value的方式直接传参，例<router-link to="/home?id=xxx&&name=xxxx">首页</router-link>
        备注：query和params为两种不同的传参方式，query会拼接在url地址后面刷新不会丢失，params在url上不会显示，刷新会丢失。
    --> 
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
  export default {
    name: 'App',
    methods:{
        toHome(){
        }
    }
  }
</script>
7. 路由跳转方式

声明式

:to="" 可以实现绑定动态的 路由 和 参数
根据路由路径（/home）跳转 <router-link :to="{path: '/home', query:{id: 'abc'}}">点击查看子页面</router-link>
根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>

编程式

this.$router.push({path: '/home',query:{id: 'abc'}})
this.$router.push({path: '/home',params:{id: 'abc'}})

params 和 query 传参的区别
1、params传参时，参数不会出现在url的路径上面，但是刷新页面时param里面的数据会消失
2、query传参时，参数出现在url的路径上面，刷新页面时query里面的数据不变

8. back && go 返回上一页

go(-1): 原页面表单中的内容会丢失

this.$router.go(-1)：后退+刷新；
this.$router.go(0)：刷新；
this.$router.go(1) ：前进

back(): 原页表表单中的内容会保留

this.$router.back():后退 ；
this.$router.back(0) 刷新；
this.$router.back(1)：前进
9.keep-alive的使用

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

  1. 利用meta标签
    首先在路由中的meta标签中记录keepAlive的属性为true
...
{
    path: '/about',
    name:'About',
    component: () => import('@/views/about'),
    meta:{
        title:'关于我们',
        keepAlive:true // 代表改页面需要缓存
    }
  }
...
  1. 在需要缓存的router-view组件上包裹keep-alive组件
<keep-alive>
   <router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>
  1. 使用include、exclude属性和beforeRouteEnter钩子函数

include是需要缓存的组件；
exclude是除了某些组件都缓存；
include 和 exclude
属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
将需要缓存的组件加在include属性里
max 表示最大缓存路由个数

<keep-alive :include="['home','about']">
      <router-view></router-view>
</keep-alive>

备注：一般情况设置tab路由切换，访问一个路由push到访问历史访问数组中，过滤需要缓存的路由push到include

10. 路由钩子函数
  1. vue router.beforeEach（全局前置守卫）

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用

应用场景：判断需要登录的页面进行拦截

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判断该路由是否需要登录权限
        if (cookies('token')) {
            //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页
            next()//不要在next里面加"path:/",会陷入死循环
        }
        else {
            next({
                path: '/login',
                query:  { redirect:to.fullPath } //将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next()
    }
})
  1. vue router.afterEach（全局后置守卫）

router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后

  1. 组件内路由守卫

beforeRouteEnter（进入前）、beforeRouteUpdate（刷新）、beforeRouteLeave（离开时） 类似于组件内生命周期函数。

应用场景：清除当前组件中的定时器

beforeRouteLeave (to, from, next) {
  window.clearInterval(this.timer) //清楚定时器
  next()
}

应用场景：当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转

beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
    this.dialogVisibility = false //关闭弹出框
    next(false) //回到当前页面, 阻止页面跳转
  }else if(this.saveMessage === false) {
    alert('请保存信息后退出!') //弹出警告
    next(false) //回到当前页面, 阻止页面跳转
  }else {
    next() //否则允许跳转
  }

应用场景：保存相关内容到Vuex中或Session中

beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}
  1. 实现缓存界面保存滚动位置
    简单方法
    router.js
// keepAlive是否需要保持页面，scrollTop记录页面的滚动位置
...
meta: {
  keepAlive: true,
  scrollTop: 0, // 用于保存滚动条位置
}
...

vue文件中

export default {
    data(){
      scrollTop: 0, // 储存滚动位置
    },
    activated() {
      // 进入该组件后读取数据变量设置滚动位置
      // 注意, 此处由页面是否具有 DTD (如: `<!DOCTYPE html>`), 
      // 决定具体选择, 详见参考资料
      document.documentElement.scrollTop = this.scrollTop;
      // document.body.scrollTop = this.scrollTop;
    },
    beforeRouteLeave(to, from, next) {
      // 离开组件时保存滚动位置
      // 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
      // 因为, 此时利用`deactivated`获取的 DOM 信息已经是新页面得了
      this.scrollTop = document.documentElement.scrollTop;
      next();
    },
  }

router.js 全局保存方法

// keepAlive是否需要保持页面，scrollTop记录页面的滚动位置
...
meta: {
  keepAlive: true,
  scrollTop: 0, // 用于保存滚动条位置
}
...

router.beforeEach((to: Route, from: Route, next: () => void) => {  
  if (from.meta.keepAlive) {
  // 同意使用id = conetent外层包裹，且仅记录外层滚动条
  const $content = document.querySelector('#content');
  const scrollTop = $content ? $content.scrollTop : 0;
  from.meta.scrollTop = scrollTop;
 }
 next();
});

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1. 安装vuex
npm install vuex --save
2. 创建实例

为了项目格式便于维护和相对规范一点，目录下建立一个 store 文件夹，并且在下面建立一个 index.js 文件和 modules文件夹

index.js
用于导入modules文件夹所有文件

import Vue from 'vue'
import Vuex from 'vuex'
// 注入插件
Vue.use(Vuex)
const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
Object.keys(modules).forEach((key) => {
  modules[key]['namespaced'] = true
})
const store = new Vuex.Store({
  modules,
})

导出实例
export default store
3. 挂载到vue实例中

在main.js中引入router

import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router'
//导入vuex
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
  router, //挂载
  store, //挂载
  render: h => h(App)
}).$mount('#app')
4.vuex store

在modules目录下创建user.js文件

  1. state 初始化全局可访问的数据
const state = () => ({
    username:''
})

vue页面中可使用 this.store.state.user.username 获取参数

  1. getters 可以实时监听state值的变化
const getters = {
     username: (state) => state.username,
}

vue页面中可使用 this.store.getters[‘user/username’] 获取参数
或者

import { mapGetters } from 'vuex'
 export default {
  computed: {
    ...mapGetters({
      username: 'user/username',
    }),
  },
}
  1. mutations 用于修改state值，一般都是action中调用
const mutations = {
    setUsername(state, username) {
        state.username = username
    },
}

vue页面中可使用 this.store.getters[‘user/username’] 获取参数

  1. Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
const actions = {
    async getUserInfo({ commit, state }) {
    //调取用户信息接口
    const { data } = await getUserInfo(state.accessToken)
    if (!data) {
     // 失败操作
      return false
    }
    let { username } = data
    // 修改用户名的值
    commit('setUsername', username);
  },
}

vue页面中调用 this.$store.dispatch(‘user/getUserInfo’)

  1. 最后导出方法
export default { state, getters, mutations, actions }

user.js 完整代码

// 引入封装的接口
import { getUserInfo } from "@/api/user.js"
const state = () => ({
    username:''
})
const getters = {
     username: (state) => state.username,
}
const mutations = {
    setUsername(state, username) {
        state.username = username
    },
}
const actions = {
    async getUserInfo({ commit, state }) {
    //调取用户信息接口
    const { data } = await getUserInfo(state.accessToken)
    if (!data) {
     // 失败操作
      return false
    }
    let { username } = data
    // 修改用户名的值
    commit('setUsername', username);
  },
}
export default { state, getters, mutations, actions }

补充Vue用法

  1. vue页面中通过v-for进行数据渲染，如果层次太多，有时候数据发生改变但是页面上看到的效果是毫无变化。render函数没有自动更新，可以通过this.$forceUpdate()手动刷新.

原因：对象添加属性未使用this. s e t ( ) 赋 值 解 决 ： 使 用 t h i s . set()赋值 解决：使用this. set()赋值解决：使用this.forceUpdate();

vm.$forceUpdate()

迫使Vue实例重新渲染，但仅影响实例本身和插入插槽内容的子组件。

vm.$set(target, propertyName/index, value)

官方推荐我们给对象中添加一个属性的时候用 this.$set(target, propertyName/index, value)

  1. 我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本时需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中,此时可以使用this.$nextTick()
vm.$nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

示例1：

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    // created生命周期进行时Dom节点还没有渲染完成。
    created() {
      console.log(this.$refs['hello']); // undefined
      this.$nextTick(() => {
        console.log(this.$refs['hello']);// <div>...</div>
      });
    },
    // mounted生命周期进行时Dom节点已经渲染完成。
    mounted() {
      console.log(this.$refs['hello']);// <div>...</div>
      this.$nextTick(() => {
        console.log(this.$refs['hello']);// <div>...</div>
      });
    }
  }
</script>

示例2：

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊'; 
        console.log(this.$refs['hello'].innerText); // Hello World ~
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText); // 你好啊
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>
vm.$refs

当元素通过ref绑定后，可以通过 this.$refs.refName 获取这个dom节点。

示例：

<template>
    <ul>
        <li v-for="(item,index) in  list" :key="index"  ref="list">
            {{item}}
        </li>
    </ul>
</template>
<script>
export  default {
    data(){
        return{
            list:[1,2,4,5,6,7,8]
        }
    },
    mounted(){
        console.log(this.$refs.list)
        //添加随机颜色
        this.$refs.list.forEach((v)=>{
        v.style.color ='#' + Math.floor(Math.random()*1000000)
        })
    }
}
</script>

ref 加在子组件上，用 this.$refs.name，获取到的是组件实例，可以使用组件的所有方法。

示例：

<!-父组件--->
<template>
  <div>
    <child ref="child" ></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  }
  mounted(){
      this.$refs.child.getData() // 调用
  }
}

<!-子组件--->
<template>
  <div></div>
</template>

<script>
export default {
  methods:{
      getData(){
          console.log('父组件调用了我的方法')
      }
  }
}
众生皆苦唯有我甜
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+webpack项目基础配置教程
11-30
大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台   vscode界面 2.1安装webpack vue vue-loader npm init npm i webpack vue vue-loader npm 出现warn...
vue入门基础语法基本使用以及组件配置安装教程.zip
05-15
以下是一个关于 Vue.js 入门基础语法、基本使用以及组件配置和安装的简要教程 1. Vue.js 基础语法和基本使用 数据绑定 指令 事件处理 2. 组件配置和安装 全局组件注册 局部组件注册 使用 Vue CLI 搭建项目并安装组件...
vue2-----vuex里面的this.$store.dispatch 和 this.$store.commit用法以及区别
weixin_45458830的博客
11-27 971
注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。commit： 同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里。dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据。两个方法都是传值给vuex的mutation改变state。
Vue中this.$store.dispatch方法
qq_45647792的博客
06-08 1082
这里便是向’Login’方法，传递this.loginForm（即此Window的表单值）。，用于向后台提交数据，是异步操作。
探索Vue.js生态中的宝藏：Vue-User-Center
gitblog_00090的博客
04-21 243
探索Vue.js生态中的宝藏：Vue-User-Center 项目地址:https://gitcode.com/doterlin/vue-user-center Vue-User-Center 是一个基于Vue.js框架构建的用户中心组件库，旨在帮助开发者快速搭建高效、易用且美观的用户界面。项目以模块化的设计理念，提供了一系列预封装的UI组件，使得在Web应用开发中创建用户中心部分变得更加简单。 ...
vue项目分析--this.$store.dispatch()&this.$store.commit()&vuex.store()
weixin_46045444的博客
10-12 7623
vue项目分析--20211012vuex中 this.\$store.dispatch() 与 this.$store.commit()方法的区别vuex vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别 这两个的区别是存取的方式不同，两个都是传值给vuex的mutation改变state this.$store.dispatch()含有异步操作，可以向后台提交数据 this.$store.dispatch("action的方法名",valu
this.$store.dispatch(“LoginByUsername“, this.loginForm)的用法解释
超级浣熊
01-13 8770
vue.js登录代码解释
vue项目基础用法教程（一）
Genius_cxx
05-01 1万+
1. 什么是Vue.js? Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2.安装n 安装vue-cli3 & node环境 全局安装 npm install -g @vue/cli 查看vue版本 vue -V 创建项目
Vue开发 基础入门教程
天马3798
03-04 808
10.Vue +Element UI 开发框架搭建。9.Vue Router 路由概念、使用介绍。1.Vue 概念、历史、发展和Vue简介。4.Vue 生命周期，代码结构，代码风格。6.Vue 条件渲染、列表渲染、事件处理。5.Vue 基础语法、计算属性，监听器。2.Vue 开发环境搭建、运行、调试。3.Vue CLI 开发模式原理。一、Vue开发 基础入门教程。7.Vue 表单输入绑定。8.Vue 类与样式。
二、VUE3 基础教程
weixin_42710036的博客
10-29 1275
Vue3必知必会的一些基础教程
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue3基础安装教程
m0_72967249的博客
11-05 4849
vue安装
vue框架搭建之axios使用教程
12-11
前后端数据交互作为项目最基础需求（静态的除外），同时也是项目中最重要的需求。 本文重点介绍axios如何配合vue搭建项目框架，而axios的详细使用介绍请移步 使用说明 1、安装 cnpm install axios --save-dev 2、...
bing Map 在vue项目中的使用详解
12-10
写在最前面 拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于...bing Map 使用教程（基础） 参考文档：bing Map 官方教程 bing Map 初始化 引入bing map资源 [removed][removed] 初始化地
Vue开发教程.docx
最新发布
05-29
准备工作：介绍如何安装Node.js和npm，安装Vue CLI，并创建Vue项目。 项目结构：讲解Vue项目的文件结构和主要文件的作用。 Vue 基础：介绍Vue实例、模板语法和常用指令（如v-bind、v-model、v-if、v-for、v-on）的...
vue点击按钮复制，分享链接给好友
Genius_cxx
11-04 2万+
1.下载模块vue-clipboard2 npm i vue-clipboard2 -s 2.main.js中引入 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 3.vue页面使用方法 html部分 <input type="text" v-model="message"> <butto...
解决Vue启动报错 npm ERR! @1.0.0 dev: node build/dev-server.js
Genius_cxx
09-28 2万+
首先我们要明白报错的原因是这个项目的启动端口被占用。 所以需要我们重新拿回这个端口或者换个端口启动项目。 报错截图 解决方案1: 在config目录下index.js中修改port的值 。 解决方案2: 打开任务管理器找到被占用的端口 关闭应用。 点进程>>找到对应PID关闭即可 ...
Error in v-on handler: "TypeError: handler.apply is not a function"
Genius_cxx
09-10 1万+
报错截图 原因 vue但文件中data属性和methods里的方法重名。 解决 修改重新命名即可
vue入门项目实战教程
03-28
作为一名AI助手，我无法编写代码，但我可以给你提供一些关于Vue入门项目实战教程的建议。 1. 学习Vue的基础知识，包括Vue实例、组件、指令、过滤器、生命周期等。 2. 学习Vue的路由和Vuex状态管理。 3. 实践项目，可以从一个简单的Todo列表开始，然后逐渐增加功能和复杂度。 4. 学习使用Vue CLI工具，它可以快速生成Vue项目，并且包含了常用的插件和配置。 5. 学习使用Vue插件，例如Axios、ElementUI、Vuex-persist等。 6. 参加Vue社区，例如Vue论坛、Vue中文社区等，与其他Vue开发者交流和学习。 7. 阅读Vue官方文档和示例，了解Vue的最新特性和最佳实践。 总之，Vue入门项目实战教程需要实践和不断学习，希望以上建议能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值