VUE

最新推荐文章于 2022-08-19 16:24:09 发布
最新推荐文章于 2022-08-19 16:24:09 发布
阅读量4.2k 收藏 74
点赞数 18
分类专栏： Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq122516902/article/details/84791420
版权

VUE学习

vue-router

vue-router是用作前端路由的。

安装vue-router

npm install vue-router --save

编写vue-router的配置文件

在src目录下新建一个router的配置文件router.js (名字自定义):

// 导入vue
import Vue from 'vue'
// 导入vue-router
import Router from 'vue-router'
// 导入需要路由的组件
import Hello from './components/hello/Hello'

// 设置vue-router组件全局使用
Vue.use(Router)

// 配置组件路由参数信息
const routes = [
		{
			// 组件路由路劲
			path: '/hello',
			// 要路由的组件
			component: Hello,
			// 取别名，名字自定义
			name: 'Hello'
		}
	]

// 构建路由配置对象
const router = new Router({
	routes 
})

// 导出配置
export default router

使vue-router配置生效

在main.js中，导入上面配置好的路由信息

import Vue from 'vue'
import App from './App'
// 导入router的配置
import router from './router'

new Vue({
// 使配置生效
  router,
  render: h => h(App)
}).$mount('#app')

重启项目，通过ip+端口+ /hello 就能访问到对应的Hello组件了。

配置多级路由

import Vue from 'vue'
import Router from 'vue-router'
import Hello from './component/Hello'
import Hi from './component/hi'

//全局使用router
Vue.use(Router)

const routes = [{
	{
		path: '/hello',
		component: Hello,
		name: 'Hello',
		// 每个路由都有一个children标签，用于配置子路由
		children: [
			{
				path: '/hi',
				component: Hi,
				name: 'Hi'
			}
		]
	}
}]

const router =  new Router({
	routes
})

export default routes

子路由，其实 就是路由下的一个children属性，在children属性是一个数组，可以配置多个路由，在这个属性中的路由中，还可以配置children属性，达到配置多级路由的效果。

使用vue-router

配置好路由信息后，可以通过router-link制作导航，to属性对应配置的path的路径。router-view用来加载（显示）要路由的模板。

<!--配置路由路径-->
<router-link to="/hello">hello</router-link> 
<!--配置路由模板显示地址-->
<router-view></router-view>

也可以通过路由配置中的name属性实现跳转：

<!-- to前面一定要写：，只是一个对象，name: 定义的名字，这样就会跳转到指定name的组件上-->
<router-link :to="{name: 'Hello'}"></router-link>
<router-view></router-view>

在组件中传值

注意的是，to前面一定要有:，to的值是一个对象，并且属性是name, params:

<router-link :to="{name: 'hi', params: {username: 'tom', age: 18} }"></router-link>

在组件中接收参数要用到**$route**：

<p>   {{ $route.name }}   </p>
<p>   {{ $route.params }}   </p>

在不同页面加载不同的组件

配置路径对应的组件，配置router：

import Vue from 'vue'
import Router from 'vue-router'
import Student from './views/Students'
import Teacher from './views/Teacher'

Vue.use(Router)

const routes = [{
    path: '/user',
    // /user路径下对应了两个组件
    components: {
      Student,
      Teacher
    }
}]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

使用时，在router-view中指定要显示的是哪个组件：

<template>
  <div id="app">
    app
    <hr>
    <router-link to="/user">load</router-link>
    <hr>
    <!--通过name属性指定当前router-view要显示的组件-->
    <router-view name="Teacher"></router-view>
    <hr>
    <router-view name="Student"></router-view>
  </div>
</template>

通过url传递参数

在定义路由时，要指定传递的url参数名。

const routes = [{
    path: '/user',
    components: {
      Student,
      Teacher
    }
}, {
// 指定参数名，参数名后面加()，里面写正则表达式，可以匹配路径
  path: '/hello/:id(\\d+)/:name',
  component: Hello
}]

路径跳转：

<!-- 最终路径显示成：http://192.168.56.1:8081/hello/122/xx -->
 <router-link to="/hello/122/xx">URL</router-link>
 <hr>
 <router-view></router-view>

在组件中获取参数：

<p>  {{$route.params.id}} </p>
<p>  {{$route.params.name}} </p>

路由重定向

路由重定向只需要在路由配置里面加redirect就可以了，重定向也可以携带url参数：

	{
		path: '/hi/:id',
		redirect: '/hello/:id'
	}

为路径去别名

使用路由时在router-link的to属性中可以写hi，也可以写/hello，注意不要对根路径/取别名：

	{
		path: '/hi',
		redirect: '/hello',
		alias: '/hello';
	}

路径*匹配

如果有个路径匹配不到，跳转到404页面，注意路径是从上向下匹配的，* 这个匹配应该放到路由最后：

	{
		path: '*',
		component: FileNotFound
	}

路由独享守卫

路由钩子函数、守卫，可以控制路由的访问，只要beforeEnter ：

