您的位置:时时app平台注册网站 > web前端 > Vue.js-01:生手村的试炼 - 初见Vue新世界(概念卡

Vue.js-01:生手村的试炼 - 初见Vue新世界(概念卡

2019-11-03 13:29

  在传统的前端开发中,为了完成某个任务,我们需要使用 JS/Jquery 获取到元素的DOM元素,随后对获取到的DOM元素进行操作。而当我们使用Vue进行前端开发后,对于DOM的所有操作全部交由Vue来处理,我们只需要关注于业务代码的实现就可以了。

MVC

  • 概述
    • MVC 即 Model-View-Controller 的缩写,就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成.
  • View 用来把数据以某种方式呈现给用户。Model 其实就是数据。Controller 接收并处理来自用户的请求,并将 Model 返回给用户。
  • 中间的过渡过程
    • MVC 架构模式对于简单的应用来看起是OK 的,也符合软件架构的分层思想。 但实际上,随着H5 的不断发展,人们更希望使用H5 开发的应用能和Native 媲美,或者接近于原生App 的体验效果,于是前端应用的复杂程度已不同往日,今非昔比。这时前端开发就暴露出了三个痛点问题
      • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护。
      • 大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
      • 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到

与Reactive.js的区别

Reactive.js和Vue.js的API类似,通过实例化Reactive类传入元素和数据、模板等,它使用字符串模板,数据模板和Knockout一样用get和set,代码体积较大。

  4、 MVC与MVVM

MVVM

  • MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象
  • ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,

与Backbone.js区别

定位不同,Vue.js专注于View,Backbone除了View之外,还提供Collection、Model、Router。Vue.js拥有数据绑定,而Backbone需手动通过事件来操作DOM。

  3、 如何使用Vue.js?

Vue和MVVM的暧昧关系

  • Vue.js 可以说是MVVM 架构的很好实践,专注于 MVVM 中的 ViewMode(只需关注业务逻辑,不需要手动操作DOM)
    [图片上传失败...(image-4149a-1516350102775)]

Vue.js特性

  • 轻量
    除了以MVP模式代表的Riot.js外,Vue.js算是前端库里体积非常小的,但不依赖其他基础库。
  • 数据绑定
    对于富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。
  • 指令
    类似AngularJS拥有内置的简单指令,也可自定义指令,通过对应表达式值的变化即可修改对应的DOM。
  • 插件化
    Vue.js核心库不包括Router、AJAX、表单验证等功能,可方便地加载对应的插件。

  2、 使用Vue.js后与传统的前端开发模式有何不同?

补充内容

  • 实例属性 ref
    • ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例
  • $mount()

          // 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
          let vm=new Vue({
              data:{
                  a:101
              }
          }).$mount('#box');
    
  • v-pre

    • v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
  • v-cloak

    • 解决闪烁问题

      • 第一css设置

        <style>
            [v-cloak] {
              display: none;
            }
        </style>
        
      • 第二指令

  • 自定义指令

    • 全局定义
    • 局部定义

与React的区别

Facebook的React目前受关注度很高

相同点

  • React采用特殊的JSX语法,Vue.js在组件开发中推崇编写.vue特殊文件格式,对文件内容约定,两者都需编译后使用。
  • 开发思想相同:一切都是组件,组件实例之间可嵌套
  • 提供合理的钩子函数,让开发定制化地去处理请求。
  • 无内置AJAX、Router等功能到核心包,以插件方式加载。
  • 组件开发中都支持mixins特性

不同点

  • React依赖Virtual DOM,而Vue.js使用DOM模板。
  • React采用Virtual DOM会对渲染出来的结果做脏检查。
  • Vue.js在模板中提供指令、过滤器等,可方便快捷地操作DOM。

  初入Vue.js的新世界,总归是要了解些涉及到的新概念。菜鸟诞生的第一课,开眼看看Vue的新世界~~~

axios数据请求 {:&.flexbox.vleft}

  • 概念
    • 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
    • github地址
  • 基本例子
axios.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Beijing&appid=7c5219469d1d3aa869d2599559d26fc1&lang=zh_cn')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

与Polymer的区别

2013年Google I/O之后推出的Polymer,提出Web Component早期规范性方案,如HTML Imports、Shadow DOM、数据绑定等。不过由于后续新版本对之前冲击较大,一度受到早期开发者的抱怨。

相同点

  • 支持数据绑定
  • 与Vue.js推崇的组件文件都是以.vue后缀组织结构类似

不同点

  • Polymer推崇Web Component标准化,依赖浏览器环境的特性支持。若不支持则要加载对应的Polyfill。
  • Polymer代码体积较大无法做到轻量级

  这一章我们主要学习了一些 vue 涉及到的一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到的知识,文章开始处提供仓储地址里会将涉及到的知识点的汇总成一个markdown文档,希望多多关注啊,嘻嘻。

知识点

  • axios数据请求
  • MVVM/MVC
  • Vue和MVVM的暧昧关系
  • 补充内容

MVP

MVP 是从经典的MVC模式演变而来的,基本思想有相通之处:

  • Controller/Presenter负责逻辑的处理
  • Model 提供数据
  • View 负责显示

在MVP中,Presenter完全把View和Model进行分离,主要的程序逻辑在Presenter里实现。

Presenter与具体的View是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View时保持Presenter不变。

图片 1

MVP通信方式

  3.1、使用 script 标签引用Vue.js(这里可以在Vue的官网上下载好js文件后使用标签引入,也可以使用cdn的形式引入)

MVVM/MVC

与Riot的区别

作为React-like的MVP框架的代表,Riot不到10KB稳居第一,超越第二的Vue.js。

相同点

  • API设计简单而专注学习成本低
  • 提供自定义生命周期钩子开发者灵活使用
  • 与主流工具集成度高支持与各种预编译工具集成
  • 组件化思想,将HTML和JS、CSS混在一个组件中。
  • 仅更新变化的元素

不同点

  • Riot内置路由功能设计支持Virtual DOM
  • Riot支持自定义标签,将标签内容放置在.tag文件中,使用script特殊的type="riot/tag"加载编译。
  • 与Polymer初衷一样,推崇Web Component标准化,不依赖冗余的Polyfill。
  • Riot支持服务端渲染
  • Riot默认单向绑定

 三、总结

与AngularJS的区别

AngularJS应用于PC端的复杂交互系统

相同点

  • 支持指令 内置指令和自定义指令
  • 支持过滤器 内置过滤器和自定义过滤器
  • 支持双向绑定
  • 不支持低端浏览器(IE6/7/8)

Vue.js使用比如Array.isArray的ES5特性,AngularJS1.3开始不支持IE8。

不同点

  • AngularJS学习成本高,增加Dependency Injection特性,而Vue.js本身提供的API简单直观。
  • 性能上AngularJS依赖对数据做脏检查,Watcher越多越慢。Vue.js使用基于依赖追踪的观察并使用异步队列更新,所有的数据都是独立触发的。对于庞大的应用来说,优化差异比较明显。

  3.2、使用 Vue-cli 构建单页应用(需要先在电脑中安装好node.js环境才可使用)

Vue.js是什么

Vue.js不是一个框架, 它只聚焦View,是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

图片 2

Vue.js

  1、 Vue.js是什么?

MVC框架最早出现在Java领域,逐渐在前端开发领域也被应用,相续出现了MVP,以及现在最成熟的MVVM。

  仓储地址:

与Knockout的区别

Knockout非常轻量级,是兼容IE6 的MVVM框架。

相同点

  • 数据和DOM元素绑定
  • DOM元素基于模板
  • 追求UI和数据关联自动刷新
  • 支持依赖追踪

不同点

  • Knockout所有可观测属性需手动用observable()来初始化,需要用函数调用方式来操作数据。
  • Knockout没有ViewModel之间作用域的继承

  学习系列目录地址:

MVC

MVC是应用最广泛的软件架构之一,分为Model(模型)、Controller(控制器)、View(视图)。基于分层的目的让彼此的职责分开。

  • View通过Controller来和Model建立联系
  • Controller是Model和View的协调者
  • View和Model不直接联系,基本联系都是单向的。

图片 3

MVC通信方式

用户操作应该放在什么位置呢,MVC之间又有什么变化呢?

用户通过Controller来操作Model以达到View的变化。

图片 4

MVC通信方式

  4.1、MVC(Model-View-Controller):是一种表现模式(UI / Presentation Pattern),它将软件的UI部分的设计拆分成三个主要单元,分别是Model、View和Controller。MVC核心是控制器,它负责处理浏览器传送过来的所有请求,并决定要将什么内容响应给浏览器。

MVVM

MVVM代表框架有:知名度相对偏低的Knockout、早期的Ember.js,Google的AngularJS、Vue.js等。

MVVM只是把MVC的Controller和MVP的Presenter改成了ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上。

这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

图片 5

MVVM用户操作影响

 一、前言

Vue.js与其他框架的区别

  View:视图,根据Model数据进行内容展示的组件;

  //1、全局安装Vue-Cli
  npm install -g vue-cli
  //2、进入创建项目目录下
  //3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
  vue init webpack projectname
  //4、进入项目目录下
  //5、下载项目引用的包
  npm install
  //6、运行项目
  npm run dev

  4.2、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了对于Model和ViewModel的双向数据绑定,通过ViewModel连接View和Model,确保视图与数据的一致性,而这个过程是框架自动完成的,无需手动干预。

  对于Vue的解释,推荐简书上的一篇文章,文章地址:  

 二、打怪升级

图片 6

  Controller:控制器,接受并处理用户指令,并返回内容

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,只关注于视图层。在Vue的官网中我们可以看见,对于渐进式框架这个词,作者是加粗表示的,按照作者的设计,Vue包含了现代前端框架所必须的内容,但是你并不需要一开始就把所有的东西都用上,这些都是可选的。

  图片版权说明:由Ugaya40

  <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  Model:模型,用于存储数据的组件;

  • 自己的作品,CC BY-SA 3.0,链接

本文由时时app平台注册网站发布于web前端,转载请注明出处:Vue.js-01:生手村的试炼 - 初见Vue新世界(概念卡

关键词: