Vue从Hello World到上线
Vue 简介
Vue是个MVVM框架。
特点：简单易学、体积小、性能高。并且它的源码耦合性非常低，了解它的过程也就是思想进步的过程。
当然，只学这一个框架，无法完成前端的全部工作，除了Vue之外，还需要了解axios、Webpack，才能完成整个开发过程。
好了，我们开始！
Vue的Hello World
写Hello World已经成了传统，我们也不例外，尽管Vue的入门文档写的非常好，但是在这里还是按照我的思路来走吧！
首先，我们先写一个html页面：
<body><div>Hello World</div>
</body>好了，现在我们已经写出了一个静态的Hello World，现在我们要用Vue将它改造成动态的。Vue的引入可以很简单，像极了jQuery，一个<script>标签引入即可。
<body><div>Hello World</div> <script src="vue.js"></script>
</body>然后我们再建一个<script>书写vue代码。
<body><div>Hello World</div> <script src="vue.js"></script><script>new Vue({el: 'body', // 这里遵循的是css的选择器规则，这句的意思是，body标签内都是Vue的控制范围data: { // 这里是数据，需要Vue绑定的数据都放在这里myData: 'Hello World' }})</script>
</body>好了，现在我们只差一步了，Vue里面已经有了数据，只欠绑定，将<div>内的内容改成这样既可：{{ myData }}，那么最终的写法是这样：
<body><div>{{ myData }}</div> <script src="vue.js"></script><script>new Vue({el: 'body', data: { myData: 'Hello World' // 上面的el和data这两个单词都是不允许改的，但是这句里的key可以随意命名}})</script>
</body>现在Hello World已经写出来了，那就需要敲打一下了。el: 'body'这个地方十分不建议写成这样，直接绑定body会有一些方法无法使用，建议写成这样：
<body><section id="app"><div>{{ myData }}</div> </section><script src="vue.js"></script><script>new Vue({el: '#app', data: { myData: 'Hello World' // 上面的el和data这两个单词都是不允许改的，但是这句里的key可以随意命名}})</script>
</body>在body内部添加一层并赋一个id是比较好的做法。放心，这或许是你整个Vue项目唯一需要写的ID属性，它不需要像jQuery一样命名一大堆ID。
添加事件
上面的Hello World其实就是一个数据绑定，那么我们深入一点，来了解事件绑定：
现在，有一个需求，需要在<div>{{ myData }}</div>这个块里添加一个点击事件，给你十秒钟想一想jQuery是怎么做的，是不是挺复杂的？而Vue有很简单的事件绑定写法：
<div @click="myClick">{{ myData }}</div>
// 是不是很像onClick事件？
// 其实是不一样的，在最终生成的代码里，你不会看到@click，它最终会被转换成DOM2级事件。现在，我们点击这个<div>块的时候，就会触发myClick方法，咦，等等，myClick方法还没定义呢！
那我们回到js代码里，添加methods属性：
new Vue({el: '#app', data: { myData: 'Hello World'},methods: { // 这个methods也是不可以改的哦，记得加smyClick: function() {alert("你点" + this.myData + "干啥？");// 你可以尽情使用data里的数据，但是要加上this指向}}
})好了，可以运行了，如果myClick方法需要加参数的话，也很简单：<div @click="myClick(myData)">{{ myData }}</div>，当然，下面的定义部分也需要配上形参：
myClick: function(data) {alert("你点" + data + "干啥？");
}相信你看出来了，data里面是放数据的，methods里面是放方法的。
添加属性
理解了添加事件，那理解添加属性就更简单了。
例如，有个<img>标签的图片路径是动态的，那么我们就需要用上属性绑定了：
<img :src="srcUrl" />
...
new Vue({el: '#app', data: { srcUrl: '../images/logo.png'}
})警告：
<img :src="srcUrl" />如果这个标签的src属性值是动态的，那就不要添加原生的src属性，通过属性绑定的方式引入路径是最佳实践，其他属性绑定也是同理。
更强的数据绑定
如果我们有这样一段数据：
arr = [1, 2, 3, 4, 5, 6];需要用<ul>和<li>标签渲染，给你十秒钟想想jQuery是怎么做的？不管怎么做，做出来都是悲剧！
我们看看Vue是怎么做的？
data: {list: arr
}
...
<ul><li v-for="item in list">{{ item }}</li>
</ul>如此一来，数据就可以漂亮地渲染到页面上了。
我们再来个复杂点的数据：
json = [{"AirPortCode": "HGH", "Temperature": "10℃", "Visib": "很好", "WeatherType": "晴", "Wind": "东风 - 3级", "city": "杭州"}, {"AirPortCode": "CAN", "Temperature": "17℃", "Visib": "7000米", "WeatherType": "多云", "Wind": "北偏东北风 - 2级", "city": "广州"}, {"AirPortCode": "PEK", "Temperature": "12℃", "Visib": "很好", "WeatherType": "晴", "Wind": "南偏西南风 - 2级", "city": "北京首都"}
]给你十秒钟想想……
算了，还是直接上vue吧
data: {list: json
}
...
<ul><li v-for="item in json">{{ item.city }} {{ item.Temperature }}</li>
</ul>在这里只显示了城市和温度两样东西。你愿意的话，可以显示更多。尽管数据好像复杂了很多，但是Vue应付起来并没有多吃力。
好了，我想我们的页面已经足够动态了，但是还不够智能，怎么说呢？例如上面的数据里有个Wind的字段，将这个字段渲染到页面上的时候，我并不希望全部渲染，我只想渲染风力级别，那我需要将前面的风向给去掉，这时候就需要加过滤器。
<li v-for="item in json">{{ item.Wind | cutWind }}</div>Vue提供了内置的过滤器，但切割天气显然不是它内置的过滤器，因此我们现在需要自己定义一个：
Vue.filter( 'cutWind' , function(value) {return value.split("-")[1];
});本来还应该加一个去空格的处理，但现在为了演示就暂且无视空格吧……
Ajax
现在数据都可以动态渲染了，我们需要考虑的就是，应该怎么从服务端获取数据，ajax库有很多，Vue原本也自己实现了一个，但后来弃用了，原因是不想重复造轮子。现在官方推荐的Ajax库叫axios，它确实也是一个小巧而轻量的库，体积大约是11k，同样可以通过<script>标签引入。
使用起来也简单，一般的ajax的POST请求：
var _this = this;
axios.post('../url', string)
.then(function(res) {_this.init(res);
});看！axios将自己暴露了，它是个类库！
然而，初始化的数据需要一载入页面就发请求去获取，我们可以将它写入钩子函数：
钩子函数，也就是从创建Vue实例到销毁的过程中，每一个阶段提供出来的一个扩展接口，我们可以通过这些接口在特定的生命周期时刻执行相应的动作。
new Vue({el: '#app', data: { myData: ''},mounted: function() {var _this = this;this.$nextTick(function() {axios.post('./url', arg).then(function(res) {_this.init(res.data);});})},methods: { myClick: function() {}}
})init()就是我们的初始化方法了。
打包
上面的知识点已经足够支撑我们完成一个日常项目，但这些语法层面的知识点只是表面，使用MVVM框架开发，关键是习惯专注于操作数据的思想，才能将代码量从根本上减小。
现在，我们完成一个项目后，需要打包，因为在开发环境下，运行所依赖的包达到好几百个，为了将文件体积缩减到正常范围，必须按需打包。打包工具我们选用的是webpack，为什么选它呢？因为几乎没别的选！
webpack如何配置，这个交给前端工程师就好了！
一个Vue的项目，目录树大致是这样：
/src目录是源码文件夹，里面的都是源码，开发环境都只打开这个文件。/dist目录是发布文件夹，取自“distribution（发布）”这个单词，里面的代码都是正式代码，所有资源都经过压缩，因此不是给人看的。
对/src里的文件做了相应的修改后，可以查看package.json这个文件，找到
"scripts": {"build": "webpack --progress -p --watch"
},不同的项目可能略有差别，但webpack命令就是我们需要的，这条命令的key是build，因此我们在项目的命令行运行npm run build，即可完成打包，如果没有报错信息，说明一切顺利，只需要将dist目录里的东西部署到线上即可。
