01-Vue基础学习笔记---VueJS介绍

01-VueJS介绍

  • VueJS基础
    • Vue.js是什么
    • 分析MVVM模型
    • 声明式编程和命令式编程
  • 安装VueJS
    • 直接使用script标签引入
    • NPM
    • 命令行工具
  • Hello World
  • Vue Devtools插件
  • 不同构建版本的解释
    • 运行时 + 编译器 vs 只包含运行时
    • 开发环境 VS 生产环境模式

VueJS基础

Vue.js是什么

  Vue是一套 用于构建用户界面的渐进式框架 ,被设计为 自底向上逐层应用

  • 可以和传统网站开发架构融合在一起,例如:可以简单地把它当作一个类似jQuery库
  • 可以使用Vue全家桶框架来开发大型的单页面应用程序

  使用Vue.js是因为它有下面的特点:

  • 体积小、编码简单优雅、运行效率高、用户体验好
  • 无DOM操作、能够提高网站应用程序的开发效率

  Vue.js主要应用在以下场景:

  • 单页面应用程序
  • 因为是渐进式的,可以融入到不同的项目中,即插即用

注意: Vue不支持IE8及以下版本浏览器,因为Vue使用了IE8无法模拟的ECMAScript5的特性。

分析MVVM模型

   MVVM(Model-ViewModel) 是一种软件架构的风格:

  • Model: 模型,数据对象(Vue的data选项)
  • View: 视图,模板页面(用于渲染数据)
  • ViewModel: 视图模型,其实本质就是Vue实例

  MVVM的思想是通过 数据驱动视图 ,把需要改变视图的数据初始化到Vue中,然后再通过修改Vue中的数据,从而实现对视图的更新。

01-Vue基础学习笔记---VueJS介绍_第1张图片

声明式编程和命令式编程

  • 声明式编程: 按照Vue的特定语法进行声明式开发就可以实现对应功能,不需要直接去操作DOM元素
  • 命令式编程: 需要手动去操作DOM才能实现对应的功能(如:jQuery)

安装VueJS

直接使用script标签引入

  使用Vue.js最简单的方法是直接创建一个html文件,然后通过 script标签直接引入vue.js


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11">script>


<script src="./vue.min.js">script>

NPM

  在用Vue创建大型应用的时候推荐使用NPM安装,NPM能够很好地和诸如webpack的打包器配合使用,同时Vue也提供了配套工具来开发单文件组件。下面是一个通过NPM方式使用Vue的案例:

  1. 打开任务终端,使用 mkdir npm_vue_demo 创建项目目录,通过 cd npm_vue_demo 命令进入到项目根目录
  2. 使用 npm init -y 命令初始化项目,这时候会生成一个 package.json 文件
{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  1. 使用 npm install vue -S 下载vue到本地,这个时候对多出一个 node_modules 目录和 package-lock.json 的文件,并且 package.json 文件也发生了变化:
{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12"
  }
}
  1. 新建一个 index.html 的文件,在该文件中引入vue.js文件:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>npm_vue_demotitle>
head>
<body>
    
    <script src="./node_modules/vue/dist/vue.min.js">script>
body>
html>

命令行工具

  Vue提供了一个官方的 CLI 来实现快速搭建单页面应用(SPA)的脚手架,只需要几分钟的时间就可以运行起来带有热重载、保存时lint校验以及生产环境可用的构建版本。下面看一个脚手架创建Vue项目的过程:

  1. 确保已经全局安装了脚手架,如果没有泽需要使用 npm install -g @vue/cli 命令进行下载
  2. 打开任务终端,通过 vue create vue-cli-demo 的方式创建项目,这里选择默认的方式创建项目
    01-Vue基础学习笔记---VueJS介绍_第2张图片
  3. 使用 cd vue-cli-demo 的命令进入到项目目录
  4. 使用 npm run serve 的命令运行项目
  5. 使用谷歌浏览器打开网址访问网页,就可以看到下面的页面:
    01-Vue基础学习笔记---VueJS介绍_第3张图片

Hello World

  下面通过一个 Hello World 程序了解vue的使用过程:

  1. 打开任务终端,通过 mkdir hello-world-demo 命令创建项目目录,并通过 cd hello-world-demo 命令进入到目录
  2. 使用 npm init -y 命令初始化项目
  3. 使用 npm install vue -S 命令下载vue到本地
  4. 创建 index.html 文件:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorldtitle>
head>
<body>
    
    <div id="app">
        
        {{ message }}
    div>
    
    <script src="./node_modules/vue/dist/vue.min.js">script>
    <script>
        // 创建Vue实例对象
        new Vue ({
            // 通过该选项制定挂载对家
            el: '#app',
            // 通过该选项绑定数据
            data: {
                message: 'Hello Wolrd'
            }
        })
    script>
body>
html>

  效果图如下:

01-Vue基础学习笔记---VueJS介绍_第4张图片

Vue Devtools插件

  Vue Devtools 插件可以帮助我们在一个 更友好的界面中审查和调试Vue项目 ,它的安装方式如下:

  1. 首先找到并打开Chrome浏览器的扩展程序的界面

  1. 打开右上角的开发者模式

在这里插入图片描述

  1. 将插件拖入到空白处

01-Vue基础学习笔记---VueJS介绍_第5张图片

  1. 安装成功后的效果图

  1. 此时就可以在访问Vue开发的页面的时候打开开发者工具

  1. 当看到下面的标签的时候就表示安装成功了

在这里插入图片描述

不同构建版本的解释

  在NPM包的 dist目录 ,你将会看到很多不同的vue.js构建版本:

UMD CommonJS ES Module(基于构建工具使用) ES Module(直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
完整版(生产环境) vue.min.js - - vue.esm.browser.min.js
只包含运行时版(生产环境) vue.runtime.min.js - - -
  • 完整版: 同时包含编译器和运行时的版本
  • 编译器: 用来将模板字符串编译为JavaScript渲染函数的代码
  • 运行时: 用来创建Vue实例、渲染并处理虚拟DOM等的代码,基本上就是除去编译器的其它的一切
  • UMD: UMD版本可以通过script标签直接使用在浏览器中
  • CommonJS: 该版本用来配合老的打包工具,比如:Browserify或者webpack1,这些工具的默认文件(pkg.main)是只包含运行时CommonJS版本
  • ES Module: 从2.6开始Vue会提供两个ES Module(ESM)构建文件
    • 为打包工具提供的ESM: 为诸如webpack2和Rollup提供的现代化打包工具。ESM格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行"tree-shaking"并将用不到的代码排除最终的包。为这些打包工具提供了默认文件(pkg.module)是只有运行时的ES Module构建(vue.runtime.esm.js)
    • 为浏览器提供的ESM(2.6+): 用于在现代浏览器中通过"