介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
这段话是官网上对vue的介绍,对这句话里的几个关键字解释如下:
渐进式框架 —— 不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分。
自底向上逐层应用 —— 由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。
只关注视图层 —— 以往的开发多属于MVC模式,是Model View Controller的缩写,MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。但vue是属于MVVM,是Model-View-ViewModel的简写。它是一种基于前端开发的架构模式,其核心是提供对 View 和 Model 的双向数据绑定,这使得Model 的状态改变可以自动传递给 View。Vue.js就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。
单页面应用 —— 只有一个html文件。在vue里,我们可以把很多页面以组件的方式根据路由的变化来替代,只展示在一个html文件中。
安装
https://cn.vuejs.org/v2/guide/installation.html 官网解释。
声明式渲染
这是官网的例子。
创建一个vue实例,
el :提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。如图中的 id 为 app 的 div元素 ,也可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
data : Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是 数据 - 不推荐观察拥有状态行为的对象。这里data是一个对象的形式,因为此处只有一个实例。在以后的开发中,会有很多组件,每个组件中可能会存在data,这个时候的data是以函数return形式来返回数据,因为在js里,对象是引用类型,如果写成对象的
话,在多出引用该组件,修改一个data里的数据,其他引用的位置,也会一起改变。
指令
vue中有很多的指令,https://www.jianshu.com/p/c4a87e1b4ef7 这里有介绍,有很多指令可以缩写,比如常用的 v-on 绑定事件,缩写为 ‘@’ 。 v-bind 绑定属性,缩写为 ‘ :’。
计算属性和侦听器
computed 和 watch , 二者比较 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7 官网有给例子。
我所理解为,计算属性:它是个对象,里面可以写我们自定义的函数,而这个函数名。可以直接用模板语法使用,如同data里的数据一样。当函数中所依赖的数据发生改变,就会触发这个计算属性,重新计算该函数的并返回值。
侦听器:也是个对象,里面的函数都是用data里的数据来命名的。即可以理解成监视这个数据,当这个数据发生改变,即触发该函数。
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。