目录
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的指令
