Vue基础

vue基础

1、前端框架发展历史

前端的发展历程

html

html5 [2008.1.12]

css

  css 1.0 1996 
  css 2.0 1998
  css 3.0 2001

EcmaScript 
  1997年诞生
  2015  EcmaScript 2015 es5
  2016  EcmaScript 2016 es6
dart语言  vs  javascript  竞争关系

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

    M  Model      数据层
    V  View       视图层
    C  Controller 控制器 ( 业务逻辑 )        MVC
 	P  Presenter  提出者（ Controller 改名得来的 ） MVP
    VM ViewModel  视图模型（ 业务逻辑  VM 是 由  P 改名得来的） MVVM

前端的框架

    Backbone.js  MVP    2010.10

    Angular.js( 1.0 )   MVC    2010.10

    Angular.ts ( 2.0 )  MVC -> MVVM 2016 目前已经更新到了 Angular9 ( 也属于angular2.0 版本 )

    Vue 1.0   MVVVM  2014/07

    Vue 2.0   MVVM   2016/09

    React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

    github统计量 （ 国际使用量 ）不代表大陆地区       单位是： K

    angular.js   angular.ts       vue             React  

      59.6          49.1          146              134	

    学习难度： Vue < React < Angular( 2.0 )

    前端流行

      移动  web    &&  hybird app( 混合app )

      app
        1. native app ( 安卓  ios  java ME)
        2. webapp ( 应用在浏览器中的app )
        3. Hybird app ( 混合app ) 
           1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）

	2016年： 	
		   1. es6
		   2. vue2.0
		   3. angular2.0x
           1. 微信小程序 /  微信小游戏

2、输出hello world

vue是最近几年的来发展迅速的一个前端框架

• Vue.js是尤雨溪的个人项目
• Vue.js也是一个MVVM框架(model-view-viewmodel)
• Vue.js它是一个单项数据流的框架
• Vue.js是一个Js渐进式框架（越学越难）

在这里我们介绍一点Vue的基础语法，也是程序入门的基础，输出hello world

ViewModel是vue.js核心，它是一个vue实例。vue实例作用在某个html元素上，可以是body，也可以是某个指定id的元素。我们在使用时需要先给Vue的实例绑定一个作用的区域：

作用区域：

<div id="app">
<!--app是 application 的简写， application 应用 --> 
        <!-- 这里面就是是vm的作用范围 -->
        <!-- 数据展示 -->
        <!-- 我们想要在html结构中书写js,需要模板语法： vue提供了mustache ,简称双大括号语法 -->
        <input type="text" v-model="info">
        <p>{{ info }}</p>
</div>

vue实例的应用

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
<script>
    /* 通过script标签对引入Vue.js之后，我们会得到一个全局变量 Vue
    */

    // new Vue( options )， options 称之为配置， 配置具有属性和方法 ， 它是一个对象
    var vm = new Vue({
        el: '#app', //官方称呼： ‘挂载’   element简写，它的作用是选取一个已有的DOM作为Vue实例的作用范围
        data: { //数据
            /* 
                data选项中定义的数据相当于全局变量，在app模板中相当于全局变量，可以直接使用
            */
            info: 'Hello World'
        }
    })

</script>

因为vue是MVVM的架构，所以它的操作都是需要绑定一个具体的DOM元素的，JavaScript中的元素变化，相应的绑定的DOM中也会有相应的变化。

在接下来的分享中，我会分享一下Vue的基础指令，多谢观看