vue和vuex,vue router的使用方法

时间:2020-05-01

vue

引用vue js文件

<table id="test">
    <tr v-for="(item,index) in data">
        <td>{{item}}</td>
    </tr>
</table>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data: {
            data: ['a', 'b', 'c']//从后端拿到的数据
        }
    });
</script>

脚手架使用

安装vue插件

npm install -g @vue/cli

查看是否安装成功

vue --version

创建一个项目

vue create hello-world
cd hello-world
npm run serve

在浏览器打开上面网址即表示安装成功了。

vue router

安装

npm install vue-router

也可以直接引用vue-router.js文件

新建2个组件

首页组件Home.vue

<template>
    <div>
        <router-link to="/detail">跳转到详情页</router-link>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

详情组件Detail.vue

<template>
    <p>
        详情页
    </p>
</template>

<script>
    export default {
        name: "detail",
        mounted() {
            console.log(this);
        }
    }
</script>

<style scoped>

</style>

修改App.vue的代码

<template>
  <div id="app">
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style>

</style>

新建路由文件routes.js

import Detail from "./src/components/Detail";
import Home from "./src/components/Home";
const routes = [
    { path: '/detail', component: Detail },
    { path: '/home', component: Home }
];
export default routes;

修改入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import routes from "../routes";

Vue.config.productionTip = false
Vue.use(VueRouter);
const router = new VueRouter({routes});
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

重新运行

访问 http://localhost:8080/#/home

点击链接

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

安装

npm install vuex --save

修改main.js文件

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import routes from "../routes";
import Vuex from 'vuex'
Vue.use(Vuex)

Vue.config.productionTip = false
Vue.use(VueRouter);
const router = new VueRouter({routes});

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
});

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

修改Home.vue文件

<template>
    <div>
        {{this.$store.state.count}}
        <br>
        <button @click="add">增加值</button>
        <br>
        <router-link to="/detail">跳转到详情页</router-link>
    </div>
</template>

<script>
    export default {
        name: "home",
        methods: {
            add() {
                this.$store.commit('increment')
            }
        }
    }
</script>

<style scoped>

</style>