01-VUE
一 VUE
1. VUE2 和 VUE3
VUE2: 稳定; 2016年9月分别, 8年多时间, 200次左右的更新
VUE3: 趋势;
- 性能提升=> 1.2-2倍;
- 内核体积更小=>10kb
- TS支持度更高
- 组合式API,封装复用逻辑
2. VUE概述
vue3:
https://cn.vuejs.org/
vue2:https://v2.cn.vuejs.org/
概念: Vue (读音 /vjuː/，类似于 view) 是一套用于
构建用户界面的渐进式框架。
2.1 构建用户界面
基于数据渲染出用户可以看到的界面
2.2 渐进式
循序渐进, 不一定非得把Vue中左右的API都学完才能开发, 可以学一点开发一点
库: 类似于工具箱, 是一堆方法的集合, 比如: axios, echarts等
框架: 是一套完整的解决方案, 实现了大部分功能, 我们只需要按照一定的规则去编码即可
3. 创建Vue实例
3.1 引入vue – 下载方式
3.2 引入vue方式
3.3. 代码演示
<!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>
4. Vue语法
4.1 插值表达式 {{}}
插值表达式是Vue的模板语法,可以使用插值表达式渲染出Vue提供的数据
表达式: 可以被求值的代码 ; 可以利用表达式进行插值, 渲染到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>插值表达式</title>
</head>
<body>
<!-- 插值表达式: 利用表达式进行数据的渲染 -->
<div id="app">
<!-- 直接渲染 -->
<p>{{nickname}}</p>
<!-- 转大写 -->
<p>{{nickname.toUpperCase()}}</p>
<!-- 拼接字符串 -->
<p>{{nickname+',欢迎光临'}}</p>
<!-- 运算 -->
<p>{{age >= 18 ?'成年':'未成年'}}</p>
<p>{{friend.name}}</p>
<p>{{friend.desc}}</p>
<!-- 错误演示 -->
<!-- 1. 在插值运算符中使用的数据, 必须在data中声明 -->
<!-- <p>{{hobby}}</p> -->
<!-- 2. 支持的是表达式, 而非语句; if, for...-->
<!-- <p>{{if}}</p> -->
<!-- 3. 不能在标签属性中使用{{}}插值, 插值表达式只能在标签内容部分使用 -->
<p title="{{nickname}}">我是p标签</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
nickname: 'Nice',
age: 15,
friend: {
name: 'Lily',
desc: '热爱学习',
},
},
});
</script>
</body>
</html>
4.2 响应式特性
4.2.1 响应式
简单理解: 数据改变, 视图也会变
<body>
<!-- 响应式特性: -->
<div id="app">
<p>{{msg}}</p>
<p>{{count}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 响应式数据-->数据发生变化, 视图会自动更新
msg: 'Hello 山西!!!',
count: 100,
},
});
</script>
</body>
4.2.2 如何访问 和 修改data中的数据
① 访问数据: “实例.属性名”
② 修改数据: “实例名.属性名” = “值”
5. Vue开发插件
网址:
https://chrome.zzzmh.cn/index
