vue学习篇01- 基础介绍

Posted 2020-11-25 wangnothings

　　介绍

　　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 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。