{
    path: '/hello',
    component: Hello,
    name: 'hello',
    // 定义路由信息的时候指定
    beforeEnter (to, from, next) {
      console.log("去到", to.fullPath);
      console.log("来自", from.fullPath);
      // 当调用next()或者next(true)的时候，路由正常跳转
      next(true);
    }
  }

组件内守卫

钩子函数（守卫）写在组件中， beforeRouteEnter进入路由前，beforeRouteLeave离开组件前:

// 在组件中
export default {
    name: 'Hello',
    beforeRouteEnter(to, from, next) {
      console.log("去", to.fullPath)
      console.log("来自", from.fullPath)
      next(true)
    },
    beforeRouteLeave(to, from, next) {
      console.log("去", to.fullPath)
      console.log("来自", from.fullPath)
      next(true)
    }
  }

全局守卫

前置钩子函数：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

后置钩子函数,不接受next，不会改变导航本身：

router.afterEach((to, from) => {
  // ...
})

动态路由

this.$router.push()

<!--绑定一个事件，调用toHello方法-->
<button @click="toHello">load</button>
<script>
  export default {
    name: "App",
    methods: {
      toHello() {
      	// 在toHello方法中调用push()方法，方法接收一个参数，路由地址
        this.$router.push('/hello')
      }
    }
  }
</script>

this.$router.go()

<button @click="toHello">load</button>
<script>
  export default {
    name: "App",
    methods: {
      toHello() {
      	// 在toHello方法中调用go()方法，方法接收一个参数,历史记录数，-1表示回退一个历史记录，-2表示回退2个历史，同理整数表示前进
        this.$router.go()
      }
    }
  }
</script>

this.$router.repalce()

<button @click="toHello">load</button>
<script>
  export default {
    name: "App",
    methods: {
      toHello() {
      	// 在toHello方法中调用replace()方法，方法接收一个参数,路由地址，比如当前是路由时/a，我们触发这个方法执行，跳转到/hello，replace方法会替换/a，变成/hello，/a不出现在历史记录中，所以回退的时候不会回退到/a
        this.$router.replace('/hello')
      }
    }
  }
</script>

Vuex

简单使用

安装vuex

npm install vuex --save

在src下新建store.js

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'

// 使用vuex
Vue.use(Vuex)

// 声明状态
const state = {
  count: 1
}

// 声明变化 
const mutations = {
 // 这里对状态中的count修改
  add(state) {
    state.count++
  },
  reduce(state) {
    state.count--
  }
}

// 创建vuex数据仓库，需要state和mutations两个属性
const store = new Vuex.Store({
  state,
  mutations
})

// 暴露仓库
export default store

在组件中引用：（this.$store.commit() 接受mutations中定义的函数，会将接收的函数执行）

<template>
  <div>
  	<!--调用当前实例的store属性，取出state状态中的count-->
     Count: {{this.$store.state.count}}<br/>
     <!--this.$store.commit接收一个mutations中定义的函数，用户操作state中的数据，这里不能用this调用-->
    <button @click="$store.commit('add')">+</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="$store.commit('reduce')">-</button>
  </div>
</template>
<script>
	// 引入数据仓库
  import store from './store'

  export default {
    name: 'Count',
    // 作为当前vue实例属性
    store
  }
</script>

使用vuex的state中的属性

方式一： 通过$store.state.xxx访问,xxx就是你要访问的数据

<template>
  <div>
     Count: {{$store.state.count}}<br/>
  </div>
</template>
<script>
	// 引入数据仓库
  import store from './store'

  export default {
    name: 'Count',
    // 作为当前vue实例属性
    store
  }
</script>

方式二：通过计算属性访问，其实也是调用了$store.state.xxx

<div>
	{{ count }}
</div>
<script>
 import store from './store'
export default {
   name: 'Count',
   computed: {
   // 计算属性中使用
     count() {
       return this.$store.state.count;
     }
   },
   store
 }
</script>

方式三：vue 提供了 mapState 函数，它把state 直接映射到我们的组件中。

<template>
  <div>
    Count:{{ count }}<br/>
  </div>
</template>
<script>
  import store from './store'
  // 获取mapState
  import { mapState } from 'vuex'

  export default {
    name: 'Count',
    // 映射到组件
    computed: mapState(['count']),
    store
  }
</script>

上面的方式不能自己写其他计算属性了，如果要写其他计算属性，可以用下面的写法：

computed: {
     localComputed() { 

     },
     // 映射
      ...mapState({
        count: 'count'
      })
    },

修改state中的状态

修改状态state需要用到mutations属性，mutations中定义函数，函数的第一个参数时默认的，为state，第二个参数可以是一个对象。可以通过state获取state中的属性

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 3
}

// 定义操作state的函数
const mutations = {
	// 第一个参数是默认的，之后的参数是自定义的
  add(state, n) {
    state.count += n
  },
  reduce(state, obj) {
    state.count = state.count + obj.n + obj.m
  }
}

const store = new Vuex.Store({
  state,
  // 在mutations中定义一些函数操作state
  mutations
})

