文章目录
- [一，MVVM 思想](#一，MVVM 思想)
- [二，Vue 简介](#二，Vue 简介)
- 三，第一个Vue项目
-
- [1 新建项目](#1 新建项目)
- [2 安装依赖](#2 安装依赖)
- [3 使用Vue](#3 使用Vue)
这一节的主要内容是演示Vue的简单使用。
一，MVVM 思想
- M：即 Model，模型，包括数据和一些基本操作
- V：即 View，视图，页面渲染结果
- VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）
在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。
当视图改变后，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。
MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：
- 只要我们 Model 发生了改变，View 上自然就会表现出来。
- 当用户修改了 View，Model 中的数据也会跟着改变。
把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。
直接操作DOM的示例
假设我们有一个简单的计数器应用，我们希望每次点击按钮时，页面上显示的数字增加1。
html
<!-- index.html -->
<div id="app">
<p>Count: <span id="count">0</span></p>
<button id="increment">Increment</button>
</div>
<script>
document.getElementById('increment').addEventListener('click', function () {
var countElement = document.getElementById('count');
var currentCount = parseInt(countElement.textContent, 10);
countElement.textContent = currentCount + 1;
});
</script>在这个例子中，直接通过getElementById获取DOM元素，并在事件处理器中修改这些元素的内容。虽然这种方法简单直观，但在复杂的用户界面和状态管理中，它容易导致代码冗长且难以维护。
使用Vue和MVVM的示例
同样的计数器应用，使用Vue框架和MVVM模式，代码看起来会更简洁且易于理解：
html
<!-- index.html -->
<div id="app">
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment: function () {
this.count++;
}
}
});
</script>在这个Vue版本的示例中，不再直接操作DOM，而是通过定义data属性和methods来描述应用的状态和行为。Vue框架负责监听状态变化并自动更新视图，这使得代码更加简洁，逻辑更加清晰，也更容易扩展和维护。
MVVM与DOM操作的主要区别
-
数据绑定：在MVVM模式下，数据和视图之间是双向绑定的，数据的更改会自动反映在视图上，反之亦然。而在直接操作DOM的情况下，你需要手动更新DOM以反映数据的变化。
-
代码结构：MVVM模式鼓励将数据、逻辑和视图分开，这使得代码更加模块化和可测试。直接操作DOM往往会导致代码混合在一起，增加理解和维护的难度。
-
性能优化：Vue等MVVM框架通常会缓存和批处理DOM更新，从而提高性能。直接操作DOM可能需要更多的CPU资源，尤其是在频繁更新DOM的情况下。
综上所述，虽然直接操作DOM在某些简单场景下可能是合适的，但在构建复杂和动态的Web应用时，MVVM模式和Vue这样的框架提供了更高效、更优雅的解决方案。
二，Vue 简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
总之，Vue能简化前端开发，提升开发效率。
官网：https://cn.vuejs.org/
参考：https://cn.vuejs.org/v2/guide/
Git 地址：https://github.com/vuejs
三，第一个Vue项目
1 新建项目
新建文件夹vue2并在vscode中打开，因为我们要使用npm对前端工程进行管理，所以使用下面的命令初始化项目：
clike
npm init -y初始化完成后，在工程根目录下会自动生成一个文件package.json。
2 安装依赖
执行如下命令安装vue依赖。
clike
npm install vue@^2安装完成后，会在工程根目录下多出一个node_modules的文件夹。
在packag.json文件中新增了关于vue的依赖声明。
3 使用Vue
第一步，在工程根目录下，创建index.html文件。
第二步，引入vue。
clike
<script src="./node_modules/vue/dist/vue.js"></script>第三步，创建一个简单的view。
clike
<div id="app">
<h1>{{name}}，非常帅</h1>
</div><div id="app">：这是一个普通的HTML<div>元素，用作Vue应用的根元素。Vue实例将挂载到这个元素上。<h1>{``{name}}，非常帅</h1>：这是一个标题元素，其中包含一个插值表达式{``{name}}。插值表达式是Vue中用于数据绑定的一种方式，它允许你将数据模型中的值渲染到DOM中。
插值表达式 {``{name}}：
{``{ }}是Vue的插值语法，用于将变量的值插值到模板中。name是一个变量名，它代表Vue实例中的数据属性。在这个例子中，name应该是一个在Vue实例中定义的属性。
第四步 ，在script标签中创建Vue实例
JavaScript中创建一个Vue实例，并将其挂载到具有 id="app" 的元素上。
clike
new Vue({
el: '#app',
data: {
name: '张二强'
}
});el属性指定了Vue实例应该挂载的元素。data属性是一个对象，定义了Vue实例的数据属性。在这个例子中，name是一个数据属性，它的值将被渲染到模板中。
渲染结果
完整代码
clike
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}，非常帅</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: "张二强"
}
})
</script>
</body>
</html>