单元一 vue.js 数据的绑定
学习目标
（1）插值
（2）绑定表达式
任务一 插值
1.1任务描述
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。
1.2任务实施
1.2.1文本插值
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vue入门之数据绑定</title><!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> --></head><body><span>Message :{{msg}}</span></body></html>运行效果：
Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。可以只处理单次插值，数据变化就不会再引起插值更新了：
<span>This will never change :{{*msg}}</span>
1.2.2原始HTML插值
使用 v-html 指令可以将数据当作原始 HTML 进行渲染。
<div id="app"><div v-html="htmlContent"></div></div><script>var app = new Vue({el: '#app',data: {htmlContent: '<h2>这是一段通过 v-html 渲染的标题</h2>'}});</script>
1.2.3属性插值
可以使用 v-bind 指令（缩写为 :）来进行属性插值，将数据绑定到 HTML 元素的属性上。
<div id="app"><img :src="imageSrc" :alt="imageAlt"></div><script>var app = new Vue({el: '#app',data: {imageSrc: 'C:/Users/31639/Pictures/屏幕截图 2024-09-22 161016 - 副本.png',imageAlt: '示例图片'}});</script>这段代码里面的img 元素的 src 和 alt 属性分别绑定了 Vue 实例中的 imageSrc 和 imageAlt 数据，从而正确地显示图片并设置替代文本。
任务二 绑定表达式
2.1任务描述
在 Vue 中，使用双大括号 {{ }} 语法来进行数据绑定，绑定的内容可以是各种合法的 JavaScript 表达式
2.2任务实施
<div id="app">{{ msg + ' - ' + name }}<p>{{ isOk ? '123' : '456' }}</p><p>我的年龄是： {{ age *2 }}</p></div><script>var app = new Vue({ el: '#app', data: { msg: 'Hi', name: 'flydragon',isOk: true,age: 18}});</script>运行效果：
解析:
{{ msg + ' - ' + name }} ：是将 msg 和 name 这两个数据属性进行字符串拼接，属于表达式绑定，把拼接后的结果渲染到对应的 DOM 位置。
{{ isOk? '123' : '456' }} ：是一个三元表达式，根据 isOk 的布尔值情况来决定渲染 123 还是 456，也是表达式绑定的体现。
{{ age * 2 }} ：是对 age 数据属性进行数值运算（乘以 2），然后将运算结果展示出来，属于表达式绑定。
然而，vue提供非常好的绑定表达式的方法，但只能应对低强度的需求。如果我们想把一个日期按照规定格式化输出，。这时候表达式就实现不了了。Vue对象提供了computed的属性，可以在里面放置一些方法，协助绑定操作，使用是和data中的属性一样，方法用的时候不用加括号（）下面来演示操作一下:
<div id="app"><table><tr><td>生日</td><td>{{ getBirthday }}</td></tr><tr><td>年龄</td><td>{{ age }}</td></tr><tr><td>地址</td><td>{{ address }}</td></tr></table></div><script>var app = new Vue({el: '#app',data: {birthday: 914228510514, // 这是一个日期对象的值：1998年11月1日age: 19,address: '北京昌平区龙泽飞龙'},computed: {// 把日期换成 常见规格格式的字符串。getBirthday: function () {var m = new Date(this.birthday);return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';}}});</script>
单元二 vue.js的事件处理
学习目标
（1）监听事件
（2）事件修饰符
（3）按键修饰符
任务一 监听事件
1.1 任务描述
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
事件处理器 (handler) 的值可以是：
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
1.2任务实施
在 Vue.js 中，你可以使用 v-on 指令（通常缩写为 @）来监听 DOM 事件。例如，如果你想在用户点击一个按钮时执行某些操作，可以这样写
<button @click="counter += 1">增加</button>
1.2.1事件类型
click：单击事件，当组件被单击时触发。
dblclick：双击事件，当组件被双击时触发。
focus：获取焦点事件，例如输入框开启编辑模式时触发。
blur：失去焦点事件，例如输入框结束编辑模式时触发。
change：元素内容改变事件，输入框结束输入后，如果内容有变化，就会触发此事件。
select：元素内容选中事件，输入框中的文本被选中时会触发此事件。
mousedown：鼠标按键被按下事件。
mouseup：鼠标按键抬起事件。
mousemove：鼠标在组件内移动事件。
mouseout：鼠标移出组件时触发。
mouseover：鼠标移入组件时触发。
keydown：键盘按键被按下。
keyup：键盘按键被抬起。
1.2.2 内联事件处理器
在src文件夹里的components创建vue文件，文件名一定是驼峰式，比如ForDemo再在App.vue里面写入
<script setup>import ForDemo from "./components/ForDemo.vue"</script><template><ForDemo/></template>写完之在创建的文件中写入运行的内容
<script setup>import { ref } from 'vue'const counter = ref(0)</script><template><div id="app"><button @click="counter++">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div></template>先Ctrl+s保存，在终端里面输入npm run serve 运行，在http://localhost:8080/网页链接中进行查看
运行效果:
add
1.2.3方法事件处理器
与data并列的methods,中写入方法,通过this.数据名的方式拿到data中的数据.
<template><h3>方法事件处理</h3><button @click="addCount">add</button><div>{{ count }}</div></template><script>export default {data() {return {count: 0,};},methods: {addCount() {//读取data中的数据方法 this.countthis.count++;},},};</script>学到东西
