vue基础入门学习文档

vue基础入门学习文档
前言
看了无数篇阮一峰、廖雪峰大牛们的博客，也想尝试着写一篇像他们一样通俗易懂的Vue 入门的文章。

当然本人也是入门小白一个，关于高深层次的技术性东西自己也不是参悟的很透彻。

不过倒是可以与大家一起分享一下自己踩坑以及关于Vue 必学的一些最基础方面的知识。

Vue 作为目前前端开发中三大框架之一，是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 是一个JavaScriptMVVM 库，是一套构建用户界面的渐进式框架。

它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。

相比于Angular.js，Vue.js 提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。

Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

并且作者是华人的关系，Vue 拥有着对华人开发者最友好的api 文档和官方教程。

一、安装
对于没有接触过es6 和webpack 的同学来说，不建议直接用官方的脚手架vue-cli 构建项目，直接引用
即可。

通过webpack 来构建项目步骤如下：
1. 安装Node，下载地址：https:///en/ 或者/
2. 安装vue-cli，终端输入：npm install vue-cli -g
3. 初始化项目（即构建项目），vue init webpack vue-test,后面
名字（vue-test）是本次项目的名字。

4. 根据终端提示逐步往下进行。

当进行到是否要安装vue-router 时，点击Y，因为后面要用，出现是否语法检测（Use ESLint to line your code?）我们点击N。

这个很棘手，因为语法检测非常严格，有时候甚至你多写或者在符号前加空格，他都会报错。

空行也是如此，本人就被它折磨过，甚至最后直接重新开始构建一个新的项目。

5. 其余的命令为：“是否安装单元测试工具”以及“是否需要端到端测试工具”，依据个人情况而定选择是否安装。

6. 到此步，一个项目便安装完成了。

进入项目cd vue-test，安装依赖npm install，一般系统会自动帮你安装好了依赖，这里可以选择不用执行此命令。

7. 开启本地服务npm run dev，在http://localhost：8080 中看到vue 的一个介绍就表明整个项目构建成功。

二、起步
1.声明式渲染
老样子，先来一个Hello World，在src/component 新建一个test.vue。

HelloWorld.vue 是构建项目完成之后自带的页面，如果不再需要它可以将其删除，若要让test.vue 显示出来必须要在router.js 中修改他的路由。

现在开始写代码，回归test.vue，在下列方法中写入vue 自带的data 方法，此方法类似于react 的state，用于储存一些变量的信息、状态。

随后通过{{xxx}} 的方式渲染在页面上。

Vue 的数据和DOM 已
经被建立了关联，所有东西都是响应式的
本人用的是WebStrome2017-3.5，这一版本中新增了vue 文件的创建。

亲测只有从这个版本开始才可以直接创建.vue 的文件，当然，别的版本可以直接下载插件包也可以使用。

.vue 文件的好处就是自动帮你把组件的格式写好，你只需在里面直接写html 的代码，或者js 代码就好了。

2. 事件
Vue 的命令语句中有一个v-on 的方法，他正是用来绑定事件的。

以点击事件为例。

“@”可以替换v-on 命令，如：“@click=”xxx””
当然，也可以通过函数来触发点击事件，vue 将所有的函数放在methods 中，这就意味着我们要在此方法中写所有的事件函数
3. 条件与循环
条件判断通过v-if ，v-else，v-else-if 等命令来控制。

可以把函数直接写在标签里，这样会方便很多
注意，v-else-if、v-else 必须紧跟在v-if 的元素之后，不然不会被识别。

循环使用v-for 命令，它会把一个数组对应为一组元素，类似于React-Native 中Flatlist 组件的renderItem 方法，当然这一切都类似原生JavaScript 的map() 方法。

个人认为v-for 是最方便获取并渲染一组数据的方法。

4. 表单输入绑定
表单输入绑定用v-model 命令，v-model 虽然很像双向数据绑定的Angular，但是vue 是单数据流，v-model 只是语法糖。

5. 父组件传值
与React.js 相似，Vue 子父组件之间传值也是通过props，包括组件之间的通信也是一样的。

首先我们在父组件上引用子组件，并将其写入容器内。

