放狗搜了一波，按照决定跟着官方文档走。
一 环境配置
只安装了 nodejs，windows 系统。
安装
参考：https://cn.vuejs.org/v2/guide/
npm install --global vue-cli
vue init webpack learn-one(learn-one is my projectName)
cd learn-one
npm run dev
安装过程中遇到的问题：
-
npm 没更新
install-question.png
读上面的日志，可知大概是因为 npm 没更新的缘故，按照提示更新之。
npm i npm@latest -g
然后重试，vue init webpack learn-one,要么回车，要么y（yes）。
然后按照，教程的命令，cd learn-one, npm run dev，ok了。
打开http://localhost:8080/#/, 看到成功页面。
二 目录结构
参考文章，http://www.runoob.com/vue2/vue-directory-structure.html
根据菜鸟教程，学习一下目录结构，输出一个hello world
三 写一个Hello world 的组件
因为 vue 的教程有点罗嗦，我于是自己探索了一下。看了一下目录，大概有些认识：router 是路由，components 是组件。
- 认识 components
components 组件分为三个部分：
-
<template> </template>写html -
<script></script>写 js 逻辑 -
<style scoped>写 css
-
配置路由
照猫画虎，配置一个路由 -
刷新网页，注意，这需要带个 # 号，原因不明
http://localhost:8080/#/voice
四 Vue 双向绑定
参考文章，http://www.cnblogs.com/keepfool/p/5619070.html
<template>
<div>
<h1>{{ msg }}</h1>
<div>
<input type="text" v-model="msg" />
</div>
</div>
</template>
<h1> 标签中的 msg 与 input 输入框双向绑定了，无论修改哪个，都会同步更新。
思考，为什么 Vue 为什么能做到这一点？
五 Vue 大致原理
5.1 MVVM 框架
react / vue 的出现是为了解决什么问题？
5.1.1移动端带来的新问题
参考文章，https://mp.weixin.qq.com/s/y2DZw5ELrW_WLW2jK2Cugg
移动端的网页应用功能越来越复杂，交互也越来越酷炫，功能与效果越来越接近于原生的APP。这种webapp它们不仅仅像h5营销网页一样有酷炫的效果，它们还有复杂的点击、输入、下拉选择，视图切换等复杂的交互。在这样的业务需求下，我们还是沿用PC端的开发方案，难免会不太合适。比如：视图切换。在PC端，视图切换我们会用<a>标签进行页面的跳转，但如果在移动端，那就歇菜了，因为加载过于缓慢。
此外，接收用户输入的同时，很可能要及时更新视图，比如用户输入不同的内容，页面就会相对应进行更新，点击不同的选项，就会显示不同的状态等等交互效果。一旦这种交互多了，你要手动地进行操作，代码就容易变得复杂和难以维护。
5.1.2 MVVC 框架
参考文章： 阮一峰，https://blog.csdn.net/w2326ice/article/details/64123699
一句经典的编程思想，没有什么问题是加一个中间层解决不了的
- MVC，model / view / control，这种是前后端不分离的；
MVC的一般流程是这样的：View（界面）触发事件--》Controller（业务）处理了业务，然后触发了数据更新--》不知道谁更新了Model的数据--》Model（带着数据）回到了View--》View更新数据
-
MVP，Model-View-Presenter
这个不用管，类似于 MVC。(其实我们写的都是MVP，数据库和VIEW 怎么能直接联系呢？) -
MVVM，Model-View-ViewModel
参考文章，http://www.cnblogs.com/keepfool/p/5619070.html
mvvm.png
ViewModel大致上就是MVC的Controller了，而View和ViewModel间没有了MVP的界面接口，而是直接交互，用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例，而是自动地双向同步。数据绑定你可以认为是 Publish/Subscribe模式（订阅发布模式），原理都是为了用一种统一的集中的方式实现频繁需要被实现的数据更新问题。
比起MVP，MVVM不仅简化了业务与界面的依赖关系，还优化了数据频繁更新的解决方案，甚至可以说提供了一种有效的解决模式。
5.1.3 Vue 就是实现 MVVM 理念的一种框架
参考，http://www.cnblogs.com/keepfool/p/5619070.html
直白来讲，以前我们想修改页面，要怎么办？
肯定是先定位，let p = document.getElementById(' ')
然后再改变内容，p.innerHTML = 'xxxx'
但是在 Vue 中不用这么麻烦了，因为Vue.js是 MVVM 框架，数据双向绑定，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
vue_mvvm.png
深入一点说：
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
六 创建一个 Vue 实例
6.1 创建一个 Vue 实例只需要分4步
vueInstance.png
七 语法检查
ESLint 是个代码规范，你不通过代码规范，有时就会编译失败。我觉得就是个煞笔规范！
- 最后一行是空行，这个会导致编译失败。、
—— 反正编辑器提示了，你就注意一下，尽量不要让它标识语法不规范。
http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\main.js:18:1
- new Vue 会抛异常
异常
Do not use 'new' for side effects
解决办法
new Vue({ // eslint-disable-line no-new
八 常见指令
参考文章：http://www.cnblogs.com/keepfool/p/5619070.html
vue 比 react 受欢迎在哪？我粗浅的认为，vue 把一些复杂的效果包装成指令，而 react 需要自己去封装组件。
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
上面这段话说的非常好，初学阶段，你就把指令当作 html 标签的属性来看待就好了。其实，学过后端模板的人，根本就不陌生这些东西。
常见的内置指令：
v-if指令，条件判断指令
v-show指令
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。如果不符合条件的话，Css属性是不可见的。
v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别
v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
for i in xx
v-bind指令
v-on指令
网友评论