weixin_45734902的博客

路由理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。1.基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../co

Vuex1.概念​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？​ 多个组件需要共享数据时3.搭建vuex环境创建文件：src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备acti

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个

插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽：父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template> <div>

1.首先引入bootstrap.css这里有个需要注意的点，CSS可以通过import在vue中引入，也可以通过Link在public的index.html中引入，但在vue文件中通过import引入会产生问题，因为css中可能会缺少部分字体，路径不对等问题，vue在通过import引入时会进行严格的检查，所以会报错，但通过link在index.html中引入则不会报错。具体引入代码如下：<!-- 引入第三方样式 --><link rel="stylesheet" href="&l

方法一​ 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点：配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二​ 编写vue.config.js配置具体代理规则：module.exports = { devServer: {

首先安装下animate.cssnpm install animate.css --save然后在vue文件的script中引入：import $ from '../assets/js/jquery.js';//非必要import animate from 'animate.css'代码例子：<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <t

单个元素过渡动画<template> <div> <button @click="isShow = !isShow">显示/隐藏</button><!-- 这里的appear相当于： :appear="true"--> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition>

全局事件总线（GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 关于全局总线的使用说明// 使用全局总线的时候，更好的应用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到直接通信，这个使用全局事件总线会方便很多new Vue({ render: h => h(A

全局事件总线（GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){ demo(data){....

消息订阅与发布（pubsub）一种组件间通信的方式，适用于任意组件间通信。使用步骤：安装pubsub：npm i pubsub-js引入: import pubsub from 'pubsub-js'接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){ demo(data){......}}......mounted() { //this.pid = pubsub.subscribe('xxx',this.demo)

<template> <div> <h2 @click="showName">学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> </div></template><script> import {hunhe,hunhe2} from '../mixin' export default { name:'Student', data() {

<template> <div> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>学生年龄：{{myAge}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> </div></templ