Vue.js安徽移动触屏版实践进阶(一)
背景：不久前王总给我们推荐了公司一篇关于vue.js的帖子，希望我们研究下，是否有运用到触屏版的可能性，后来在网上发现现在vue.js 的确很火，为此私下也就学习一点，恰巧最近触屏版在做前端架构优化，提及了将引入vue.js于我们的前端工程中。
作为小组成员之一，为了不拖我们团队在前端工程化建设道路上的后腿。
以及兑现对组长上次和我谈话说要将学习和实践结合起来的承若。
所以呢，为啥不搞起来呢？乘着这次宽带新装改版--地址查询模块挺适合通过vue开发的。
那就就用它小试牛刀吧！
通过实践中的一个小模块作为案例，先和大家分享下关于vue.js的一些基础用法吧。
案例：触屏版宽带专区覆盖地址查询页面展示预期效果如下
页面主要元素带有地市信息的<li></li>标签，在dom中是这样布局的：
那么通过vue.js如何实现。
首先，作为初学者，简单直接粗暴的方式直接引用一个下载好的vue.js!
接下来我们要实例化一个vue对象。
简单的结构如下：
var vm = new Vue({
el:"#wrapper",
data:{
cityList:[]
},
created:function(){
},
mounted:function(){
},
methods:{
}
});
每个Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的,在实例化Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
1)el:提供一个在页面上已存在的DOM 元素作为Vue 实例的挂载目标。
可以是CSS 选择器，也可以是一个HTMLElement 实例。
案例中我选择了id=wrapper的DOM元素。
注意：所有的挂载元素会被Vue 生成的DOM 替换。
因此不推荐挂载root实例到 <html> 或者 <body> 上。
2)data：Vue 将会递归将data 的属性转换为getter/setter，从而让data 的属性能够响应数据变化。
对象必须是纯粹的对象(含有零个或多个的key/value对)
3)mounted为生命周期钩子,表示实例已经创建完成且挂载结束。
通常我们会在这里调用页面初始化的方法。
注意：关于vue生命周期钩子还有多个阶段，在这不多介绍了。
以后研究深入了，再和大家分享。
4)methods：在该模块可申明各种方法，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为Vue 实例。
当然，在后续的开发中还要根据自己的实际需求创建选项对象。
接下来我们看看如何通过模板语法实现DOM结构的渲染。
废话不多说，直接上代码，先睹为快！
分别简单解释下案例中的相关指令：
1)v-for直接通过遍历对象数组cityList便可获取相关属性的值，直接将需要的值渲染给li标签的各种属性或文本。
如代码中v-for="(city,i) in cityList"将遍历数组对象cityList的每一个对象，并给其起了一个别名city，通过city.areaCode和city.areaName获取每个地市的地市编码和名称。
其中参数i表示数组下标。
当然我们在data中已初始化cityList了！
2) :value=”city.areaCode”其实是v-bind:value=”city.areaCode”的缩写
方式，表示将数组中的areaCode值绑定到对应的li标签的value属性中。
v-bind指令用法可以绑定DOM元素的各种属性，用法相同。
4) :class="[areaCode==city.areaCode?selectedStyle:'']" 同理是通过v-bind的指令绑定了class属性，从而实现了style与class的绑定。
Class 属性中是一个样式数组通过三元表达式的结果控制该li标签具有哪些样式属性。
当然也可以直接通过一个布尔值去控制。
该处表示当前当地市编码与li标签列表的地市编码相同时，该处li标签将会添加class名为selectedStyle属性值（on）的样式，表明地市选中状态。
5) v-text="city.areaName" 类似于jquery中text的方法，将内容插入到标签文本中。
另一种写法可以这样写<li>{{ city.areaName }}</li> 通过{{}}将所需文本内容插入到标签内。
6）@click="selectCity(i)" 其实是v-on:click=”selectCity(i)的缩写方式，表示给每个li标签绑定了一个selestCity方法。
当点击时触发该事件。
方法的具体实现内容在vue对象的methods模块定义。
通过以上一个小小的案例，我们基本了解了vue.js的基础内容：vue 实例构造器、属性与方法、生命周期、以及语法模板中的插值、指令、缩写等。
该部分是我目前在触屏版开发中vue实践的第一步，总结的也是一些基础性的东西。
希望在日后会继续分享总结些更加深入的东西，希望有过经验的大牛们多批评指教，同时希望对vue感兴趣的小伙伴们一同加入进来，可以相互探讨、学习、进步！
谢谢！。