Vue介绍
# Vue介绍
# 简介
Vue的全称是Vue.js，它是一款用于构建用户界面的渐进式JavaScript框架。Vue以其轻量、易学、灵活的特性，成为前端开发中最受欢迎的框架之一。
"渐进式"指的是可以按需、分阶段地使用框架功能，而不必一次性引入全部特性。可以只引入核心库实现简单的交互，也可以在项目规模扩大、需求变得复杂时，逐步加入所需的模块。
Vue.js官网：https://cn.vuejs.org/
# 核心特性
声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。
响应式数据绑定：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM，开发者无需手动操作DOM。
组件化开发：将UI拆分为独立的组件，每个组件拥有自己的模板、逻辑和状态，便于复用、维护和组。
# API风格
组合式API：Vue3新增的风格，建议使用。
选项式API：Vue2中使用。
两种方式实现的功能都是一样的，只是写法不同、组织代码的方式不同。
# M-V-VM架构
Vue 采用M-V-VM这一软件架构模式，把**模型(Model)**、**视图(View)与视图模型(ViewModel)**三层进行明确划分，从而实现数据与界面的自动同步。
Model层：负责存储业务数据和业务逻辑。
业务数据是在业务流程中被读取、修改的实际数值，一般是JavaScript变量(响应式对象)。
业务逻辑是对业务数据进行增删改查、计算、请求等操作的JavaScript代码。
View层：负责UI的展示，渲染HTML、CSS。
Vue文件中的Template模板部分。
ViewModel层：介于Model与View之间充当桥梁，负责通过响应式系统(Model → View)和指令/事件绑定(View → Model)，来实现页面与数据的实时双向同步。
页面与数据的同步，指的是页面发生改变时数据也会跟着改变，反之一样，这是由Vue框架来帮助我们更新页面或数据，无需我们手动操作DOM。
# 使用方式
第一种方式：基本使用，直接通过 <script src="vue.js文件的CDN路径或本地路径"></script> 引入Vue核心文件。
第二种方式：通过创建Vue项目的方式使用Vue，需要Node.js环境。
# 使用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue测试页面</title>
<!-- 引入Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Vue2：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> -->
</head>
<body>
<!-- 页面内容都放到一个标签即可，便于Vue挂载生效 -->
<div id="app">
<!-- 使用插值语法"{{ }}"渲染页面 -->
<h2>名字是：{{name}}</h2>
<h2>年龄是：{{age}}</h2>
</div>
</body>
<script>
// ======== Vue3 组合式 ========
// 解构赋值，从全局Vue对象中导入createApp、ref两个API
const {createApp, ref} = Vue
// 创建一个Vue实例，参数是一个组合式API
createApp({
// 组合式API的入口函数，此处用于声明响应式数据并返回给模板使用
setup() {
// 创建一个响应式引用'name'，初始值为'hello'
const name = ref('hello')
// 创建一个响应式引用'age'，初始值为18
const age = ref(18)
// 返回一个对象，里面的属性会提供给模板或其他组合式函数使用
return {
name, age
}
}
// 将Vue应用挂载到指定标签上，以完成渲染和双向同步
}).mount('#app')
/*
======== Vue3 选项式 ========
const {createApp} = Vue
createApp({
data() {
return {
name: "hello",
age: 18
}
}
}).mount('#app')
*/
/*
=========== Vue2 ===========
// 创建一个Vue对象
var vm=new Vue({
// 选择到指定标签
el:'app',
// 定义会映射到模板的数据
data:{
name:'hello',
age:18
}
})
*/
</script>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# Vue插值语法
# 介绍
插值语法是Vue模板中最常用的数据绑定方式，它通过双大括号 把JavaScript表达式的计算结果直接渲染到HTML中。
插值语法支持传入变量、数组、对象、JS表达式、函数、方法等。
# 使用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue测试页面</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>渲染字符串：{{name}}</p>
<p>渲染数字：{{age}}</p>
<p>渲染数组：{{lists}} -> {{lists[1]}}</p>
<p>渲染对象：{{obj}} -> {{obj.name}} & {{obj['age']}}</p>
<p>渲染标签字符串：{{links}}</p>
<p>渲染JS表达式：{{9 + 9}}</p>
<p>渲染JS表达式：{{age + 9}}</p>
<p>渲染JS表达式：{{name + '_world'}}</p>
<p>渲染三元运算符：{{age >= 18 ? "成年" : "未成年"}}</p>
<p>渲染JS函数：{{func()}}</p>
</div>
</body>
<script>
function hello() {
return "hello"
}
const {createApp, ref} = Vue;
// ref()对象会赋予数据响应式特性，通过"ref对象.value"修改数据会实时响应到标签中
const name = ref('hello');
const age = ref(16);
createApp({
setup() {
return {
name, age,
lists: ['张三', '李四', '王五'],
obj: {name: 'world', age: 16},
links: '<a href="https://www.baidu.com/">百度一下</a>',
func: hello
}
}
}).mount("#app")
// age的数据变化会实时同步到视图
age.value = 999
console.log(age > 100 ? "超100岁了" : "年级还小，继续努力")
</script>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46