刷新页面的问题 //router.js const router = new VueRouter({ mode: 'hash', // mode: 'history', base: process.env.BASE_URL, routes }) export default router 历史模式(history)的路径比较好看，比如： 但是，会碰到刷新就404的错误！这个可以在nginx的配置中设置：

它会自动判断是不是手机端，如果是，则使用以下样式！ @media only screen and (max-width:768px) { #moochain{ width: 96%; margin: 0 auto; } .classlist{ padding-left: 0.5rem; width: 98%; margin: 0 auto; } }

主要是使用@keyup的动态事件，键盘一输入，就执行检查函数，以得到结果。 动态绑定样式表，将得到的结果切换显示。主要用于注册等操作。 <b-input id="inline-form-input-name" :class="checkFlag ? 'isok': 'isfalse'" placeholder="请输入用户名(3位以上英文 或

完美解决HTML中footer保持在页面底部问题 //App.vue html,body{ height: 100%; } #app{ position:relative; width:100%; min-height:100%; padding-bottom: 4rem; box-sizing: border-box; } //footer.vue .myfooter{ background-color:

参考 1. loading.vue组件 <template> <div class="loading"></div> </template> <script> export default { name: "Loading" } </script> <style scoped>

对于常用的重复使用的代码，可以把它写成公共方法，然后在全局使用即可。 主要有两步: 1.utils -> 定义方法或变量，export 2.main.js中导入并挂载到全局。 //utils/getstr.js const getstr = function(){ function randomString(length, chars) { let result = '' for (let i

<template> <div v-for="(t, key) in data"> {{ t.name }}--{{ key}} <div v-show="flag[key]">出来吧，阿里巴巴</div> <button @click="show(key)">显示</button>

参考 参考2 可以动态更新data中的数据显示，也就是操作data的方法 data() { return { post: {id:1, body:'hello'}, } }, methods:{ addCollection() { this.$set(this.post, 'id', 3) //更改id值 this.$set(this.post, "body",

watch 监听事件的变化，一有变化，立刻执行！ 可以监听数据的实时变化，设一个data, 一个temp，监听temp。将会有变化的数据赋值给temp，监听到变化，会立刻赋值给data。这样可以达到实时渲染数据的目的。 <template> <div> ++{{ data.id }}--{{ data.body }}++ </div> </template>

常见的文本格式化，只能用在插值表达式和v-bind表达式中。实质是对数据进行处理，执行了函数。 <li>{{ post.created | formatTime }}</li> filters:{ formatTime(data){ return data.substring(0,10) } },

markdown编辑器和解析器 手册 上传图片 cnpm install mavon-editor --save // main.js import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) new Vue({ 'el': '#main', data()

npm手册 手册 cnpm install vue-cookies --save // main.js import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies) // 应用 Set a cookie this.$cookies.set(keyName, value[, expireTimes[, path[,

vue配套的公共数据管理工具，它可以把一些共享的数据保存到vuex中，实现不同组件传值，并且数据持久化。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。小项目可以直接用H5的 localStorage 、 sessionStorage cnpm install vuex --save import Vuex from 'vuex' Vue.use(Vuex) var store =

参考 //main.js router.beforeEach(function (to, from, next) { if(to.meta.requireAuth){ // 要去的url只有登陆成功后才能访问 if (store.state.username) { next() } else { next({name: 'login'}) } }else{ next() } }) //routers.js

<button @click='jumpto'> 点击跳转 </button> <script> methods: { jumpto (){ this.$router.push('/cart') //this.$router.push({path: '/cart'}) //this.$router.push({path: '/cart' + id}) } }

<div id="app"> <router-link :to="{name: 'login'}">login</router-link> <router-link :to="{name: 'login',params:{id:10}}">login</router-link> //传参的形式

(name指定组件名)，多个组件布置 <div id="app"> <router-view></router-view> <router-view name="left"></router-view> <router-view

<div id="app"> <router-link to="/login">login</router-link> <router-link to="/register">register</router-link>

// 一个案例：文章列表到文章详情页 //注意：+ 号之间不能有空格！！它是绑定变量的，有空格的话会被加入 <router-link :to="'/article/'+post.permlink">{{ post.title }}</router-link> //router.js path: '/article/:permlink' //article.vue

//app.vue <style> //用这个类 .router-link-exact-active{ color:red; border-bottom: 1px solid red; } .router-link-active{ color:red; } </style>