3.初识Vue

目录

1  vue 浏览器调试工具

1.1  安装

1.2  配置

2  数据驱动视图与双向数据绑定

3  简单使用

3.1  下载

3.2  将信息渲染到DOM上

4  使用vue浏览器调试工具

5  vue指令

---

1  vue 浏览器调试工具

chrome可能是我浏览器的原因，装上用不了，我们使用Edge

1.1  安装

搜索并获取

1.2  配置

勾选上 允许访问文件URL

然后直接关了就行了

2  数据驱动视图与双向数据绑定

数据驱动视图与双向数据绑定是vue有两个特性

数据驱动视图：当数据改变的时候，显示的元素会自动发生改变

双向数据绑定：当你页面上有个表单的时候，vue可以帮你时时获取数据，双向指的是js的数据会影响HTML，HTML的数据会改变JS中的数据

MVVM是vue实现 数据驱动视图 和 双向数据绑定 的核心原理，MVVM指的是Model,View,ViewModel

View是页面上显示的东西，Model是数据，ViewModel相当于是这两个东西的中介

当数据(Model)发生变化的时候，会通过ViewModel影响页面(View)

当页面(View)发生变化的时候，会通过ViewModel影响数据(Model)

3  简单使用

我们先不使用node,先在html中用

3.1  下载

我们在npm官网搜索vue，拿到dist中的vue.global.js这个文件就可以了

每个版本引入的东西可能不一样，我们可以看文档中的CDN引用哪个，你就引用哪个就行，我使用的是当前（2023/3/10）vue最新的版本3.2.47

• vue官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

3.2  将信息渲染到DOM上

我们用解构赋值的方法拿到Vue中的createApp，然后使用createApp，里面的参数是一个对象，对象中有一个data函数，data函数返回一些信息

之后对createApp使用mount，mount中写选择器(mount的选择器如果覆盖了多个元素，它只会处理第一个)

再之后将{{username}}放到div中

打开页面后发现可以渲染到页面上

4  使用vue浏览器调试工具

在工具检测到vue时会出现vue调试工具，我们选择其中的Root，然后修改username的值

双击就可以修改，修改之后发现页面的内容也随之改变

我们修改的只是数据并没有修改DOM，DOM发生改变验证了数据驱动视图

5  vue指令

vue指令是vue的模板语法，根据不同的用法可以分为六大类

• 内容渲染指令
• 属性绑定指令
• 事件绑定指令
• 双向绑定指令
• 条件渲染指令
• 列表渲染指令

像我们上面用的{{}}就是vue的指令