70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<!-- 1. 导入vue.js的脚本文件 -->
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<h3>文本框: {{data.text}}</h3>
|
||
<h3>单选框: {{data.radio}}</h3>
|
||
<h3>复选框: {{data.checkbox}}</h3>
|
||
<h3>下拉框: {{data.select}}</h3>
|
||
<h3>记住密码: {{data.remember}}</h3>
|
||
<!-- 单向数据绑定
|
||
数据发生变化时视图会自动更新
|
||
但是手动修改input的值，数据不会自动更新
|
||
-->
|
||
单向数据绑定 <input type="text" :value="data.text"><br>
|
||
<!-- 双向数据绑定
|
||
当数据发生变化时，视图会自动更新
|
||
手动修改input的值 数据也会自动更新
|
||
-->
|
||
双向数据绑定 <input type="text" v-model="data.text"><br>
|
||
<input type="radio" v-model="data.radio" value="1">听音乐
|
||
<input type="radio" v-model="data.radio" value="2">写代码<br>
|
||
|
||
<!-- 列编辑 Alt+Shift+上下箭头 -->
|
||
<input type="checkbox" v-model="data.checkbox" value="a">听音乐
|
||
<input type="checkbox" v-model="data.checkbox" value="b">写代码
|
||
<input type="checkbox" v-model="data.checkbox" value="c">刷B站
|
||
<br>
|
||
|
||
<select v-model="data.select">
|
||
<option value="">---请选择---</option>
|
||
<option value="A">听音乐</option>
|
||
<option value="B">写代码</option>
|
||
<option value="C">刷B站</option>
|
||
</select>
|
||
<br>
|
||
<input type="checkbox" v-model="data.remember">记住密码
|
||
</div>
|
||
</body>
|
||
<script>
|
||
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
|
||
const { createApp, reactive, ref } = Vue; // 解构赋值语法
|
||
// 创建一个 Vue 的应用程序
|
||
createApp({
|
||
// 组合式API 的 setup 用于设置响应式数据和方法
|
||
setup() {
|
||
const data = reactive({
|
||
text: "Maxxie", // 文本框
|
||
radio: "", // 单选框
|
||
checkbox: [], // 复选框
|
||
select: "", // 下拉框
|
||
remember: false // 单个复选框-记住密码
|
||
})
|
||
// 返回数据
|
||
return {
|
||
data
|
||
}
|
||
}
|
||
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
|
||
</script>
|
||
|
||
</html> |