初识Vue.js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31435455/article/details/146167887

文章标题,强烈建议填写此选项

title: “1. 初识Vue.js”

发布时间,强烈建议填写此选项,且最好保证全局唯一

date: 2022-04-02

分组名

categories:

E-BOOKS

Tag标签

tags:

E-BOOKS
VueActualCombat
Article_1-Based_Vue.js

1.1 Vue.js是什么？

vue 官方文档中是这样介绍它的。

简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
简单小巧是指Vue.js压缩后大小仅有17KB。
所谓渐进式(Progressive),就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。随着本书的不断介绍,你会深刻感受到这一点 ,这也正是开发者热爱Vue.js的主要原因之一。
使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能,比如:
- 解辑视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM(Virtual DOM)

1.1.1 MWM 模式

与知名前端框架Angula、Ember等一样,Vue.js在设计上也使用MVVM (Model-View-ViewModel)模式。

MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定(tdata-binding)建立联系,如图所示:

1.1.2 Vue.js有什么不同

如果你使用过JQuery,那你一定对操作DOM、绑定事件等这些原生JavaScript 能力非常熟悉；比如我们在指定DOM中插入一个元素,并给它绑定一个点击事件：

  if (showBtn) {
    let button = $('<button>按钮</button>')
    button.on('click', function() {
      console.log('我被点击了')
    })
    $('#app').append(button)
  }

这段代码不难理解,操作的内容也不复杂,不过这样让我们的视图代码和业务逻辑紧藕合在一起,随着功能不断增加,直接操作DOM会使得代码越来越难以维护。

而Vue.js通过MVVM的模式拆分为视图与数据两部分,并将其分离。因此,你只需要关心你的数据即可, DOM的事情Vue.js会帮你自动搞定,比如上面的示例用Vue.js可以改写为:

  <body>
    <div id="app">
      <button v-if=”showBtn ” v-on:click="handleClick"”">按钮</button>
    </div>
  </body>
  <script>
    new Vue ({
      el :'#app',
      data : {
        showBtn: true
      },
      methods: {
        handleClick() {
          console.log('我被点击了')
        }
      }
    })
  </script>

提示：暂时还不需要理解上述代码,这里只是快速展示Vue.js的写法,在后面的章节会详细介绍每个参数的用法

1.2 如何使用Vue.js

每一个框架的产生都是为了解决某个具体的问题。在正式开始学习Vue.js前,我们先对传统前端开发模式和Vue.js的开发模式做一个对比,以此了解Vue.js产生的背景和核心思想。

1.2.1 传统的前端开发模式

前端技术在近几年发展迅速,如今的前端开发己不再是10年前写个HTML和CSS那样简单了,新的概念层出不穷,比如：ECMAScript、Node.js、NPM、Yarn等前端工程化,这些新东西不断优化了我们的开发模式,改变了我们的编程思想；

随着这些技术的普及,这套可称为“万金油”的技术技被许多商业项目用于生产环境：

JQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) +Gulp (Grunt)

这套技术战以JQuery为核心,能兼容绝大部分浏览器,这是很多企业比较关心的,因为他们的客户很可能还在用IE7及以下浏览器,使用EquireJS或SeaJS进行模块化开发可以解决代码依赖混乱的问题,同时便于维护及团队协作。使用轻量级的前端模板（如doT）可以将数据与HTML模板分离,最后,使用自动化构建工具（如 Gulp ）可以合并压缩代码,如果你喜欢写Less、Sass以及现在流行的ES6,也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式,由于它的简单高效、实用,至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移,出现了更复杂的业务场景,比如SPA(单页面富应用)组件解耦等。为了提升开发效率,降低维护成本,传统的前端开发模式己不能完全满足我们的需求,这时就出现了如Angular、React以及我们要介绍的主角Vue.js。

1.2.2 Vue.js的开发模式

Vue.js是一个渐进式的JavaScript框架,根据项目需求,你可以选择从不同的维度来使用它,如果你只是想体验Vue.js带来的快感,或者开发几个简单的HTML页面或小应用,你可以直接通过Script加载CDN文件,例如:

  <!--自动识别最新稳定版本的Vue.js-->
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <!--指定某个具体版本的Vue.js -->
  <script src= "https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

两种版本都可以,如果你不太了解各版本的差别,建议直接使用最新的稳定版本。当然,你也可以将代码下载下来,通过自己的相对路径来引用。引入Vue.js框架后,在body底部使new Vue()的方式创建一个实例。这就是Vue.js最基本的开发模式。现在可以写入以下完整的代码来快速体验Vue:

  <!DOCTYPE html> 
  <html>
    <head>
      <meta charset="utf-8">
      <title>Vue示例</title>
    </head>
    <body>
      <div id="app">
        <ul>
          <li v-for="(book,index) in books" :key="index" >{{ book.name }}</li>
        </ul>
      </div>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <script>
        new Vue ({
          el :"#app",
          data : {
            books: [
              { name: '《Vue.js实战》'},
              { name: '《JavaScript高级程序设计》'}
            ]
          } 
        })
      </script>
    </body>
  </html>

在浏览器中访问它,会将图书列表循环显示出来,如下图

Vue示例

对于一些业务逻辑复杂,对前端工程有要求的项目,可以使用Vue单文件的形式配合webpack使用,必要时还会用到Vuex来管理状态,vue-router来管理路由。这里提到了很多概念,目前还不必去过多了解,只是说明Vue.js框架的开发模式多样化,后续章节会详细介绍,到时就会对整个Vue生态有所了解了。

了解了Vue.js的开发模式后,相信你已经迫不及待地想开启Vue的大门了。下一章,我们就接进入话题,创建第 Vue 应用…