vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识
一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也有一些很不顺手的地方,没有react的灵活度,但却有ng的方便性。要说vue和react哪个更适合做移动端,其实没有绝对的答案,喜欢就好。我希望能通过这篇文章能让大家迅速上手vue的全家桶。
本文的例子源码托管在github上,地址是https://github.com/tianxiangbing/vue-demo
首先,我们用vue-cli搭一个vue的开发环境,目前vue-cli3.0也出来了,但使用者不多,中文文档也较少,更多配置都是vue.config.js里,这里配置是返回一个module,也是修改webpack的配置项,但其实还是很麻烦,这个不在本文主题内,省过...
1. 服务的搭建
安装vue-cli,建议安装2.x的版本,本文使用的是vue-cli3.0
npm install -g vue-cli
创建一个vue的项目,项目名称叫vue-demo
vue create vue-demo
然后进入项目目录下执行安装依赖包
npm i
然后启动服务,执行命令 npm run serve ,你应该可以看到如下的结果:
看到这里,就算成功了,在浏览器中打开http://localhost:8080/ ,就可以看到vue整个页面了,并且已经是热部署了,可以实时编译更新了。
2. vue-router路由
vue的基础知识可以直接参考https://cn.vuejs.org/v2/guide/ ,基本上跟react没有什么共通性,也跟ng不同,如果说一定要更像谁一点的话,应该是更像ng一些。知识点很多, 磨刀不误杀人功,所以建议先读官方教程,如果不想看教程,也没关系,其实用的时候再看也一样^_^
先安装vue-router依赖
npm install --save vue-router
然后修改main.js文件,引入vue-router,在这里提一点,官方的例子基本上是引入外部js文件的方式,所以跟实际开发还是有一点点的区别,实际开发中,都是以多模块的方式引用组件,所以我们尽量以简单又实用的方式来使用。
import VueRouter from "vue-router";
import Home from './pages/Home';
import Hello from './pages/Hello';
import User from './pages/User';
我在这里引用了vue-router,并且在pages里创建了三个组件页面。页面的代码类似于下面:
<template>
<div>
我是hello的页面.
</div>
</template> <script>
export default {
name: 'Hello'
}
</script>
然后在main.js里配置路由地址,并且在vue的实例化中使用它。
let router = new VueRouter({
mode: "history",//默认是hash方式
routes: [
{
path: '/',
component: Home
},
{
path: '/hello',
component: Hello
},
{ path: '/user/:id', component: User },
{ path: '/vuex', component: Vuex1 }
]
});
new Vue({
router, //es6写法,相当于router:router
render: h => h(App)
}).$mount('#app')
恩,这里顺便演示了如何带参数:id的方式,这与其他框架一样,获取参数的方式是: $route.params.id ,更多的配置可以参考vue-router官方文档,本文只讲最基础的入门知识。运行起来,效果大概是这样的
好了,vue-router我们就算会了。完美~
接着我们要讲vue全家桶里最复杂也是最重要的一环,vuex
3. vuex的使用
vuex这个东西是个啥呢,其实用过redux或flux的都知道,就是个单向数据流,嗯....,就是个观察者模式,嗯....,就是事件分发,嗯....其实说得这么悬忽,就是为了提高它的逼格,用正常来说,他就是个全局的数据对象,然后你需要通过action来修改它,然后它的改动会派发到所有影响的组件。这样就可以兄弟叔侄组件通信了。
安装vuex依赖
npm install --save vuex
然后我们如官方例子一样做个点击加数的demo。
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment(state) {
state.count++
}
,minus(state){
state.count--;
}
},
actions:{
increment(context){
context.commit('increment')
},
minusAsync({commit}){//es6简单写法
setTimeout(()=>{
commit('minus')
},)
}
}
});
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
这么一长段的代码,怎么理解呢,state就是存储状态的,mutations这个就类似于redux的reducer,就是实际操作state的方法,另外我们需要通过action来提交这个mutations,方法就是commit,我们还记得redux里还有个actionType,这里我直接写的字符串。注意,在这里我用了一个setTimeout来测试延时的操作。
然后我们在需要使用到vuex的地方这样调用
import { mapActions } from 'vuex'
export default {
computed: {
count () {
return this.$store.state.count
}
},
methods:{
add(){
// this.$store.dispatch('increment');
this.increment();
},
minus(){
this.$store.dispatch('minusAsync');
},
...mapActions(['increment'])
}
}
首先第一行引入的mapActions是帮助把action代理到当前this下面的一种捷径, this.$store.dispatch('increment'); 简写成了 this.increment(); 通过这样定义后,我们把methods绑定到相应的按钮事件里,整个计数器的功能就算开发完了
<div>
计数器:
{{count}}
<button v-on:click="add">点+</button>
<button v-on:click="minus">点-</button>
</div>
这样看来,确实比react-redux上手更快了,只要我们再划分下模块,就可以立马开发一个vue+vue-router+vuex的应用了。
本文的例子源码托管在github上,地址是https://github.com/tianxiangbing/vue-demo 如果有任何的疑问或问题可以提出来,大家都是成年人,有什么不能说呢~
vue.js和vue-router和vuex快速上手知识的更多相关文章
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Vue.js 系列教程 4:Vuex
这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- Vue.js——60分钟browserify项目模板快速入门
概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- Vue.js——60分钟browserify项目模板快速入门
概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- 学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
随机推荐
- 026.2 网络编程 UDP聊天
实现,通过socket对象 ##############################################################需求建立UDP发送端:###思路:1.建立可以实 ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- node(一)安装nodejs最新版到debian,ubuntu,mint系统
从官网得到,测试可以使用,本机为linux mint18 官网原文链接在此 // 直接使用sudo apt install nodejs安装的版本较老,而且命令必须使用nodejs // ...
- Geeks : Kruskal’s Minimum Spanning Tree Algorithm 最小生成树
版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/.未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...
- 利用grep命令查找字符串分析log文件的一次实践
需求场景: 我需要分析一个服务器访问日志,分析百度蜘蛛这个月对求索网页面的抓取情况. 分析问题: 我的一个access.log文件大小有35M,不可能直接通过打开查看.我需要过滤掉一些没有的信息,只保 ...
- [NOI2001]炮兵阵地 【状压DP】
#\(\color{red}{\mathcal{Description}}\) \(Link\) 司令部的将军们打算在\(N \times M\)的网格地图上部署他们的炮兵部队.一个\(N \time ...
- python -- 解决UnicodeEncodeError问题
使用中文字段时,经常会出现该异常:UnicodeEncodeError: 'ascii' codec can't encode characters in position 解决方法1: 在开头加上 ...
- 生产环境mysql数据库主从恢复从数据库
故障:系统硬盘损坏,完全重装 故障机器:172.16.100.32 恢复根据的主机器:172.16.100.31 1. 重装完成后,把master主库vs/program目录拷贝过来,然后把数据库的d ...
- 【jq】插件—缓存jquery.cookie.js
jquery.cookie.js插件 轻量级cookie管理 1°下载地址:http://plugins.jquery.com/cookie/ 2°引入方式:(基于jquery) <scri ...
- Blktrace原理简介及使用
Blktrace简介 Blktrace是一个用户态的工具,用来收集磁盘IO信息中当IO进行到块设备层(block层,所以叫blk trace)时的详细信息(如IO请求提交,入队,合并,完成等等一些列的 ...