Vue初步认识

最新推荐文章于 2024-12-10 15:03:26 发布

weixin_45213847

最新推荐文章于 2024-12-10 15:03:26 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Vue

本文链接：https://blog.youkuaiyun.com/weixin_45213847/article/details/93322523

前端专栏收录该内容

23 篇文章

订阅专栏

这篇博客介绍了Vue.js的基础知识，包括前端发展历史、前端框架的时间线，重点讲解了Vue.js的安装方式，指出Vue是一个由尤雨溪创建的MVVM框架，具有单向数据流特性，并提到了其渐进式框架的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue初步认识

Vue官网：https://cn.vuejs.org/

前端发展历史

网址：https://blog.youkuaiyun.com/freekiteyu/article/details/79927047

前端框架时间图

框架            架构        最初发布时间
Backbone        MVP         2010年10月
Angular         MVC->MVVM   2010年10月
react                       2012年
vue1.0          MVVM        2014/07
Vue2.0          MVVM        2016年10月

html

html 1900---->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

    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   MVVM  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          142              131

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

见文件MVC，MVP，MVVM

MVC，MVP 和 MVVM 的图示

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安装

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

使用script标签引入，那么会暴露一个 Vue的全局变量
在bootcdn网站
    Vue是一个构造器函数
    我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（ 双大括号 ）

    我们将js的语法写在{{}} 里面

    new Vue得到的实例，我们这边称之为 根实例

    根实例也是一个组件

    组件： 组件是一个具有 html  css  js等的一个聚合体


    数据改变，视图就会跟着改变，这种形式我们称之为： 数据驱动视图

    M  ->  VM 


    问题： 
      1. 为什么script标签引入之后，就会有一个全局变量呢？

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

      2. 为什么模块化引入( 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 () {})()

        第一个() 是匿名函数的定义

        第二个() 是匿名函数调用

        匿名函数好处：
            1. 安全性高
            2. 解决命名冲突

        ( function ( global, factory ) {
          // global 指的全局对象
          // factory  工厂函数
        })( this, function () {})
        
      2. Vue是如何即可以使用Vue全局变量，也可以模块化安装
      3. 它是利用原型来进行封装的

      4. 原型的使用

        function Fn ( options ) {
          //this   实例中 fn的到的结果   实例     var fn = new Fn()
        }

        Fn.protype.name = "Gabriel Yan "
        Fn.protype.init = function () {
          console.log( '功能' )
        }

  */

  // console.log( Vue )

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="message">
        <p> {{ msg }} </p>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#message',
        data:{
            msg:'hello js'
        }
    })
</script>
</html>