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中的数据，从而实现对视图的更新。
声明式编程和命令式编程
- 声明式编程： 按照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/[email protected]">script>
<script src="./vue.min.js">script>
NPM
在用Vue创建大型应用的时候推荐使用NPM安装，NPM能够很好地和诸如webpack的打包器配合使用，同时Vue也提供了配套工具来开发单文件组件。下面是一个通过NPM方式使用Vue的案例：
- 打开任务终端，使用 mkdir npm_vue_demo 创建项目目录，通过 cd npm_vue_demo 命令进入到项目根目录
- 使用 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"
}
- 使用 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"
}
}
- 新建一个 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项目的过程：
- 确保已经全局安装了脚手架，如果没有泽需要使用 npm install -g @vue/cli 命令进行下载
- 打开任务终端，通过 vue create vue-cli-demo 的方式创建项目，这里选择默认的方式创建项目
- 使用 cd vue-cli-demo 的命令进入到项目目录
- 使用 npm run serve 的命令运行项目
- 使用谷歌浏览器打开网址访问网页，就可以看到下面的页面：
Hello World
下面通过一个 Hello World 程序了解vue的使用过程：
- 打开任务终端，通过 mkdir hello-world-demo 命令创建项目目录，并通过 cd hello-world-demo 命令进入到目录
- 使用 npm init -y 命令初始化项目
- 使用 npm install vue -S 命令下载vue到本地
- 创建 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>
效果图如下：
Vue Devtools插件
Vue Devtools 插件可以帮助我们在一个 更友好的界面中审查和调试Vue项目 ，它的安装方式如下：
- 首先找到并打开Chrome浏览器的扩展程序的界面
- 打开右上角的开发者模式
- 将插件拖入到空白处
- 安装成功后的效果图
- 此时就可以在访问Vue开发的页面的时候打开开发者工具
- 当看到下面的标签的时候就表示安装成功了
不同构建版本的解释
在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+）： 用于在现代浏览器中通过"