参考 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>

vue-router文档 新版的vue中路由默认就是history模式（即url中没有# ,hash模式才有） cnpm install vue-router --save //使用，比如App.vue <div id="app"> <router-link to="/login">login</router-link>

这也是调用子组件的方法 <input type="button" value="调用" @click="getElement"> <h3 ref="myh3">天天这样</h3> getElement: function () {

主要是通过 $refs 获取子组件对象 绑定属性 获取子组件对象 //Test.vue data(){ return { str:'', sonmsg: '这是子数据' } }, // App.vue <Test ref="sonmsg"></Test> // 1. 绑定属性 mounted() { console.log(566,

直接在子组件中使用 this.$parent 即可获取父组件对象。 这种方法比较简单，但是不太直观，建议使用上一种方法。