学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1、Vue-cli
Vue-cli是vue官方出品的快速构建单页应用的脚手架,这里牵扯的东西很多,有webpack,npm,nodejs,babel等等。
官网:https://cli.vuejs.org/guide/
GitHub:https://github.com/vuejs/vue-cli
1.1、安装vue-cli
首先要安装 npm , npm 的安装在基础视频中有。npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令:
npm install -g @vue/cli //卸载 npm uninstall -g @vue/cli
- -g :代表全局安装。如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装。安装完成后,可以用vue
- -V :来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是3.4.1
PS G:DemosVUEVUECLI> vue --version 3.4.1
如果vue -V的命令管用了,说明已经顺利的把vue-cli安装到我们的计算机里了。
如果想使用2.X版本的命令来创建项目,则可以执行以下命令
npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
1.2、初始化项目
我们用 vue init 命令来初始化项目,具体看一下这条命令的使用方法。
vue init <template-name> <project-name>
init :表示我要用vue-cli来初始化项目
<template-name> :表示模板名称,vue-cli官方为我们提供了5种模板
<project-name> :标识项目名称,这个你可以根据自己的项目来起名字。
-
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
-
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
-
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
-
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
- simple-一个最简单的单页应用模板。
在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:
vue init webpack vuecliTest
输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
- Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
- Author:作者,如果你有配置git的作者,他会读取。
- Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。
这里我们创建一个名为vuecliTest的项目
命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。
cd vuecliTest 进入我们的vue项目目录。
npm install 安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。
npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。
这时候我们运行我们创建的 vuecliTest 项目
我们可以通过 http://localhost:8080/ 或者 http://192.168.56.1:8080/ 访问我们的创建的项目
1.3、Vue-cli项目结构讲解
vue-cli脚手架工具就是为我们搭建了开发所需要的环境,为我们省去了很多精力。有必要对这个环境进行熟悉,我们就从项目的结构讲起。
//Ps:由于版本实时更新和你选择安装的不同(这里列出的是模板为webpack的目录结构),所以你看到的有可能和下边的有所差别。 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- node_modules // 项目开用到的包(可忽略) |-- src // 源码目录 | |-- components // vue公共组件 | |-- store // vuex的状态管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件,加载各种公共组件 |-- static // 静态文件,比如一些图片,json数据等 | |-- data // 群聊分析得到的数据用于数据可视化 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 |-- README.md // 项目说明 |-- favicon.ico |-- index.html // 入口页面 |-- package.json // 项目基本信息 .
1.3.1、重要文件讲解
- package.json:package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息(如项目名称、版本、描述、作者等)。
package.json 里的scripts字段,这个字段定义了你可以用npm运行的命令。在开发环境下,在命令行工具中运行npm run dev 就相当于执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },
- dependencies字段和devDependencies字段
- dependencies字段指项目运行时所依赖的模块;
- devDependencies字段指定了项目开发时所依赖的模块;
在命令行中运行npm install命令,会自动安装dependencies和devDempendencies字段中的模块。
package.json还有很多相关配置,如果你想全面了解,可以专门去百度学习一下。
1.3.2、webpack配置相关
我们在上面说了运行 npm run dev 就相当于执行了 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js ,说明这个文件相当重要,先来熟悉一下它。 我贴出代码并给出重要的解释。
// 检查 Node 和 npm 版本 require('./check-versions')() // 获取 config/index.js 的默认配置 var config = require('../config') // 如果 Node 的环境无法判断当前是 dev / product 环境 // 使用 config.dev.env.NODE_ENV 作为当前的环境 if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) // 使用 NodeJS 自带的文件路径工具 var path = require('path') // 使用 express var express = require('express') // 使用 webpack var webpack = require('webpack') // 一个可以强制打开浏览器并跳转到指定 url 的插件 var opn = require('opn') // 使用 proxyTable var proxyMiddleware = require('http-proxy-middleware') // 使用 dev 环境的 webpack 配置 var webpackConfig = require('./webpack.dev.conf') // default port where dev server listens for incoming traffic // 如果没有指定运行端口,使用 config.dev.port 作为运行端口 var port = process.env.PORT || config.dev.port // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置 var proxyTable = config.dev.proxyTable // 使用 express 启动一个服务 var app = express() // 启动 webpack 进行编译 var compiler = webpack(webpackConfig) // 启动 webpack-dev-middleware,将 编译后的文件暂存到内存中 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, stats: { colors: true, chunks: false } }) // 启动 webpack-hot-middleware,也就是我们常说的 Hot-reload var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // proxy api requests // 将 proxyTable 中的请求配置挂在到启动的 express 服务上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(context, options)) }) // handle fallback for HTML5 history API // 使用 connect-history-api-fallback 匹配资源,如果不匹配就可以重定向到指定地址 app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 将 Hot-reload 挂在到 express 服务上 app.use(hotMiddleware) // serve pure static assets // 拼接 static 文件夹的静态资源路径 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 为静态资源提供响应服务 app.use(staticPath, express.static('./static')) // 让我们这个 express 服务监听 port 的请求,并且将此服务作为 dev-server.js 的接口暴露 module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } var uri = 'http://localhost:' + port console.log('Listening at ' + uri + ' ') // when env is testing, don't need open it // 如果不是测试环境,自动打开浏览器并跳到我们的开发地址 if (process.env.NODE_ENV !== 'testing') { opn(uri) } })
webpack.base.confg.js webpack的基础配置文件
... ... module.export = { // 编译入口文件 entry: {}, // 编译输出路径 output: {}, // 一些解决方案配置 resolve: {}, resolveLoader: {}, module: { // 各种不同类型文件加载器配置 loaders: { ... ... // js文件用babel转码 { test: /.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要转码 exclude: /node_modules/ }, ... ... } }, // vue文件一些相关配置 vue: {} }
1.3.3、.babelrc
Babel解释器的配置文件,存放在根目录下。Babel是一个转码器,项目里需要用它将ES6代码转为ES5代码。如果你想了解更多,可以查看babel的知识。
{ //设定转码规则 "presets": [ ["env", { "modules": false }], "stage-2" ], //转码用的插件 "plugins": ["transform-runtime"], "comments": false, //对BABEL_ENV或者NODE_ENV指定的不同的环境变量,进行不同的编译操作 "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }
1.3.4、.editorconfig
该文件定义项目的编码规范,编译器的行为会与.editorconfig文件中定义的一致,并且其优先级比编译器自身的设置要高,这在多人合作开发项目时十分有用而且必要。
root = true [*] // 对所有文件应用下面的规则 charset = utf-8 // 编码规则用utf-8 indent_style = space // 缩进用空格 indent_size = 2 // 缩进数量为2个空格 end_of_line = lf // 换行符格式 insert_final_newline = true // 是否在文件的最后插入一个空行 trim_trailing_whitespace = true // 是否删除行尾的空格
这是比较重要的关于vue-cli的配置文件,当然还有很多文件,我们会在以后的文章中讲解。
1.4解读Vue-cli的模板
我们主要了解一下Vue-cli的模板操作,包括增加模板,修改模板,以及一个常规模板的基本结构。
1.4.1npm run build 命令
有小伙伴问我,如何把写好的Vue网页放到服务器上,那我就在这里讲解一下,主要的命令就是要用到 npm run build 命令。我们在命令行中输入 npm run build 命令后,vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出,你执行的npm run build命令就相对执行的 node build/build.js
package.json的scripts 字段:
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },
在执行完 npm run build 命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。
npm run build //如果遇到以下错误npm: 6.5.0-next.0 should be >= 3.0.0,执行npm更新指令即可 npm install npm@latest -g
dist文件夹下目录包括:
- index.html 主页文件:因为我们开发的是单页web应用,所以说一般只有一个html文件。
- static 静态资源文件夹:里边js、CSS和一些图片。
1.4.2、main.js文件解读
main.js是整个项目的入口文件,在src文件夹下:
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //生产环境提示,这里设置成了false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
通过代码可以看出这里引进了App的组件和的模板,它是通过 import App from './App' 这句代码引入的。 我们找到 App.vue 文件,打开查看。
1.4.3、App.vue文件
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
app.vue文件我们可以分成三部分解读,
- <template></template> 标签包裹的内容:这是模板的HTMLDom结构,里边引入了一张图片和 <router-view></router-view> 标签,
<router-view>
标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。 - <script></script> 标签包括的js内容:你可以在这里些一些页面的动态效果和Vue的逻辑代码。
- <style></style> 标签包裹的css内容:这里就是你平时写的CSS样式,对页面样子进行装饰用的,需要特别说明的是你可以用
<style scoped></style>
来声明这些css样式只在本模板中起作用。
1.4.5、router/index.js 路由文件
引文在app.vue中我们看到了路由文件,虽然router的内容比较多,但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
我们可以看到import HelloWorld from '@/components/HelloWorld'这句话, 文件引入了/components/HelloWorld.vue文件。这个文件里就配置了一个路由,就是当我们访问网站时给我们显示HelloWorld.vue的内容。
1.4.6、HelloWorld.vue文件解读
这个文件就是我们在第一节课看到的页面文件了。也是分为<template><script><style>
三个部分,以后我们大部分的工作都是写这些.vue结尾的文件。现在我们可以试着改一些内容,然后预览一下。
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" > Forum </a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" > Community Chat </a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" > Twitter </a> </li> <br> <li> <a href="http://vuejs-templates.github.io/webpack/" target="_blank" > Docs for This Template </a> </li> </ul> <h2>Ecosystem</h2> <ul> <li> <a href="http://router.vuejs.org/" target="_blank" > vue-router </a> </li> <li> <a href="http://vuex.vuejs.org/" target="_blank" > vuex </a> </li> <li> <a href="http://vue-loader.vuejs.org/" target="_blank" > vue-loader </a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to My Blog ,I am 进击的辣条' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a {
color: #42b983; } </style>
总结: 这个教程只是带着你大概浏览和重点讲解了vue-cli的知识,如果你想完全弄明白vue-cli,我建议最好是有调理的阅读所有代码,这对你以后成为vue实际项目 的开发很有帮助。如果你是一个初学者,了解这些已经足够向下学习了。这篇教程结束后,我们会学习vue-router的知识,vue-router是一个重点学习任务。
2、Vue-router
简介: 由于Vue在开发时对路由支持的不足,后来官方补充了vue-router
插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router
。要学习vue-router
就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router
就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑,为什么我们不能像原来一样直接用<a></a>
标签编写链接哪?因为我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>
标签是不起作用的,你必须使用vue-router
来进行管理。
2.1、Vue-router入门
2.1.1、安装vue-router
vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
如果你安装很慢,也可以用cnpm进行安装,如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。
2.1.2、解读router/index.js文件
我们用vue-cli生产了我们的项目结构,你可以在 src/router/index.js 文件,这个文件就是路由的核心文件
import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由,这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'HelloWorld', //路由名称, component: HelloWorld //对应的组件模板 } ] })
上边的代码中已经对每行都进行了注释,其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示HelloWorld.vue里边的内容代码。
2.1.3、增加一个Hi的路由和页面
对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面,先来看一下我们希望得到的效果。
- 在src/components目录下,新建 Hi.vue 文件。w
- 编写文件内容,和我们之前讲过的一样,文件要包括三个部分
<template><script>
和<style>
。文件很简单,只是打印一句话。
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hi', data () { return { msg: 'Hi, I am 进击的辣条' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
- 引入 Hi组件:我们在router/index.js文件的上边引入Hi组件
import Hi from '@/components/Hi'
- 增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。
{ path: '/hi', name: 'Hi', component: Hi }
通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看,贴出现在的路由配置文件:
View Code
2.1.4、router-link制作导航
现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要标签,我们先来看一下它的语法。
<router-link to="/">[显示字段]</router-link>
- to:是我们的导航路径,要填写的是你在
router/index.js
文件里配置的path值,如果要导航到默认首页,只需要写成to=”/”
, - [显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页。
明白了router-link的基本语法,我们在 src/App.vue文件中的template里加入下面代码,实现导航。
<div> <router-link to="/">首页</router-link>| <router-link to="/hi">Hi页面</router-link> </div>
现在我们访问页面,发现已经多出了导航。
总结:这节课我们在vue-cli的构建下对vue-router
有了一个基本的了解,学会了vue-router
的核心文件的基本结构,学会了如何添加一个新的模板页面,还学会了用<router-link>
标签设置导航。
2.2、vue-router配置子路由
我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。
2.2.1、改造App.vue的导航代码
我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用标签增加了两个新的导航链接。
App.vue代码
<div> <router-link to="/">首页</router-link>| <router-link to="/hi">Hi页面</router-link>| <router-link to="/hi/hi1">Hi1页面</router-link>| <router-link to="/hi/hi2">Hi2页面</router-link> </div>
这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1 和 Hi页面2
2.2.2、改写components/Hi.vue页面
把Hi.vue改成一个通用的模板,加入<router-view>
标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点像继承关系。我们在“Hi页面”里加入<router-view>
标签。
components/Hi.vue,就是第5行的代码,其他代码不变。
<template> <div class="hello"> <h1>{{ msg }}</h1> <router-view></router-view> </div> </template> <script> export default { name: "hi", data() { return { msg: "Hi, I am Hi page." }; } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
2.2.3、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。
Hi1.vue

Hi2.vue

2.2.4、修改router/index.js代码
我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。
children: [ { path: '/', name: 'hi', component: Hi }, { path: 'hi1', name: 'hi1', component: Hi1 }, { path: 'hi2', name: 'hi2', component: Hi2 } ]
children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。
import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件 import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由,这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'HelloWorld', //路由名称, component: HelloWorld //对应的组件模板 }, { path: '/hi', name: 'Hi', component: Hi, children: [ { path: '/', name: 'hi', component: Hi }, { path: 'hi1', name: 'hi1', component: Hi1 }, { path: 'hi2', name: 'hi2', component: Hi2 } ] } ] })
需要注意的是,在配置路由文件前,需要先用import
引入Hi1和Hi2。
总结: 这节的内容在路由配置里经常用到,比如我们作一个购物模块,购物模块里有很多相同的元素,我们就会利用这种子路由的形式,先定一个父页面,然后再修改子页面。希望这节课对你有帮助,其实子路由的步骤还是有些繁琐的,所以希望你们多练习几遍,能够完全掌握。
2.1、vue-router如何参数传递
开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router
为我们提供了那些传递参数的功能。我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航)。
2.1.1、用name
传递参数
前两节课一直出现name的选项,但是我们都没有讲,这节课我们讲name的一种作用,传递参数。接着上节课的程序继续编写。
两步完成用name传值并显示在模板里:
- 在路由文件 src/router/index.js 里配置name属性。
routes: [ //配置路由,这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'HelloWorld', //路由名称, component: HelloWorld //对应的组件模板 }]
- 模板里
(src/App.vue)
用 $route.name 的形势接收,比如直接在模板中显示:
<p>{{$route.name}}</p>
2.1.2、通过 标签中的to传参
也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成 :to 。
先来看一下这种传参方法的基本语法:
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name
:就是我们在路由配置文件中起的name值。params
:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
了解基本的语法后,我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。
<router-link :to="{name:'hi1',params:{username:'进击的辣条'}}">Hi1页面</router-link>|
把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.
{ path: 'hi1', name: 'hi1', component: Hi1 },
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
{{$route.params.username}}
总结: 今天我们学习了两种传参的方法,一般会使用第二种方法。我们通过学习也知道了name的用途,一种作用是传参,一种作用是在传参时起到名称作用。
2.2、单页面多路由区域操作
实际需求是这样的,在一个页面里我们有2个以上<router-view>
区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>
标签。我们用vue-cli
建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>
下面新写了两行<router-view>
标签,并加入了些CSS样式。
<router-view name="left" style="float:left;50%;height:300px;"></router-view> <router-view name="right" style="float:right;50%;height:300px;"></router-view>
现在的页面中有了三个标签,也就是说我们需要在路由里配置这三个区域,配置主要是在components字段里进行。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', components: { default:HelloWorld, left:Hi1, right:Hi2 } }, { path: '/Hi', name: 'HelloWorld', components: { default:HelloWorld, left:Hi2, right:Hi1 } } ] })
上边的代码我们编写了两个路径,一个是默认的‘/’
,另一个是’/Hi’
.在两个路径下的components
里面,我们对三个区域都定义了显示内容。 定义好后,我们需要在component文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。
Hi1.vue

Hi2.vue

最后在App.vue中配置我们的就可以了
<router-link to="/">首页</router-link> | <router-link to="/hi">Hi页面</router-link> |
2.3、vue-router 利用url传递参数
我们之前已经学会传递参数,但是我们这些老程序员的情怀还是利用url来传值,因为我们以前在前后端没有分开开发的时候,经常这样做。在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。
2.3.1、:冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。 -. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
{ path: '/params/:newsId/:newsTitle', name: 'Params', component:Params }
我们需要传递参数是新闻ID(newsId)
和新闻标题(newsTitle
).所以我们在路由配置文件里制定了这两个值。
- 在
src/components
目录下建立我们params.vue
组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
<template> <div> <h2>{{msg}}</h2> <p>新闻ID:{{$route.params.newsId}}</p> <p>新闻标题:{{$route.params.newsTitle}}</p> </div> </template> <script> export default { data() { return { msg: "params pages" }; } }; </script>
- 在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。
<router-link to="/params/aaa/bbb">Params</router-link>
我们已经实现了以url方式进行传值,这在实际开发中经常使用,必须完全了解。
2.3.2、正则表达式在URL传值中的应用
上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。
加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。
path:'/params/:newsId(\d+)/:newsTitle',
加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到。
2.4、vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
2.4.1、redirect基本重定向
我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' import Params from '@/components/Params' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/params/:newsId(\d+)/:newsTitle', name: 'Params', component: Params }, { path: '/goHome', redirect: '/' } ] })
这里我们设置了goHome路由,但是它并没有配置任何component(组件),而是直接redirect到path:’/’下了,这就是一个简单的重新定向。
2.4.2、重定向时传递参数
我们已经学会了通过url来传递参数,那我们重定向时如果也需要传递参数怎么办?其实vue也已经为我们设置好了,我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕,我们来看一段代码:
{ path:'/params/:newsId(\d+)/:newsTitle', component:Params },{ path:'/goParams/:newsId(\d+)/:newsTitle', redirect:'/params/:newsId(\d+)/:newsTitle' }
已经有了一个params路由配置,我们在设置一个goParams
的路由重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue
组件了。参数接收方法和正常的路由接收方法一样。
2.5、alias别名的使用
上节学习了路由的重定向,我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式,我们也可以实现类似重定向的效果。
- 首先我们在路由配置文件里
(/src/router/index.js)
,给上节课的Home路径起一个别名,aliasHi1。
{ path: '/hi1', name: 'hi1', component: Hi1, alias:'/aliasHi1' }
- 配置我们的,起过别名之后,可以直接使用
<router-link>
标签里的to属性,进行重新定向。
<router-link to="/aliasHi1">aliasHi1</router-link>
2.5.1、redirect和alias的区别
- redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
- alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了
<router-view>
中的内容。
2.6、路由的过渡动画
在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。
2.6.1、<transition>
标签
想让路由有过渡动画,需要在<router-view>
标签的外部添加 <transition> 标签,标签还需要一个name
属性。
<transition name="fade"> <router-view/> </transition>
我们在/src/App.vue文件里添加了<transition>
标签,并给标签起了一个名字叫fade
。
2.6.2、css过渡类名
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:
- fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
- fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
- fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
- fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
那我们就在App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果。代码如下:
.fade-enter { opacity:0; } .fade-leave{ opacity:1; } .fade-enter-active{ transition:opacity .5s; } .fade-leave-active{ opacity:0; transition:opacity .5s; }
上边的代码设置了改变透明度的动画过渡效果,但是默认的mode
模式in-out
模式,这并不是我们想要的。下面我们学一下mode
模式。
2.6.3、过渡模式mode
in-ou
t:新元素先进入过渡,完成之后当前元素过渡离开。out-in
:当前元素先进行过渡离开,离开完成后新元素过渡进入。
这节课只能算是一个简单的过渡入门,教会大家原理,如果想做出实用酷炫的过渡效果,你需要有较强的动画制作能力,我们下节课继续学习动画的知识。
2.7、mode的设置和404页面的处理
在学习过渡效果的时候,我们学了mode的设置,但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。
2.7.1、mode的两个值
-
histroy :当你使用
history
模式时,URL 就像正常的 url,例如 http://localhost:8080/params/100/bbb,也好看! -
hash :默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。
2.7.2、404页面的设置
用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.
- 设置我们的路由配置文件(
/src/router/index.js
):
//... import Error from '@/components/Error' //... { path: '*', component: Error },
path:’*’
就是找不到页面时的配置,componen
t是我们新建的一个Error.vue
的文件。 - 新建404页面
在/src/components/
文件夹下新建一个Error.vue
的文件。简单输入一些有关错误页面的内容。
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { data() { return { msg: "Error:404" }; } }; </script>
- 我们在用
<router-link>
瞎写一个标签的路径。
<router-link to="/bbbbbb">我是瞎写的</router-link>
预览一下我们现在的结果,就已经实现404页面的效果。
2.8、路由中的钩子
我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。
2.8.1、路由配置文件中的钩子函数
我们可以直接在路由配置文件(/src/router/index.js)
中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码
{ path: '/params/:newsId(\d+)/:newsTitle', name: 'Params', component: Params, beforeEnter:(to,from,next)=>{ console.log('我进入了params模板'); console.log(to); console.log(from); next(); } },
我们在params路由里配置了bdforeEnter得钩子函数,函数我们采用了ES6的箭头函数,需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。
三个参数:
to
:路由将要跳转的路径信息,信息是包含在对像里边的。from
:路径跳转前的路径信息,也是一个对象的形式。next
:路由的控制参数,常用的有next(true)和next(false)。
2.8.2、写在模板中的钩子函数
在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:
- beforeRouteEnter:在路由进入前的钩子函数。
- beforeRouteLeave:在路由离开前的钩子函数。
export default { data() { return { msg: "params pages" }; }, beforeRouteEnter(to, from, next) { console.log("准备进入路由模板"); next(); }, beforeRouteLeave(to, from, next) { console.log("准备离开路由模板"); next(); } };
这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开,也可以轻易的读出to和from的值。
2.9、编程式导航
这是这篇文章的最后一节,前10节课的导航都是用<router-link>
标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?这就是我们要说的编程式导航,顾名思义,就是在业务逻辑代码中实现导航。
router.go(-1) 代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。
- 我们先在
app.vue
文件里加入一个按钮,按钮并绑定一个goback( )
方法。
<button @click="goback">后退</button>
- 在我们的script模块中写入goback()方法,并使用this.$router.go(-1),进行后退操作。
<script> export default { name: "App", methods: { goBack() { this.$router.go(-1); } } }; </script>
打开浏览器进行预览,这时我们的后退按钮就可以向以前的网页一样后退了。
router.go(1) :代表着前进,用法和后退一样,我在这里就不重复码字了(码字辛苦希望大家理解)。
this.$router.push(‘/xxx ‘) 这个编程式导航都作用就是跳转,比如我们判断用户名和密码正确时,需要跳转到用户中心页面或者首页,都用到这个编程的方法来操作路由。
我们设置一个按钮,点击按钮后回到站点首页。
- 先编写一个按钮,在按钮上绑定
goHome( )
方法。
<button @click="goHome">回到首页</button>
- 在
<script
>模块里加入goHome
方法,并用this.$router.push(‘/’)
导航到首页
<script> export default { name: "App", methods: { goBack() { this.$router.go(-1); }, goHome() { this.$router.push("/"); } } }; </script>
3、vuwx
vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。比如:我们有几个页面要显示用户名称和用户等级,或者显示用户的地理位置。如果我们不把这些属性设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示。在中大型项目中会有很多共用的数据,所以尤大神给我们提供了vuex。
3.1、vuex小Demo
3.1.1、引入vuex
- 先使用vuecli创建项目,然后利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了
npm n install vuex --save
需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。
- 新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。
import Vue from 'vue'; import Vuex from 'vuex';
- 使用我们vuex,引入之后用Vue.use进行引用。
Vue.use(Vuex);
通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。
3.1.2、入门小Demo
我们这个小案例先声明一个state的count状态,在页面中使用显示这个count
,然后可以利用按钮进行加减,如果你看过我的文章,你一定知道,在我们学基础知识 的时候经常编写这个程序。
- 现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。
const state={ count:1 }
- 用export default 封装代码,让外部可以引用。
export default new Vuex.Store({ state })
-
新建一个vue的模板,位置在components文件夹下,名字叫
count.vue
。在模板中我们引入我们刚建的store.js文件,并在模板中用{{$store.state.count}}输出count 的值。<template> <div> <h2>{{ msg }}</h2> <hr> <h3>{{$store.state.count}}</h3> <div> <button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button> </div> </div> </template> <script> import store from '@/vuex/store' export default { data () { return { msg: 'Hello Vuex' } }, store } </script>
- 在store.js文件中加入两个改变state的方法。
const mutations={ add(state){ state.count++; }, reduce(state){ state.count--; } }
这里的mutations是固定的写法,意思是改变的,我们到时候会用一节课专门讲这个mutations,所以你先不用着急,只知道我们要改变state的数值的方法,必须写在mutations里就可以了。
- 在count.vue模板中加入两个按钮,并调用mutations中的方法。
<div> <button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button> </div>
这样进行预览就可以实现对vuex中的count进行加减了。
3.2、state访问状态对象
在第1节我们已经写了一个 const state ,这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。今天我们主要学习状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。我们有三种赋值方式,我们一个一个来学习一下。
3.2.1、通过computed的计算属性直接赋值
computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。
computed:{ count(){ return this.$store.state.count; } }
这里需要注意的是return this.$store.state.count这一句,一定要写this,要不你会找不到$store的。这种写法很好理解,但是写起来是比较麻烦的,那我们来看看第二种写法。
3.2.2、通过mapState的对象来赋值
我们首先要用import引入mapState。
import {mapState} from 'vuex';
然后还在computed计算属性里写如下代码:
computed:mapState({ count:state=>state.count })
这里我们使用ES6的箭头函数来给count赋值。
3.2.3、通过mapState的数组来赋值
computed:mapState(["count"])
这个算是最简单的写法了,在实际项目开发当中也经常这样使用。
3.3、Mutations修改状态
上节我们学习了怎么样读取state,那我们接下来学习一下怎么样修改状态。这个常量我们在第一节课的时候也碰到过,并且进行了加减的操作。那这节课我们就具体学习一下,如何操作Mutations。
3.3.1、$store.commit( )
Vuex提供了commit
方法来修改状态,我们粘贴出第一节课的代码内容,简单回顾一下,我们在button
上的修改方法。
<button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button>
store.js文件:
const mutations={ add(state){ state.count++; }, reduce(state){ state.count--; } }
3.3.2、传值
这只是一个最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations
里再加上一个参数,并在commit
的时候传递就就可以了。我们来看具体代码:
现在store.js
文件里给add
方法加上一个参数n。
const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count--; } }
在Count.vue里修改按钮的commit( )
方法传递的参数,我们传递10,意思就是每次加10.
<p> <button @click="$store.commit('add',10)">+</button> <button @click="$store.commit('reduce')">-</button> </p>
这样两个简单的修改我们就完成了传值,我们可以在浏览器中实验一下了。
3.3.3、模板获取Mutations方法
实际开发中我们也不喜欢看到$store.commit( )
这样的方法出现,我们希望跟调用模板里的方法一样调用。
例如:@click=”reduce”
就和没引用vuex
插件一样。
要达到这种写法,只需要简单的两部就可以了:
- 在模板count.vue里用import 引入我们的mapMutations:
import {mapState,mapMutations} from 'vuex';
- 在模板的
<script>
标签里添加methods属性,并加入mapMutations
methods:mapMutations(['add','reduce'])
通过上边两部,我们已经可以在模板中直接使用我们的reduce或者add方法了,就像下面这样。
<button @click="reduce">-</button>
3.4、getters计算过滤操作
getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
3.4.1、getters基本用法
比如我们现在要对store.js文件中的count进行一个计算属性的操作,就是在它输出前,给它加上100.
我们首先要在store.js
里用const声明我们的getters属性。
const getters = { count:function(state){ return state.count +=100; } }
写好了gettters之后,我们还需要在Vuex.Store()
里引入,由于之前我们已经引入了state
盒mutations
,所以引入里有三个引入属性。代码如下,
export default new Vuex.Store({ state,mutations,getters })
在store.js里的配置算是完成了,我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。.
computed:{ ...mapState(["count"]), count(){ return this.$store.getters.count; } },
需要注意的是,你写了这个配置后,在每次count 的值发生变化的时候,都会进行加100的操作。
3.4.2、用mapGetters简化模板写法.
我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化,我们的getters也是有的,我们来看一下代码。
首先用import引入我们的`mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex';
在computed属性中加入mapGetters
computed:{ ...mapState(["count"]), // count(){ // return this.$store.getters.count; // } ...mapGetters(["count"]) }, methods:mapMutations(['add','reduce'])
3.5、actions异步修改状态
actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了,如果你不懂自己去百度查一下吧。
3.5.1、在store.js中声明actions
actions是可以调用Mutations里的方法的,我们还是继续在上节课的代码基础上进行学习,在actions里调用add和reduce两个方法。
const actions ={ addAction(context){ context.commit('add',10) }, reduceAction({commit}){ commit('reduce') } }
在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。
context
:上下文对象,这里你可以理解称store本身。{commit}
:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
3.5.2、模板中的使用
我们需要在count.vue模板中编写代码,让actions生效。我们先复制两个以前有的按钮,并改成我们的actions里的方法名,分别是:addAction和reduceAction。
<p> <button @click="addAction">+</button> <button @click="reduceAction">-</button> </p>
改造一下我们的methods方法,首先还是用扩展运算符把mapMutations和mapActions加入。
methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['addAction','reduceAction']) },
你还要记得用import把我们的mapActions引入才可以使用。
import {mapState,mapMutations,getters, mapGetters, mapActions} from 'vuex';
3.5.3、增加异步检验
我们现在看的效果和我们用Mutations作的一模一样,肯定有的小伙伴会好奇,那actions有什么用,我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。
const actions={ addAction(context){ context.commit('add',10); setTimeout(()=>{context.commit('reduce')},2000); console.log("我比reduce先执行了"); }, reduceAction(commit){ commit('reduce') } }
我们可以看到在控制台先打印出了‘我比reduce提前执行’这句话。
3.6、module模块组
随着项目的复杂性增加,我们共享的状态越来越多,这时候我们就需要把我们状态的各种操作进行一个分组,分组后再进行按组编写。那今天我们就学习一下module:状态管理器的模块组操作。
3.6.1、声明模块组
在vuex/store.js中声明模块组,我们还是用我们的const常量的方法声明模块组。代码如下:
const moduleA={ state,mutations,getters,actions }
声明好后,我们需要修改原来 Vuex.Stroe里的值:
export default new Vuex.Store({ modules:{a:moduleA} })
3.6.2、在模板中使用
现在我们要在模板中使用count状态,要用插值的形式写入。
<h3>{{$store.state.a.count}}</h3>
如果想用简单的方法引入,还是要在我们的计算属性中rutrun我们的状态。写法如下:
computed:{ count(){ return this.$store.state.a.count; } },
【LeetCode】198. House Robber
【LeetCode】053. Maximum Subarray
【LeetCode】152. Maximum Product Subarray
【LeetCode】238.Product of Array Except Self
【LeetCode】042 Trapping Rain Water
【LeetCode】011 Container With Most Water
【LeetCode】004. Median of Two Sorted Arrays
【LeetCode】454 4Sum II
【LeetCode】259 3Sum Smaller