学习vue

参考教程

总：

http://www.open-open.com/lib/view/open1476240930270.html

http://www.cnblogs.com/xuange306/p/6092225.html

route-link ：http://blog.csdn.net/tanga842428/article/details/53052970

组件命名：http://cnodejs.org/topic/5816aabdcf18d0333412d323

引入外部css：http://www.cnblogs.com/summerXll/p/6540522.html

vuex：http://blog.csdn.net/github_26672553/article/details/53176778

axios：http://www.cnblogs.com/zhouyangla/p/6753673.html

一、安装

首先安装了node.js、npm、webpack、vue-cli等

• node.js：是一个Javascript运行环境(runtime)。 简单的说就是运行在服务端的 JavaScript。使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

• npm：node.js下的包管理器。大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。包之间可能相互依赖，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。
• webpack：将vue组件（vue一个组件把<template><script><style>三层整合到一起）翻译和打包成 .js文件
• vue-cli：用来生成模板
• vuex：将状态管理单独拎出来，集中式管理组件状态（如组件显示/隐藏）&组件间的数据通信，方便维护修改。用单向数据流的方式，用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上
• axios/vue-resource：基于 promise 的 HTTP 库

（另外，在github上找了一些别人做的项目用来学习，发现cnpm install 总报错，于是又安装了）

• sass（要装sass需要装ruby，于是又装了ruby。。。但是最后我还没有用到）

步骤：

1.先安装node.js（注意版本！），国内镜像-点击打开链接

安装方法参考：廖雪峰的node教程-点击打开链接

2.npm也跟着装好了，cnpm（网速慢用淘宝镜像）还要再装，打开终端（运行->cmd）：npm install -g cnpm --registry=https://registry.npm.taobao.org

3.剩下那些cnpm install xx就可以了（有些装不上可以再来一次 可能网不好），

4.vuex和axios/vue-resource等需要在main.js中引入：import Vuex from 'vuex'; Vue.use(Vuex);

（axios并不是vue插件，所以不能 使用Vue.use()，只能在每个需要发送请求的组件中即时引入。可以在import axios 之后，通过Vue.prototype.$http = axios修改原型链，来更方便的使用。）

关于axios查了好多资料但是还是总报错，后来只好用vue-resource。。这是一个链接有空再研究一下点击打开链接

二、准备

1.创建模板：vue init webpack xxx（过程:loading template）

2.安装依赖：进入项目文件夹，cnpm install（可以看一下package.json中的devDependencies）（要研究别人的项目从这步开始）

3.启动服务器：npm run dev,自动打开监听端口localhost：xxxx（可以看一下package.json中的scripts.dev）（以后每次打开都要先完成这步）

三、开始

关于vue的基本使用：

1.实例化一个Vue，它有几个选项：

data放数据、methods放方法、watch放监听（要监听的数据：变化了干啥）

2.vue对象和html之间的粘合剂，是一些模板指令

数据渲染：

v-text（连标签也渲染）、 v-html、 {{}}

v-if (不渲染元素）、v-show（渲染但是不显示）

v-for（用于数组中套着一些对象）

v-on（事件绑定）

v-bind（可用来控制class）

具体用法：

比如如果想把class和某数据绑定（如果是false就变成某个样式） v-bind:class="{class名: 一个布尔值的数据名，可以是数组中的某个对象的某个key},还要在

还有一种用法，如果想要切换多个class：在data里写上一项 class的代称：‘class名’，在template中写v-bind:class="[class代称]"

3.自定义vue全局组件，并use使用，资料-点击打开链接

4.vuex

mapActions():可以将所有methods里面的方法，进行打包。即对所有的事件(或我们的行为)进行管理

mapGetters：获取所有的数据，对所有的数据进行管理

vuex的工作过程：

当用户点击时，会调用increment函数(即用户有一个动作dispatch)，mapActions将函数(动作dispatch)提交到actions里面，并且传了commit这个参数(也是一个函数)

commit主要处理你要做什么，比如异步请求，判断，流程控制等，commit会将这些请求、状态提交到mutations里面mutations主要用来处理状态(数据)的变化

mapGetters获取目前数据，将状态(数据)提交到getters上面，给mutations使用，让数据发生变化，并返回(render)，从而更新视图

actions里面除了含有commit这的对象参数以外，还有另一个参数state(Vue组件中展示的数据源)在这个过程中可以对数据进行判断，并作出相应的操作

项目的目录：
|--src文件夹
　　|--App.vue
　　|--main.js
　　|--store文件夹
　　　　|--index.js //必须有index.js，它是我们组装模块并导出 store 的地方
　　　　|--actions.js //是我们有动作触发之后，dispatch提交的地方
　　　　|--mutations.js //commit提交的地方
　　　　|--types.js //存放的是控制数据状态的地方，即控制数据如何变化
　　　　|--getters.js //获取数据的目前状态，给mutations使用

四、做项目中遇到一些细节问题
1.  了解es6。。如：const/let/var，如：(x) => x + 6相当于function(x){ return x + 6;}
2.  有一次把一个变量在组件和总app中都定义了一下，然后报错，调了好久
3. 注意弄清this的含义，有一次想把template的变量作为参数导到函数里，然后xx=this.xx写反了，又一顿找bug。。

4. 需要返回store值的数据要写在compute中，而不是data中（都可以{{}}），一个对象的属性不能直接写template中，要用compute算一下

5. v-for的每一项的css要写在v-for的div中，v-for和v-if有时不能写在一个div中

6.bind图片url时，有一种情况要用static。。有空细说。。