vue-router | 易学教程

每天学点Vue,学习笔记---DAY4

阅读更多关于每天学点Vue,学习笔记---DAY4

小球动画过程分析与flag在动画过程中的作用 : 动画被分为两个阶段,一个是前半场动画,一个是后半场动画使用flag是后半场动画不执行,每次执行前半场完,flag取非, 下次执行还是前半场动画. 组件的复习: 父组件向子组件传值和data与props的区别: data中的值是可读可写的 props中的值是只读的(写的时候会报警告,不推荐用,要写用data), 组件中的所有props中的数据，都是通过父组件传递给子组件的如何定义: 用v-bind:parentmsg="父变量值",然后在子组件的props[parentmsg]定义这个变量接收. 用{{parentmsg}}使用父组件向子组件传方法: 用v-on方法绑定:vm定义一个父方法show 使用v-on:name="show"绑定父方法到子组件上使用this.$emit('show')来调用父方法活用:可通过有参方法,将子组件的值传给父组件 this.$emit('show',子参数) show(){ 父参数=子参数 } vm的data:{ 父参数=null } 使用localStorage完成评论的功能: list.push:尾部添加 list.unshift:头部添加使用@func="loadComments"让父组件的方法可以在子组件里用 $refs的用法: 普通使用如下: 组件中使用如下: 1

Vue router的使用（学习笔记）

阅读更多关于 Vue router的使用（学习笔记）

Vue router的使用（学习笔记） 1、打开终端安装router命令如下 npm install vue-router或cnpm install vue-router（建议使用cnpm下载）或yarn add vue-router 2、在新建router.js中引用如下代码（文件健在src目录里） import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) 3、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue （从下面的代码中我们可以发现引入了一个组件Content，我们需要单独写一个组件） < template > < div id = "home" > < Content / > < / div > < / template > < script > import Content from "../../components/Content.vue" export default { name : "index" , data ( ) { return { } } , components : { Content , } , methods : { } } < / script > < style scoped > < /

10个Vue开发的技巧

阅读更多关于 10个Vue开发的技巧

路由参数解耦一般在组件内使用路由参数，大多数人会这样做： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。正确的做法是通过 props 解耦 const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }] }) 将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数 export default { props: ['id'], methods: { getParamsId() { return this.id } } } 另外你还可以通过函数模式来返回 props const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: (route) => ({ id: route.query.id }) }] }) 函数式组件函数式组件是无状态，它无法实例化，没有任何的生命周期和方法

Web前端

阅读更多关于 Web前端

<div id="app">  {{ message }} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script> 基本数据渲染和指令 v-bind 特性被称为指令。指令带有前缀 v-，除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-bind指令单向数据绑定

【生活美好】jay_music

阅读更多关于【生活美好】jay_music

今天我们一起来看用vue编写的h5端周杰伦音乐播放器我是听着jay的歌，看的这个项目哦先放上作者大大的地址 https://github.com/osuuu/jay_music 接下来我们看看这个项目里面有哪些效果接下来我们看看代码首先是main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import './assets/js/remScale' //适配尺寸 import './assets/css/reset.css' //引入Vant-ui import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) import axios from 'axios' Vue.prototype.$axios = axios Vue.config.productionTip = false /* eslint-disable

关于VUE项目中报Error: Avoided redundant navigation to current location: 的错

阅读更多关于关于VUE项目中报Error: Avoided redundant navigation to current location: 的错

在VUE中路由遇到 Error: Avoided redundant navigation to current location: 报错显示是路由重复，虽然对项目无影响，但是看到有红的还是不舒服。于是查了一下发现可以这样解决在你引入VueRouter的时候再加上一句话： const originalPush = VueRouter . prototype . push VueRouter . prototype . push = function push ( location ) { return originalPush . call ( this , location ) . catch ( err => err ) } 这样就可以解决此报错。可参考： https://blog.csdn.net/xiecheng1995/article/details/106497172/ https://www.cnblogs.com/xinheng/p/13019818.html 来源： oschina 链接： https://my.oschina.net/u/4405256/blog/4302818

vue3.x结合typescript初体验

阅读更多关于 vue3.x结合typescript初体验

一、Vue3.0 的设计目标更小\更快 - Vue 3.0大小大概减少一半，只有10kB 加强TypeScript支持加强API设计一致性 - 易读提高自身可维护性开放更多底层功能 vue3.x 采用Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高,由于修改了组件的声明方式，以函数组合的方式完成逻辑，天然与typescript 结合。（vue2.x中的组件是通过声明的方式传入一系列options的，所以在2.x下使用typeScript 需要装饰器的方式 vue-class-component 才行） // vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html <script lang= "ts" > import Vue from 'vue' import Component from 'vue-class-component' @Component export default class App extends Vue {} </script> 复制代码二、typescript 有什么优点 1、增加代码的可读性与可维护性大部分函数看类型定义就知道是干嘛的静态类型检查，减少运行时错误 2、社区活跃，大牛都在用在vue3热潮下

实现微前端需要了解的 Vue Genesis 渲染器

阅读更多关于实现微前端需要了解的 Vue Genesis 渲染器

我们的需求在中，核心的就是渲染器，它提供了最基础渲染能力，有了它，你可以实现微前端、微服务、远程组件、首屏渲染，甚至可以和 React、EJS 等配合使用。它可以和怎样的你协作？如果你是传统的后端渲染的，需要做SEO，但是你希望在部分布局，部分页面引入 Vue，那么 renderer.renderJson() 足以，将渲染结果传递给后端渲染的模板引擎中即可。如果你是中后台系统，业务系统全部集中在一个项目，你希望可以按照业务进行服务的拆分，那么 `` 足以如果你是 CSR 渲染的项目，那么 renderer.renderHtml({ mode: 'csr-html' }) 足以如果你是 SSR 渲染的项目，那么 renderer.renderHtml({ mode: 'ssr-html' }) 足以如果你想做微前端、微服务、那么渲染器天生就具备了这样的能力，你可以把它当成一个工具函数使用，你可以通过 HTTP 、 RPC 等等各种协议访问到你的服务，然后使用它进行渲染创建一个渲染器开发环境 import { SSR } from '@fmfe/genesis-core' ; import { Watch } from '@fmfe/genesis-compiler' ; const start = async () => { const ssr = new

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

阅读更多关于 Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

目录前言基础理论（5天）基础理论-Day01 基础理论-Day02 基础理论-Day03 基础理论-Day04 基础理论-Day05 项目实战项目实战-Day01 项目实战-Day02 项目实战-Day03 项目实战-Day04、Day05 前言 10天的实训，收获还是很多的。并且，几乎每节课都有录播+源码+笔记(只有一节课，忘了录屏)。大部分知识，都总结到了博客上。培训用到的东西：VScode软件、视频、PDF笔记、源码。除了视频没有上传，其它的都在博客上了。视频，不方便上传！！！可私聊... 例如：基础理论（5天）基础理论-Day01 Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】 Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】基础理论-Day02 Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】 Vue.js-Day02-PM【组件化开发（全局注册组件

Vue路由history模式踩坑记录：nginx配置解决404问题

阅读更多关于 Vue路由history模式踩坑记录：nginx配置解决404问题

https://www.cnblogs.com/goloving/p/9170508.html 问题背景：　　vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成如下： http://localhost:8080/bank/page/count 这样的了；　　不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404 　　怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html 上就可以了。解决方案

订阅 vue-router