Vue项目化

内容简介：使用vue Cli这里使用webStrom生成vue文件

使用vue Cli

这里使用webStrom生成vue文件

Vue项目化

主文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App);
  }
})

使用渲染函数，Vue文件导入，挂载到appDom节点上

路由

这里使用vue全家桶的route https://router.vuejs.org/zh/

根据Url 分发视图

这个需要好好学。。。。

Vue中最重要的一块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const Foo = {
        template: '<div>foo</div>',
    }
    const Bar = {
        template: '<div>bar</div>'
    }
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]
    const router = new VueRouter({
        routes: routes
    })
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>

动态路由匹配

会进行匹配，参数值会进行替换

嵌套路由

状态管理

这里使用vuex

https://vuex.vuejs.org/zh/

所有分散的共享数据由状态管理器保管

使用vuex

当store中状态发生变化，视图重新渲染

改变store中的状态进行提交

state维护应用层状态。。

在项目中使用vuex

使用脚手架搭建出vuex

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})
这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

驱动映射的数据源 -> 声明state映射到视图，-> actions 响应变化，形成闭环

加数器

创建目录如下

Vue项目化

定义数据仓库

// 加数器模块

export default {
    namespaced: true,   // 独立命名空间
    // 维护应用层状态，确保应用有唯一数据源
    state: {
        count: 0
    },
    // 唯一数据源的缓存值 定义获取数据的方法
    getters: {
        tenTimesCount: (state, getters, rootState, rootGetters) => {
            console.log(state, getters, rootGetters, rootState);
            return state.count * 10;
        }
    },
    // 定义修改数据的方式
    mutations: {
      addCount: (state, num) => {
          // 若num值为空赋值为1
          state.count += num || 1
      }
    },
    // actions 提交mutations 执行异步操作
    actions: {
        addCountAsync: (context, num) => {
            // 这里异步执行
            setInterval(() => {
                // 提交mutations
                context.commit('addCount', num || 100)
            }, num || 100)
        }
    }
}

导出数据仓库

// 输出文件
import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/counter'

Vue.use(Vuex)

// 导出实例化仓库
export default new Vuex.Store({
    modules: {
        count: count
    }
})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

后谷歌时代:大数据的衰落及区块链经济的崛起

乔治·吉尔德 / 现代出版社 / 2018-9-5 / 68

以大数据和机器智能为基础的谷歌时代（信息互联网时代）是一个令人敬畏的时代。但它即将终结。《后谷歌时代》一书的作者乔治•吉尔德是一位颇具远见卓识的智者。他在技术和文化领域具有无与伦比的视野和见地。他向读者描述了谷歌所面临信任与安全危机，并勇敢地预测了即将到来的后谷歌时代。谷歌用其惊人的“搜索和排序”能力吸引了整个世界。功能强大的搜索引擎，看似免费小应用，诸如视频、地图、电子邮箱等，让......一起来看看《后谷歌时代:大数据的衰落及区块链经济的崛起》这本书的介绍吧!

码农工具