Vue（四）

2024-04-05 11:01:54

1.vue 的特性

vue 框架的特性，主要体现在如下两方面：

①数据驱动视图（ajax从服务器请求回来的内容）

②双向数据绑定

1.1 数据驱动视图

在使用了vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

数据变化会驱动视图的更新，驱动的过程由vue实现

好处：当页面数据发生变化时，页面会自动重新渲染！程序员只要维护好数据

注意：数据驱动视图是单向的数据绑定。数据变化导致页面更新

1.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：

在网页中，form 表单负责采集数据，ajax负责提交数据

好处：开发者不再需要手动操作DOM 元素，来获取表单元素最新的值！

1.3 MVVM（简单的理解，深入得看别的）

MVVM是vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是Model、View 和ViewModel，它把每个HTML 页面都拆分成了这三个部分，如图所示：

在MVVM 概念中：

Model表示当前页面渲染时所依赖的数据源。

View表示当前页面所渲染的DOM 结构。

ViewModel表示vue 的实例，它是MVVM 的核心。

1.4 MVVM 的工作原理

ViewModel 作为MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被VM 监听到，VM 会把变化过后最新的值自动同步到Model 数据源中

2. vue 的版本

vue 的基本使用

1. 基本使用步骤

①导入vue.js 的script 脚本文件

②在页面中声明一个将要被vue 所控制的DOM 区域

③创建vm 实例对象（vue 实例对象）

一些资料提取码1234

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <title>Document</title>
 9 </head>
10 
11 <body>
12   <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
13   <div id="app">{{ username }}</div>
14 
15   <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
16   <script src="./lib/vue-2.6.12.js"></script>
17   <!-- 2. 创建 Vue 的实例对象 -->
18   <script>
19     // 创建 Vue 的实例对象
20     const vm = new Vue({
21       // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
22       el: '#app',
23       // data 对象就是要渲染到页面上的数据
24       data: {
25         username: 'zhangsan'
26       }
27     })
28   </script>
29 </body>
30 
31 </html>