Vue

认识Vue

Vue介绍、与传统前端开发对比、MVVM概念、数据与视图、组件、Vue.js开发模式、兼容性等

2018-06-27侠课岛    初级拔高       

前端/前端必修/Vue快速入门 42     0     5930

vue是什么

    作者:尤雨溪

    官网地址:https://cn.vuejs.org/

    Github地址:https://github.com/vuejs/vue

    版本:2.5.16

    视频介绍地址:http://player.youku.com/embed/XMzMwMTYyODMyNA==?autoplay=true&client_id=37ae6144009e277d
    
    是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用
    Vue 的核心库只关注视图层
    当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

    总结起来就是:数据绑定+渐进式+组件化(MVVM)

MVVM

    MVC
    View + VIewModal + Modal
    MVVM.jpg

    很重要的概念!!!
    纯函数:只要输入一致,输出就一致,不存在副作用
    纯UI;只要数据一致,界面就一致,不存在副作用

数据-视图

    数据(VM)
    const app = new Vue({
        el: '#main',
        data: {
            message: 1
        }
    })
    视图(V)
    <div id="main">
        <input v-model="message" />
        <br />
        <span>{{ message }}</span>
    </div>

组件化(Conponents)

    官方定义:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树
    
    Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
    })

    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item></todo-item>
    </ol>

开发模式

    声明式渲染 -> 组件系统 -> 客户端路由 -> 大规模状态管理 -> 构建工具

    渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已

浏览器兼容

    Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

    底层原理:ES5 -> Object.defineProperty()

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

42

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?