vue初步认识及使用

最新推荐文章于 2024-11-13 11:52:56 发布

EatsSinner

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量219

点赞数 1

文章标签： vue.js MVC、MVVM

本文链接：https://blog.csdn.net/EatsSinner/article/details/95599910

版权

vue初步认识

前端发展历史

HTML：html [1990]----> html5 [2008.1.12]
CSS
- css 1.0 1996
- css 2.0 1998
- css 3.0 2001
EcmaScript
- 1997年诞生
- 2015 EcmaScript 2015
- 2016 EcmaScript 2016 (dart语言 vs javascript)
随着前端项目的逻辑越来越复杂和难以维护，前端这边引进了后端的架构思想（ MV* ）
- M Model 数据层
- V View 视图层
- VM ViewModel 视图模型（业务逻辑 VM 是由 P 改名得来的）
- P Presenter 提出者（ Controller 改名得来的）
- C Controller 控制器 ( 业务逻辑 )
架构介绍：
- Backbone.js MVP 2010.10
- Angular.js( 1.0 ) MVC 2010.10
  Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已经更新到了 Angular7 ( 也属于angular2.0 版本 )
- Vue 1.0 MVVVM 2014/07
  Vue 2.0 MVVM 2016/09（正式发布）
- React 2012 不太认可前端MVC这种架构思想，你可以将React单纯看做是MVC中V
- github统计量（国际使用量）不代表大陆地区单位是： K
  angular.js（59.6） angular.ts（49.1） vue（142） React（131）
- 难度： Vue < React < Angular( 2.0 )
前端流行：移动 web && hybird app( 混合app )
- native app ( 安卓 ios java ME)
- webapp ( 应用在浏览器中的app )
  webapp 嵌入第三方原生应用库（可以访问原生设备（手机）的接口权限，比如：照相机）
- Hybird app ( 混合app )

MV*的图示

MVC ——(C改名为P)——> MVP ——(P为连接 M V 的桥梁)——> MVVM
- VM 是由 p改名得来的 VM 和 V 的关系更加的亲密
- “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样
注意：我们以上的这几个框架都是： 单向数据流（数据由父级流向子级）

初始Vue.js

Vue.js是尤雨溪的个人项目
Vue.js是一个MVVM框架
Vue.js也是一个javascript的渐进式框架（越学越难）
前端还有一个比较知名的MVVM的个人项目：司徒正美 avonlon.js

Vue.js使用基础

什么是框架？什么是库
- 框架是有一套自己的生态系统的
- 库是没有自己的生态系统的，它就是一个工具
jsx( javascript + xml )
总结vue.js第一次使用
1. 使用script标签引入Vue.js
2. 实例化全局暴露的变量Vue构造器函数得到一个实例
3. 配置Vue构造器函数中的配置项，一个配置项一个功能
  - el – 将id为app的一部分DOM结构当做模板传入配置项，然后挂载在页面中
  - data – 用来定义数据的
4. 将数据展示在视图中，通过使用双大括号语法（ mustache 语法）来展示数据
5. 这时候我们发现在我们的模板（DOM结构）中可以使用 javascript语法，那么我们把这个类型称之为 ‘jsx语法糖’
6. 当我们将数据修改后发现，视图就会更新，这种情况我们称之为‘ 数据驱动（视图）’
7. Vue使用的是MVVM
8. Vue中 VM改变，那么 V也会改变，反之也是一样的，我们称之为 ‘双向数据绑定’
9. 数据驱动/ 双向数据绑定的原理 / 深入响应式的原理
  - 当我们将数据写在data选项时， Vue会通过observer将data对象中的所有的属性都设置上getter和setter
  - 当我们将数据绑定在视图时，自动触发getter，会将默认值，展示在视图
  - 当我们通过视图修改数据时，会自动触发setter,将数据修改，同时视图也会发生更新

vue.js安装

script标签引入（ cdn| 下载）
模块化安装 npm/cnpm/yarn

Vue.js的初步使用

使用script标签引入会暴露一个 Vue的全局变量
Vue是一个构造器函数

    // new Vue( options )
    var vm = new Vue({
        el: '#app', //el表示我们的实例需要一个模板
        data: { //是用来给实例定义数据的
            msg: 'hello Vue.js'
        }
    })

我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（双大括号），我们将js的语法写在{{}} 里面
new Vue的到的实例，我们这边称之为根实例，根实例也是一个组件
- 组件：组件是一个具有 html css js等的一个聚合体
数据改变，视图就会跟着改变，这种形式我们称之为：数据驱动视图，M -> VM
为什么script标签引入之后，就会有一个全局变量？

    ( function ( global ) {
        console.log( global ) //window对象
        global.Vue = function(){}
    })( this )

为什么模块化引入( npm/cnpm/yarn )也可以？

    //vue使用了 Module.exports / amd
    ( typeof exports ==='object' ) && ( typeof module !== 'undefined' ) ?
    module.exports = factory() // Vue :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.Vue = factory());

看Vue.js源代码
1. 是有匿名函数来进行封装的：( function () {})()
  - 第一个() 是匿名函数的定义
  - 第二个() 是匿名函数调用
2. 匿名函数好处：
  - 安全性高
  - 解决命名冲突

    ( function ( global, factory ) {
        // global 指的全局对象
        // factory 工厂函数
    })( this, function () {})

原型的使用

    function Fn ( options ) {
    //this 实例中 fn的到的结果 实例 var fn = new Fn()
    }
    Fn.protype.name = "Gabriel Yan "
    Fn.protype.init = function () {
        console.log( '功能' )
    }