1. Vue导入
最简单的方式，通过联网接入Vue3的接口
<script type="text/javascript" src="https://unpkg.com/vue@3"></script>2. Vue实例
2.1 创建Vue实例
const vm = Vue.createApp({})使用Vue中的createApp方法创建对应实例，其中以对象的形式{}进行自定义
2.2 Vue实例挂载
<div id='information'>
<p></p>
</div>vm.mount('选择器')需要将Vue实例搭载在对应标签上，标签及对应的子标签都会被Vue实例所涵盖
请注意，内嵌属性中想要运用Vue内容，需要使用“”，冒号中的变量对应Vue中的内容
3. 数据代理
3.1 MVVM模型
了解数据代理需要先了解MVVM模型，是数据代理的底层逻辑
MVVM模型
- M：模型，存储在内部中的数据
- V视图，模版代码，需要向用户展示的窗口
- VM：视图模型，通过VM，将我们的M展示在V中
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="information">
<p>Name:{{name}}</p>
<p>Age:{{age}}</p>
</div>
<script>
const vm = Vue.createApp({
data(){
return{
name:'Ricardo',
age:22
}
}
})
vm.mount('#information')
</script>
</body>
</html>在Vue3中数据代理是 Vue 的响应式系统的核心机制。当数据发生变化时自动更新视图。数据代理的目的是使开发者能轻松操作数据并与界面保持同步，而不需要手动更新视图。
在常规Javascript中，开发者常常需要手动获取Dom的标签解析其中数据，之后再改变对应数据再传入至文档中，Vue则可以实现快速完成数据的更替工作
-此处引用B站教程尚硅谷教学视频截图
Vue将用户所创建的data对象引入给内部$data(Vue3)，从而保存对应内容的数值
3.2 数据
创建一个data函数，返回我们所需要的数据对象内容，数据对象内容中可以继续嵌套数据对象
data(){
return {
name:'Louis',
age:22
}
}data 是一个对象而不是函数，所有实例会共享同一个数据对象，导致数据污染。
使用data函数确保每次创建组件实例时，都会返回一个新的数据对象，使每个实例的状态彼此独立。
3.3 插值表达式
用于将 JavaScript 表达式的值动态插入到 HTML 模板中，Vue 会在模板编译时将插值表达式解析，并将相应的结果渲染到页面上。
{{相关变量名}} //插值3.4 指令语法
""中的值对应的是存储在Vue中data的数据
• 单向绑定属性
v-bind:
<a v-bind:href='webpage'></a>
或者使用缩写形式
<a :href='webpage'></a>可以对标签内部属性进行自定义，达到快速更改的效果，单向绑定只可以data流向页面
• 双向绑定属性
v-model:
<a v-model:href='webpage'></a>双向绑定顾名思义，data可以流向页面，页面对相关属性进行修改之后，所对应Vue实例中的数据也会被修改
4. 事件处理
4.1 事件对象
事件对象，事件发生之后默认返回一个事件对象，其中包含了许多与当前事件相关的信息，比如哪个元素触发了事件、事件类型、鼠标位置等
在Vue中，使用v-on监听时间，并调用对应方法
<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>
不含（）函数输入默认参数为事件对象
4.2 键盘事件
4.2.1 基本键盘事件
keydown：按下键盘触发
<input @keydown="方法名" placeholder="提示">keyup：松开键盘时触发
<input @keyup="方法名" placeholder="">4.2.2 键位修饰符
对于特定的键位进行事件绑定
<input type="text" @keyup.enter="onEnter" placeholder="按回车提交">| 键位修饰符 | 描述 |
| .enter | 回车键 |
| .delete | 删除键 |
| .esc | Escape键 |
| .up | 上方向键 |
| .down | 左方向键 |
| .space | 空格键 |
4.3 Vue方法
vue对象中使用methods去定义对象内的方法，函数与正常定义函数语法一致
methods:{
display(){
alert('Hello world')
}
}display()自动传入vm实例，可以任意读取vm中的data
vm.name = xx
4.4 事件修饰符
Vue提供了一系列修饰符来简化常见的事件处理逻辑
| 修饰符 | 作用 | 事例 |
| .stop | 阻止事件冒泡，针对于子标签中的事件，父标签中设定stop不会进行冒泡调用 | @click.stop='' |
| .prevent | 阻止默认行为 | @click.prevent='' |
| .capture | 使用事件捕获模式，以此从上到下执行 | @click.capture='' |
| .self | 只有在当前元素触发事件才会执行 | @click.self='' |
| .once | 事件处理器只执行一次 | @click.once='' |
| .passive | 事件默认行为立即执行，无需等待时间 | @click.passive='' |
5. 参考资料
B站尚硅谷教学视频
