vue2.0学习笔记--jQuery，vue-cli，vue-router，vuex 数据仓库，状态管理器

一，vue中使用jQuery

<div id="app">
    <h1>{{score}}</h1>
    <p id="ms"></p>
</div>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
        },
        mounted:function(){
            $("#ms").html("vue中使用jQuery");
        }
    })
</script>

二，$on，在vue构造器外部建立函数并调用

<div id="app">
    <h1>{{score}}</h1>
</div>
<button onclick="add()">add</button>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
        }
    });
    app.$on('add',function(){
        this.score++;
    });
    function add(){
        app.$emit('add');
    };
</script>

三，vue-cli (vue脚手架)

1，安装 vue-cli
cnpm install vue-cli -g
2，在文件夹E：\test下初始化项目 ，安装webpack
vue init webpack vueclitest    -- vueclitest是项目名称

vue-router 路径管理器

安装 npm install vue-router --dev-save

router-link 导航

在components目录下创建Test.vue
<router-link to="/">首页</router-link>
<router-link to="/Test">TEST</router-link>

npm run build 构建上线文件（dist文件下）

四，vue-router 路径管理器
1，安装vue-router

npm install vue-router --dev-save

2，router-link 导航

在App.vue中添加
<router-link to="/">首页</router-link>
<router-link to="/TEST">TEST</router-link>

3，子路由

在Test.vue中添加
<template>
  <div>
    <h1>{{ msg }}</h1>
    <router-view/>
  </div>
</template>

子路由配置 （router/index.js）
routes: [
{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
},{
  path: '/Test',  //有子路由时，不需设name
  component: Test,
  children:[
    {path: '/',name: 'Test',component:Test},
    {path: 'Test1',name: 'Test1',component:Test1},
    {path: 'Test2',name: 'Test2',component:Test2}
  ]
}

4，路由参数传递

// 不常用
<p>{{ $route.name }}</p>

router-link 传参 （name值 与 路由name一致）

<router-link :to="{name:'Test1',params:{testname:'test1_name',id:4}}">
TEST1
</router-link>

<template>
  <div>
    <h1>{{ msg }} -- {{ $route.params.testname }} -- {{ $route.params.id }}</h1>
  </div>
</template>

5，单界面多路由区，mode修改访问地址是否有#
在App.vue中添加

<router-view />
<router-view name="left" />
<router-view name="center" />

在router/index.js下配置

mode:'history',
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    components: {
      default:HelloWorld,
      left:Test,
      center:Test1
    }
  }
]

6，vue-router 利用url传参，redirect 重定向，alias 别名的使用

建立导航
<router-link to="/test/123/testname">TEST</router-link>
<router-link to="/gotest/123/testname">GoTEST</router-link>
<router-link to="/testAlias/345/testname">testAlias</router-link>

创建路由 （传递参数用:）
{
  path:'/test/:testId/:testname',
  component:Test，
  alias: '/testAlias/:testId(\\d+)/:testname'
},{
  path:'/gotest/:testId(\\d+)/:testname',
  redirect:'/test/:testId(\\d+)/:testname'
}

引用参数
<h2>{{ $route.params.testId }} --
 {{ $route.params.testname }}
 </h2>

路由加正则 (\\d+)
{
  path:'/test/:testId(\\d+)/:testname',
  component:Test
},{
  path:'*',
  component:ErrorTest
}

7,路由文件中的钩子函数，监听进出路由

//这种配置只能监听路由进入
{
  path:'/test/:testId(\\d+)/:testname',
  component:Test,
  beforeEnter:(to,from,next)=>{
    console.log(to);
    console.log(from);
    next();
  }
}

8，编程式导航

在App.vue中添加

<div>
  <button @click="goTest">goTest</button>
</div>
<script>
// this.$router.go(-1); 后退
//this.$router.go(1); 前进
export default {
  name: 'App',
  methods:{
    goTest(){
      this.$router.push('/test/678/testname');
    }
  }
}
</script>

五，vuex 数据仓库，状态管理器 (公共数据管理)

安装：cnpm install vuex --save

创建vuex/store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
    count:5
};
const mutations = {
    add(state,num){
        state.count+=num;
    },
    reduce(state){
        state.count--;
    }
};
const getters = {
    count:(state)=> state.count+=5
}
export default new Vuex.Store({
    state,
    mutations,
    getters
});

2,Test1.vue，getters计算过滤操作，

<template>
  <div>
    <h1>{{ msg }} </h1>
    <h1>{{ $store.state.count }}</h1>
    <div>
      <button @click="$store.commit('add',3)">add</button>
      <button @click="$store.commit('reduce')">reduce</button>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState,mapMutations,mapGetters } from 'vuex';
export default {
  name: 'Test1',
  data () {
    return {
      msg: 'Welcome to Your Test1'
    }
  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(['count'])
  },
  methods:mapMutations(['add','reduce']),
  store
}
</script>

3，state 访问状态对象

修改Test1.vue

<h1>{{ count }}</h1>

<script>
import store from '@/vuex/store';
import { mapState } from 'vuex';
export default {
  name: 'Test1',
  data () {
    return {
      msg: 'Welcome to Your Test1'
    }
  },
  computed:mapState(['count']),
  store
}
</script>

4,actions异步修改状态

const actions={
    addAction(context){
        context.commit('add',2);
        setTimeout(()=>{context.commit('reduce')},2000);
    },
    reduceAction({commit}){
        commit('reduce');
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
});

test.vue

<button @click="addAction">addAction</button>
<button @click="reduceAction">reduceAction</button>

import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
methods:{
  ...mapMutations(['add','reduce']),
  ...mapActions(['addAction','reduceAction'])
},