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 即可获取父组件对象。 这种方法比较简单，但是不太直观，建议使用上一种方法。

分两步走: 在父组件中动态绑定属性，:parentmsg='msg' 子组件中通过 props: 获取。 传方法也是差不多步骤. //App.vue传值给Header.vue //App.vue中的写法 <template> <div id="app"> <Header :parentmsg="title"

axios中文文档 参考 参考2 cnpm install axios --save //main.js import axios from 'axios' Vue.prototype.axios = axios //其它js中使用： this.axios({......}) //或者是哪里使用哪里就导入： import axios from 'axios' axios.get(){}

<template> <div id="app"> <router-link to="/index">首页</router-link> <router-link to="/course">课程</router-link> <router-link

主要是在 App.vue 中布局。 主要分三步：引入，注册及使用。 <template> <div id="app"> <Header></Header> //3.使用 <Banner></Banner> </div> </template> <script> import