zoukankan      html  css  js  c++  java
  • vue学习日记01

      介绍

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

        

      

     

              

  • 相关阅读:
    POC- Proof of Cocept -- 概念验证
    英语语法学习 7 -- 数词
    英语语法学习6 -- 代词
    英语语法学习5-冠词
    英语语法学习4-名词
    英语语法学习3-句子的组成和分类
    alibaba-Java开发手册心得-一编程规约-4oop(面向对象编程)规约
    alibaba-Java开发手册心得-一编程规约-3代码格式
    alibaba-Java开发手册心得-一编程规约-2常量定义
    魔法值的简单了解
  • 原文地址:https://www.cnblogs.com/wangnothings/p/12364388.html
Copyright © 2011-2022 走看看