对 vue.js 的初步了解

对 vue.js 的初步了解。

vue.js框架的定位在官网上已经描述得相当明确：渐进式、自底向上的视图层开发框架，容易，并且方便和其他优质前端库、工具整合，在它基础上能构建复杂的 单页面应用。

在 vue.js 的世界里，组件是其一等公民。

在五年前大学的 web2.0程序设计的课堂上，首次接触前端编程，还是以 html 标签为基本单位，去构建 web 应用，那时看来一个 web 应用就是由一个个 html 标签组成，表单类的 控件接受用户输入，提交表单，触发 action，发送到后台，通过操作 dom，来影响前端界面的展示。慢慢学习了一些 mvc 框架，如 django、flask、tornado等，都有对应的视图层模板引擎，通常是首先设计页面的 base.html，里面是网页的大体布局，有菜单栏、侧边栏、底部栏、主体内容部分，会放置一些公共的东西，如导航菜单、公用的 css 文件、js 文件等，然后其他的视图界面会继承这个 base.html，根据后台返回的动态内容渲染主体部分。在这时候，前端开发思想还是以 html 标签作为基本单位。

前端面向组件化的开发思想，其实由来已久，简单来说主要解决构建复杂前端应用问题，能够进行代码复用，方便维护，当然还有很多其他好处。这个时候，一个前端应用，可以以组件的形式自底向上构建。vue.js 对面向组件开发提供了更好的支持。vue.js 中，组件对 html 标签进行了扩展，可以让一个 vue 组件像一个普通的 html 标签一样使用，所谓的声明式渲染组件。vue 定义一个组件有多种方法，这里只简单说说单文件组件（single file component）。每个单文件组件，基本的根元素标签是三个，template、script 和 style。

template 中是 html 标签元素，提供组件视图元素，默认编程语言 html，得益于 webpack 技术，可以使用 jade 类似js 模板引擎。

script 中默认编程语言是 es6，定义组件的状态，组件是有生命周期的，提供了一些生命周期钩子如 created，可以在组件创建的时候，调用rest 接口，获取数据，初始化组件状态。script 中还会定义methods，这些方法可以作为事件处理器，通过 vue 的v-on 指令，绑定到组件或者 html 控件的事件上，让 Vue 框架能监听特定事件，进而触发调用它。

style 中，定义渲染组件视图的css 样式，得益于 webpack 技术，也可以使用sass 之类的 需要预处理的 css 语言。值得一提的是style 可以通过属性标记 css 是 scoped 的，所谓的 scoped css，局部作用域的 css，也就是说在这里定义的 scoped css，只对这个组件的 template 中的 html 标签渲染起作用，不会影响其他组件。它背后的实现实际是 vue-loader 借用PostCSS，对样式应用进行了转换。

vue.js 中所有的组件都是是一个 Vue 对象实例。

父子组件间如何进行通信？

vue 推荐的父子组件通信方式是，props down， events up。父组件传递数据给子组件，通过 props，如果是在父组件的template中以 声明方式使用子组件，那么数据是通过标签属性的形式传递。子组件与父组件通信，通过事件，子组件 emit 事件类型，事件参数，父组件在 template 中通过 v-on 监听子组件事件，调用相关事件处理器，更新状态。这两种通信方式，都为了父子组件能卸耦。

在 spa 应用中，不同的组件间如何切换，那么 vue-router 就上场了。就如同 mvc 框架里面的 router 或者 url mapping，组件有 path(相当于 url)，name。就如同参数化的 url，当然也可以有组件的动态 path，组件中可以获取 router 的动态 path 中的参数，通过这些参数向后台请求动态数据。在 router-link 组件中，一般是通过 router 的 name 进行组件导航切换。

提到 vue，不得不提的，当然是它的数据双向绑定。双向绑定是 mvvm (Model-View-ViewModel)模式中的应用。传统的 前端开发是单向的，数据流向是从 Model 到 View。Vue中提供了 v-model 指令，将一个表单控件的输入绑定到一个js 的model 对象上，使得用户在界面表单的输入即刻改变 model 的状态，当然其中省掉了传统的 js 通过 dom api 获取表单输入内容，再设置到对象的api 调用。mvvm 模式有优点，有缺点，深入了解后再写写。Vue 对象实例实际充当 ViewModel 的角色。