您的位置：首页 > Web前端 > Vue.js

Vue学习笔记

2020-02-02 14:03 696 查看

1、首先安装脚手架工具Vue-cli,这没什么可说的。

npm install vue-cli -g

-g是全局安装

2、构建自己的项目

vue init webpack my-project

webpack是包管理器，项目名称my-project可以改成任何名字。

3、然后系统会问你一大堆问题，比如项目名称，作者名字，描述等等，系统还会很贴心的问你要不要装一些检测工具，比如ESlint，Nightwatch等，既然它诚心诚意的问了，我就大发慈悲的装上吧，具体这些软件到底是怎么用的，后来我们在进行写代码的时候就会遇到，在这里我就不多做赘述。

4、运行自己的项目

cd my-project
npm install
npm run dev

就是进入my-project目录，然后把npm环境装上，npm run dev是运行语句

如果看到下图，就表示运行成功了：

5、修改自己的首页

vue-cli脚手架使用的是node下的express模块，具体的运行机制请参考Express。

默认首页是index.html

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

App.vue的内容会渲染到id为app的div块里，这没什么好说的，我们继续看App.vue的内容。

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>

重点是router-view标签，它是一个functional组件，它根据路由规定的规则把组件渲染到这里面，默认的路由规则是将components 里的Hello.vue文件渲染到这里，我把路由规则改成了自己要用的Text.vue。

那么如何修改路由呢？

6、修改路由

官方有更详尽的教程vue-router，在这里，我只针对vue-cli脚手架里的实例代码进行解释。

首先导入模块。

import Vue from 'vue'
import Router from 'vue-router'
import Text from '@/components/Text'

import语法是ES6的语法规则，如果不懂的可以在点这里ECMAScript 6 入门。

接着是

Vue.use(Router)

如果不导入模块直接使用路由的话，是不需要这句的，在这里我们是采用import模块的方法，所以这句要写上。

最后是

export default new Router({
routes: [
{
path: '/',
name: 'text',
component: Text
}
]
})

导出并初始化路由，同样是ES6语法规则。

当然，这句我们也可以根据官方的写法，改成：

// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/', component: Text }
]

export default new Router({
routes// （缩写）相当于 routes: routes
})

OK，没有问题。

7、了解状态管理器Vuex。

状态管理器，顾名思义，就是管理状态的器（这不是废话么），但是这里有3个问题，我们来逐个分析。

（1）管理什么？

Vuex我们必须要用到的就是mutations.js，mutations就是“变化”，也就是说，我们主要管理的就是状态的变化，换句话说，当我们想让状态发生变化时，我们可以使用Vuex，另一方面，由于Vue本身是基于MVVM模型的，所以，与我们以往操作DOM来达到改变状态的目的不同，使用Vuex可以直接操纵数据本身，从而提高了数据处理的高效性，可以说，Vuex是大型单页项目数据管理的最佳实践。

（2）如何管理？

前段提到，我们必须要使用mutations.js，在创建mutations.js之前，我们需要先创建一个mutation-types.js，这个文件类似于java编程中的interface，talk is cheap, show you the code.

// 增加总时间
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME';

我们定义了一条增加总时间的方法，但是具体怎么增加我们还没写，这里我们只是定义。

在mutations.js里我们写上“接口实现的类”。

import * as types from './mutation-types'

export default {
[types.ADD_TOTAL_TIME] (state, time) {
state.totalTime = state.totalTime + ~~time
}
}；

前文提到过，import方法是ES6当中的内容，这句话的意思是把mutation-types导出的所有文件导入进来并给它起了一个别名types，然后对types里“增加总时间”的方法添加具体内容。

注：~~符号可以将后置内容转化为数字格式。

state和time是形参，这两个不用管它，totalTime是在index.js里定义的。

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
totalTime: 0,
list: []
};

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

在index.js里我们需要导入Vue Vuex mutations actions的所有内容，然后使用方法Vue.use(Vuex)

然后定义我们需要的数据类型totalTime，最后创建一个新实例Store，并把state、mutations和actions导出去。

至此，我们一个简单的状态修改器就完成了。

（3）Actions？

可能有细心的朋友发现我们在上文中提到的最后一段代码导入（导出）了Actions，但我们并没有讲到啊，因为我们创建的是一个“增加总时间”的简单方法，如此简单的方法只需要mutations就够了，那么Actions有什么用呢？借此，我引用官方文档中的一段文字。

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你能调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务：

是的，mutations是同步的，制作一个简单的方法或者小型单页项目mutations就足够，但当你制作大型单页项目时你就不得不需要Actions，这也是Vuex的优势所在， talk is cheap, show you the code.

//actions.js
import * as types from './mutation-types'

export default {
addTotalTime({ commit }, time) {
commit(types.ADD_TOTAL_TIME, time)
}
}；

Action方法通过

store.dispatch

方法触发

this.$store.dispatch('addTotalTime', alreadyReadTimer)

OK没有问题，写到这里我们可以简单做一个总结，Vuex的使用方法主要分为3步：

一、创建mutation-types“接口”。并

二、创建同步状态处理方法mutations，创建异步状态处理方法actions，

三、在index.js里实例化Vuex并导入导出上述两个方法。

转载于:https://my.oschina.net/u/2414359/blog/873262

点赞
收藏
分享
文章举报

chunhuajun5567 发布了0 篇原创文章 · 获赞 0 · 访问量 71 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航