调用定义的函数操作state：

 <button @click="$store.commit('add', 10)">+</button>
 <button @click="$store.commit('reduce', {n: 10, m: 20})">-</button>
 <script>
  import store from './store'
  import { mapState } from 'vuex'

  export default {
    name: 'Count',
    store
  }
</script>

使用mapMutations：

<template>
  <div>
    Count: {{$store.state.count}}<br/>
    <button @click="add(11)">+</button>
    <button @click="reduce({n: 10, m: 20})">-</button>

  </div>
</template>
<script>
  import store from './store'
  // 引入mapMutations
  import { mapMutations } from 'vuex'

  export default {
    name: 'Count',
    // 传入方法名即可
    methods: mapMutations(['add', 'reduce']),
    store
  }
</script>

为了能自定义方法，也可以这样写：

<template>
  <div>
    Count: {{$store.state.count}}<br/>
    <button @click="add(11)">+</button>
    <button @click="reduce({n: 10, m: 20})">-</button>

  </div>
</template>
<script>
  import store from './store'
  import { mapMutations } from 'vuex'

  export default {
    name: 'Count',
    methods: {
    	// 自定义方法
      my() { },
      // mapNuutations的用法
      ...mapMutations(['add', 'reduce'])
    },
    store
  }
</script>

getters

设置getters

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 3
}

const mutations = {
  add(state, n) {
    state.count += n
  },
  reduce(state, obj) {
    state.count = state.count + obj.n + obj.m
  }
}

// 定义getters
const getters = {
  count(state) {
    return state.count += 100
  }
}


const store = new Vuex.Store({
  state,
  mutations,
  // 使用getters
  getters
})

export default store

使用getters：

<template>
  <div>
  	<!--要通过这种方式 访问-->
    Count: {{count}}<br/>
  </div>
</template>
<script>
  import store from './store'
  // 引入getters
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'Count',
    methods: {
      my() { },
      ...mapMutations(['add', 'reduce'])
    },
    // 在计算属性中使用..
    computed: {
    	// 使用getters
      ...mapGetters(['count'])
    },
    store
  }
</script>

action异步执行

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 3
}

// 定义方法
const mutations = {
  add (state, n) {
    state.count += n
  },
  reduce (state, obj) {
    state.count = state.count - obj.n - obj.m
  }
}

// 声明action，声明要异步执行的函数
const actions = {
// 传入的是context对象
  add (context) {
    context.commit('add', 0.1)
  },
  // 或者是{commit}
  reduce({commit}, n) {
    commit('reduce', n )
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

使用：

<template>
	Count: {{count}}<br/>
    <button @click="add">+</button>
    <button @click="reduce({n: 1, m :2})">-</button>
</template>
<script>
  import store from './store'
  // 导入
  import { mapActions, mapState } from 'vuex'

  export default {
    name: 'Count',
    methods: {
      my () {
      },
      // 使用
      ...mapActions(['add', 'reduce'])
    },
    computed: {
      ...mapState(['count'])
    },
    store
  }
</script>
黄小鸭吖
关注
  • 18
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 6万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
Vue框架背后的故事
官方推荐
10-08 10万+
Vue作为当下主流的框架，让我们一起走进尤大大对Vue的构建历程吧
Vue3生命周期
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
如何搭建一个vue项目(完整步骤)
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 17万+
一、环境准备 1、安装node.js 下载地址：https://nodejs.org/zh-cn/ 界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功（最新的以官网为准） 3、为了提高我们的效率，可以使用淘宝的镜像源 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源 以后再用到npm的地方直接用cnpm
vue 3.0 使用ref获取dom元素
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue3的基本使用(超详细)
luofei_create的博客
06-06 14万+
2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece特点：无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin。......
VSCode 开发Vue必备插件
阿杰
05-19 17万+
工欲善其事，必先利其器 以下就是开发Vue必备插件： Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着） EsLint —— 语法纠错 Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个） ...
如何新建一个vue2项目（超详细哦）
不甜呐的博客
11-05 10万+
如何新建一个vue2项目（超详细哦）
vue中 关于$emit的用法
热门推荐
榴莲不好吃的专栏
11-21 80万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> &l............
vue2
02-21
武德莫项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
Vue
02-09
Vue
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
vue 项目源码
08-07
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue 项目源码"很可能是某个公司在实际开发过程中创建的一个Vue项目实例，包含了完整的前端应用代码。在这个项目中，我们可以深入理解Vue的核心...
vue网站
02-07
vue网站 用Vue制作的基本网站调用现在离线的音乐API 托管在 代码需要一些清理； 重复CSS选择器如果API仍在线，则相册页面的外观如下： 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 ...
vue-playground:Vue 2训练场
04-14
:red_exclamation_mark: Vue游乐场 :writing_hand: 培训Vuex，Vux和其他Vue库的地方。 这个仓库是做什么用的？ 培训，教程，测试现场 只有小项目 更快地建立新项目 分行： :keycap_1: 大师-Clean Vue 2.6项目 :...
Vue登录页面
02-11
first_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
尚硅谷vue课程笔记整理
最新发布
05-30
尚硅谷vue课程笔记整理
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值