Vue梳理1——Vue2的安装
目录
1——Vue2的安装
1.1 Vue部署开发环境
1.1.1 本地下载Vue.js脚本
1.1.2 引入CDN服务
1.2 Vue的发展历史
2.1 构建用户界面
2.2 渐进式
2.3 开发Vue界面
1——Vue2的安装
概念: Vue (读音 /vjuː/，类似于 view) 是一套用于
构建用户界面的渐进式框架。
1.1 Vue部署开发环境
英文Vue.js官网https://vuejs.org/
Vue3.js
Vue2.js
1.1.1 本地下载Vue.js脚本
在官网下载开发环境JS脚本和生产环境JS脚本
在html页面中引入<script></script>标签
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="../favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>引入开发环境的Vue.js脚本
1.1.2 引入CDN服务
Vue2的开发环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>Vue2的生产环境版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>1.2 Vue的发展历史
VUE2:稳定; 2016年9月分别, 8年多时间, 200次左右的更新
VUE3:趋势
- 性能提升=> 1.2-2倍;
- 内核体积更小=>10kb
- TS支持度更高
- 组合式API,封装复辑
2.1 构建用户界面
基于数据渲染出用户可以看到的界面
2.2 渐进式
循序渐进，不一定非得把Vue中左右的API都学完才能开发, 可以学一点开发一点
库: 类似于工具箱, 是一堆方法的集合, 比如: axios, echarts等
框架: 是一套完整的解决方案, 实现了大部分功能, 我们只需要按照一定的规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>构建第一个vue实例</title>
</head>
<body>
<!--
创建vue实例
1. 准备容器(Vue所管理的范围)
2. 引包(开发版本'生产版本)官网
3. 创建实例 new Vue
4. 添加配置项(el,data), 完成渲染
-->
<!-- 不是vue管理的范围 -->
<div class="box2">box2---{{message}}</div>
<!-- vue所有管理的范围 -->
<div id="app">
<h1>{{message}}</h1>
</div>
<!-- 引入VUE: 开发版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
// 一旦引入vue核心包, 在全局环境中, 有vue的构造函数, 创建vue实例
var app = new Vue({
// 通过el 配置选择器, 指定 vue 管理的哪个盒子
el: '#app',
// 通过 data 提供数据
data: {
message: 'hello 山西!!!',
},
});
</script>
</body>
</html>2.3 开发Vue界面
创建vue实例
1. 准备容器(Vue所管理的范围)
2. 引包(开发版本'生产版本)官网
3. 创建实例 new Vue
4. 添加配置项(el,data), 完成渲染
