VUE学习笔记

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Home = () = >import(/* webpackChunkName: "systemManage" */ './views/Home.vue') 
 
const router = new Router({
    routes: [{
        path: '/Home',
        name: 'Home',
        component: Home,
    }]
}) 

window.routerList = [];

router.afterEach((to, from) = >{
    window.back = function() {
        window.router.isBack = true;
        if (window.routerList.length == 0) {
            window.router.isBack = false;
            return;
        } else if (window.routerList.length == 1) {
            window.router.isBack = false;
            console.log('不能后退了！！！');
        } else {
            let backPath = window.routerList[window.routerList.length - 2];
            window.router.push(backPath);
        }
    }
    if (!window.router.isBack) {
        var routerListLen = window.routerList.length;
        if (routerListLen > 1 && to.fullPath === window.routerList[routerListLen - 2]) {
            window.router.isBack = true;
        }
    }

    // 修改title    
    document.title = to.meta.title || '默认标题';

    if (window.router.isBack) {
        console.log('后退') window.routerList.pop();
    } else {
        console.log('前进') window.routerList.push(to.fullPath);
    }
});
window.router = router;
export default router;

// 处理当前页不记入历史
const currentRouter = this.$route.fullPath; 
// 当前页路由地址
window.routerList = window.routerList.filter(item => {    
    return item.indexOf(currentRouter) < 0;
})
// 如果从当前页跳走又跳回来时有重复路由，则添加下边这一段代码（两项相等则删除最后一个）
const rl = window.routerList;
if (window.routerList[rl.length - 1] === rl[rl.length - 2]) {    
    window.routerList.pop();
}
const targetRoute = '/history/page';
// 清除当前路由以后的所有路由
window.routerList = window.routerList.slice(0, window.routerList.indexOf(targetRoute) + 1)
// 返回到指定路由
let routerList = window.routerList;
const index = routerList.indexOf(targetRoute);
routerList.splice(index + 1, routerList.length - 2);

//使用官方vue-cli脚手架书写
<template>
　　//观察数据为字符串或数组
　　 <input v-model="example0"/>
　　 <input v-model="example1"/>
　　/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
　　 <input v-model="example2.inner0"/>
</template>
<script>
　　 export default {
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1,
　　　　　　　　　　　　innner1:2
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},
　　　　　　watch:{
　　　　　　　　example0(curVal,oldVal){
　　　　　　　　　　console.log(curVal,oldVal);
　　　　　　　　},
　　　　　　　　example1:'a',//值可以为methods的方法名
　　　　　　　　example2:{
　　　　　　　　　//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　　handler(curVal,oldVal){
　　　　　　　　　　　　console.log(curVal,oldVal)
　　　　　　　　　　},
　　　　　　　　　　deep:true
　　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　　a(curVal,oldVal){
　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　}
　　　　　　}
    }
</script>

<template>
    <p>{{msg}}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</template>
export default {

  name: 'Home',
  data: function () {
    return {
      ......
      msg: 'this msg for vue.js!!!',
      ......
    }
  },
  methods: {
    reverseMessage: function () {
      this.msg = this.msg.split('').reverse().join('')
      return this.msg
    }
 ......

<template>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
</template>
export default {

  name: 'Home',
  data: function () {
    return {
      ......
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // console.log('1')
      return this.msg.split('').reverse().join('')
    }
  }
......

### watch

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})


### computed
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

<template>
    {{firstname}}
    <button @click="firstname = 'change complete'">修改txt</button>
</template>
export default {

  name: 'Home',
  data: function () {
    return {
      ......
      firstname: 'hello',
      ......
    }
  },
   watch: {
    firstname: function (newval, oldval) {
      console.log(oldval, newval)
    }
 ......

index.js页面

{
   path: '/info/:phone',
   name: 'info',
   component: info,
   props: true
}
info页传参：

<router-link :to="/info/13800138000">我的订单</router-link>
update页接收：

props: ['phone'],
watch: {
  phone(v) {
    console.log(v)
  }
}