对 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 的角色。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180221G0BSWR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券