整个文件的结构
这是一个 HTML 文件，里面包含三大部分：
-
<body>里面的可见内容（输入框和显示结果的地方） -
<script>里的 JavaScript 代码（负责逻辑运算） -
还有一行隐藏的
<script src="...">（用来加载 Vue 这个工具库）
现在开始逐行解读。
第1行：<body>
这是 HTML 的 body 标签，网页上所有能看到的东西都写在这里面。
第2行：<div id="app">
创建一个 div 容器，给它起个名字叫 app（id 就是身份证号）。后面 Vue 会找到这个容器，并把所有功能绑定到这里。
第3行：<input type="text" v-model="inputValue">
-
<input type="text">：在页面上画一个输入框，你可以往里面打字。 -
v-model="inputValue"：这是 Vue 的特殊写法。它的意思是：输入框里输入的内容，会自动保存到一个名叫inputValue的变量里；反过来，如果inputValue的值变了，输入框里显示的字也会跟着变。这叫“双向绑定”。
第4行：<p>{{ result }}</p>
-
<p>是一个段落标签，用来显示一段文字。 -
{{ result }}是 Vue 的插值语法。它表示：在这里显示一个名叫result的变量的值。这个result的值会随着你的输入自动变化。
第5行：</div>
结束 div 容器。
第6行：<script>
开始写 JavaScript 代码。
第7行：Vue.createApp({
-
Vue是一个全局对象，代表 Vue 这个工具库。 -
.createApp({})是 Vue 提供的一个方法，意思是“创建一个 Vue 应用程序”。花括号{}里面放的是这个应用的各种配置。
第8行：data() {
-
data是一个函数，专门用来定义这个应用里需要用到的数据（变量）。 -
注意：这里的
data必须写成函数形式，不能直接写data: {}，这是 Vue 的规定。
第9行：return {
-
return表示把这个对象返回出去，对象里面就是所有数据的初始值。
第10行：inputValue: '',
-
定义一个变量叫
inputValue，初始值是空字符串''。这个变量对应输入框里的内容。
第11行：answer: Math.floor(Math.random() * 100) + 1
-
定义另一个变量叫
answer，它的值是一个随机生成的数字。 -
Math.random()生成一个 0 到 1 之间的小数（比如 0.2345）。 -
* 100把它放大到 0 到 99.999… 之间。 -
Math.floor(...)向下取整，去掉小数部分，得到 0 到 99 之间的整数。 -
+ 1让它变成 1 到 100 之间的整数。 -
所以
answer就是一个 1 到 100 之间的随机整数，每次刷新页面都会变。
第12行：}
结束 return的对象。
第13行：},
结束 data函数。
第14行：computed: {
-
computed是 Vue 里的“计算属性”。它里面定义的每个函数，结果会被缓存起来，只有当依赖的数据发生变化时才会重新计算。 -
这里只定义了一个计算属性，叫
result。
第15行：result() {
-
定义一个名为
result的函数。这个函数的返回值会显示在页面的{{ result }}处。
第16行：const input = parseInt(this.inputValue)
-
this.inputValue指的是上面data里定义的inputValue变量（就是你输入的文字）。 -
parseInt(...)是一个内置函数，尝试把字符串转换成整数。例如parseInt("50")得到 50，parseInt("abc")得到 NaN（Not a Number，不是数字）。 -
把转换后的结果存到一个新变量
input里。
第17行：if (isNaN(input) || input < 0 || input > 100) {
-
isNaN(input)检查input是不是“不是一个数字”。如果是 NaN，说明你输入的不是有效数字。 -
||是“或者”的意思。 -
input < 0检查是否小于 0。 -
input > 100检查是否大于 100。 -
只要满足以上任何一个条件，就执行下面的大括号里的代码。
第18行：return '请输入一个0~100之间的数字'
-
返回这句话，显示在页面上。后面的代码就不会再执行了。
第19行：} else {
-
如果上面的条件不成立（即输入是有效的 0~100 之间的数字），就进入 else 分支。
第20行：if (input > this.answer) {
-
比较你猜的数字
input和正确答案this.answer。 -
如果猜的数字比正确答案大，就执行下一行。
第21行：return '你猜的数字太大了'
第22行：} else if (input < this.answer) {
-
否则如果猜的数字比正确答案小，就执行下一行。
第23行：return '你猜的数字太小了'
第24行：} else {
-
剩下的唯一可能就是相等。
第25行：return '恭喜你猜对了'
第26行：}
结束内层 if-else。
第27行：}
结束外层 if-else。
第28行：}
结束 result函数。
第29行：}
结束 computed对象。
第30行：}).mount('#app')
-
mount('#app')告诉 Vue：“去找到页面上 id 为app的那个元素（就是我们的 div），然后把整个应用挂载上去，让它生效。”
第31行：</script>
结束 script 标签。
第32行：</body>
结束 body 标签。
额外的一行（通常写在 head 或 body 末尾）
在实际运行前，还需要引入 Vue 的库文件，像这样：
html
html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
这行代码的作用是下载并加载 Vue 这个工具，这样后面的 Vue.createApp才能认识并使用。没有这一行，代码会报错。
整体流程总结
-
页面加载时，Vue 启动，随机生成一个 1~100 的答案。
-
你在输入框里打字，
inputValue实时更新。 -
每次更新，
result计算属性自动重新计算：-
先把输入转成数字
-
判断是否合法
-
比较大小
-
返回对应的提示文字
-
-
提示文字立即显示在
<p>标签里。
扫一扫
9095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
