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>
|