表单数据的绑定使用v-model，相当于v-bind与@input的结合
<!-- 是v-bind:value 与 @input 的语法糖。v-bind只能从数据单向绑定视图，只有v-model才能双向绑定 -->
<input type="text" v-model="message" />
<p>你的爱好</p>
<input type="radio" v-model="hobby" value="篮球">篮球
<input type="radio" v-model="hobby" value="足球">足球
<h2>{{hobby}}</h2>
v-model也是有对应修饰符的,修饰符.lazy .number .trim 分别代表懒更新，绑定数字，去首尾
<!-- 不会立即改变数据和视图message,当失焦或者点击回车的时候触发更新 -->
<input type="text" v-model.lazy="message">
<h2>{{number}}</h2>
<!-- v-model会自动把绑定的数据转成字符串形式，如需保留number类型则需加修饰符 -->
<!-- 输入10033sss444 此时number=10033 -->
<input type="text" v-model.number="number">
<button @click="getType">查看类型</button>
<!-- trim修饰符可以去掉首尾空格 -->
<p></p>
<input type="text" v-model.trim="message">
<button @click="getMessage">查看值</button>
关于全局组件的注册（大致了解即可 以后组件是单独一个vue单文件，会自动转换为注册时的配置项）
<template id="my-app">
<component-a></component-a>
</template>
// 组件直接包裹在template里面
<template id="component-a">
<h2>{{title}}</h2>
<h2>{{desc}}</h2>
<button @click="componentAClick">点击事件</button>
</template>
<script>
const App = {
template:'#my-app',
data(){
return{
message:"Hello World"
}
}
}
// 注册全局组件
const app = Vue.createApp(App)
// 组件命名，短横线分隔符或者 大驼峰标识(在html不行)
app.component("component-a",{
template:"#component-a",
data(){
return {
title:"组件a标题",
desc:"组件a内容"
}
},
methods:{
componentAClick(){
console.log("组件a点击事件");
}
}
})
app.mount("#app")
</script>
关于局部组件的注册
<template id="my-app">
<com-a></com-a>
</template>
<script>
const ComA = {
template:"#component-a",
data(){
return {
title:"组件a标题",
desc:"组件a内容"
}
},
methods:{
componentAClick(){
console.log("组件a点击事件");
}
}
}
const App = {
template:'#my-app',
// 在模板中会组件名会自动转化为com-a
components:{
"ComA":ComA
},
data(){
return{
message:"Hello World"
}
}
}
// 注册全局组件
const app = Vue.createApp(App)
// 组件命名，短横线分隔符或者大驼峰标识
// app.component("component-a",comA)
app.mount("#app")
</script>