随后，我们在子组件上面通过props 方法来接收父组件传过来的
参数，接收后便可以直接在页面上渲染。

父组件可以传多个值，不同的父组件也可以传若干的值，因为props 是一个数组，我们接收的值以数组的形式放入即可。

三、vue-router
如果按照之前webpack 的方法构建出来的项目，我们就不必再次安装
vue-router，因为它已经为我们一套打包安装好了。

进入router 文件夹中的index.js，我们需要做的就是两件事：
1. 引入需要跳转路由的组件；
2. 在routes 方法里添加该路由的路径、名字及组件
随后我们只需要通过vue 自带的标签，它相当于a 标签，是一个链接。

里面的tab 属性是可以控制router-link 的类型，这里我们选择了让他变成一个按钮。

嵌套路由
嵌套路由，顾名思义就是路由的多层嵌套。

主要写法在于：把子路由的路径写在你需要嵌套的路由里的children 方法中。

在父路由中，通过引用即可，注意路径要写全，否则不会成功跳转到相应的子页面。

里面会自动接收来自子路由里的内容。

动态路由
动态路由运用的场景有很多。

比如像是网上商城，根据不同的id 显示出不同的商品。

页面布局是同一个，路径分别是不同商品的路径。

用法很简单，首先注册
路由的时候只需要在后面加“:id”。

这地方，:id 是自己取的，当然可以选择使用别的字符，功能还是可以照样实现。

在需要跳转的地方，写上完整的路由即可。

路由传值及函数路由
路由可以用函数的方式进行跳转。

在函数中用this.$router.push(‘/....’) 即可实现此功能
路由传参分为标签传参，和函数传参。

顾名思义，标签传值就是把参数连带路由直接写在标签里。

下面的便是函数传参。

注意：name 为router.js 中所定义的名字，而且必须要写在上面。

否则路由虽然能跳转过去，但是值会获取不到
跳转过后页面接收值
四、Vuex
Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一
种可预测的方式发生变化。

安装
普通html 页面直接引用
Npm
在需要用到的页面引用即可
新建一个store.js,引用vuex
这个便是Vuex 最基本的一个结构，Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。

至此它便作为一个“唯一数据源(SSOT)”而存在。

这也意味着，每个应用将仅仅包含一个store 实例。

State 中存放的是初始的状态值，可以从这里定义一个初始的值，也可以从页面中传值过来，如果获取传过来的值则需要在mutations 中获取。

mutations 中放置的是一系列改变状态的函数。

更改Vuex 的store 中的状态的唯一方法是提交mutation。

Vuex 中的mutation 非
常类似于事件：每个mutation 都有一个字符串的事件类型(type) 和一个回调函数(handler)。

这个回调函数就是我们实际进行状态更改的地方，并且它会接受state 作为第一个参数。

actions 类似于mutation，不同在于：Action 提交的是mutation，而不是直接变更状态，Action 可以包含任意异步操作。

在页面中显示：
在addCount 的方法中，通过dispatch 来分发actions。

简而言之就是：页面函数发起一个行为（action），action 自动匹配到mutation 中所对应的方法，mutation 开始改变最初接收的state 中值的状态。

这便是完整的一个vuex 的运行流程。

computed 是一种计算属性的方法，具体概念可以参照官网中的计算属性。

五、总结
以上介绍的一些命令及方法是最基本的用法。

每个命令具体详细的介绍与使用方法可以在Vue.js 官方文档中参考。

Vue 的官方文档写的很详细，介绍的方法也很明确，我认为是相当不错的文档之一了，至少我能看懂。

当然还有朋友看过之后给我说过，Vue 的文档看起来非常的过瘾，比React 的不知道详细多少倍。

对比两大框架，虽然都是开源的，但是不得不说Vue 团队做的就很人性化，单单在文档方面就已经为小白们提供了很多便利。

还是想说原来的那句话，这篇文章是关于Vue.js 最基础入门的，代码都是自己当时踩坑尝试出来的。

希
望大家看完之后能对vue 稍微有所认识。

当然，还是得需要多多实际练习才能巩固的更加深透。

愿和我一样的Vue 初学者通过此篇简单的小文能够有所收获，并祝愿在未来的前端道路上大显身手。