补充
data(){
return{
friends:[{name:"why"},{name:"kebe"}]
}
}
要想深度监视friends数组的对象值，真实开发中，handler的深度监视是很少用
实际上用的多数是组件监听，在子组件中监听；
对象的引用-浅拷贝-深拷贝
对象的引用赋值：
const info={...}
obj = info
obj就可以调用info里的对象属性
因为info实际上保存的是对象的内存地址，当他赋值给obj的时候，实际上也是把内存地址给了obj
所以实际上info和obj都是0x1001.name；
浅拷贝：
const info = {name:"why",age:18}
const obj = Object.assign({},info)
将info里的对象存进了obj中，作为返回值返回出去，然后obj接收
1.assign会在内存中再创建一个新的对象
2.将info中的属性拷贝一份放进新的对象中
3.然后新的对象的值给obj
所以我info.name = "Kobe"
console.log(obj.name) 返回的是why
深拷贝：
JSON.parse()：转换为对象格式
JSON.stringify():将对象转换为字符串格式
此时info任意修改值，我obj中的值依然保持不变，和浅拷贝的结果一样
lodash，也可以实现浅拷贝、深拷贝；他是一个库
Vue3的表单和开发模式
v-model的基本使用
在表单input、textarea、select元素上实现双向数据绑定
我希望我在input中输入什么东西，页面就展示什么东西
实质就是：message无论改变成什么样，我都会实时更新
<input type="text" v-model="message"></input>
<h2>{{message}}</h2>
data:{
return:{
message:"Hello World"
}
}
v-model绑定其他表单
绑定textarea
`<lable for=""></lable>:用于关联单选按钮与文字。
<label for="intro">绑定的id
自我介绍
<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro">
</textarea>
</label>
<h2>{{intro}}</h2>
data(){
return:{
intro:"Hello World"
}
}
绑定checkbox
单选框
点一下同意协议，就会有√，因为label for
多选框
<label for="basketball">
要想将值存入数组中，就必须要有一个value属性
<input id="basketball" type="checkbox" v-model="hobbies" value="basketball">篮球
</label>
<label for="football">
<input id="football" type="checkbox" v-model="hobbies" value="football">足球
</label>
<h2>hobbies{{hobbies}}</h2>
data(){
return{
hobbies:[],
}
}
绑定radio
绑定select
补充：select的属性
multiple:可以多选，size="2" 只展示2个，决定select高度
v-model的修饰符
lazy:不希望我每次输入input内容后，就立马出发，而是我敲回车等操作才触发
number:v-model默认输入的内容的value都是string类型的 所以避免这种问题，通过number修饰符将v-model输入的内容变为number类型 注：如果输入的时候有字符串类型，那么只会截取字符串之前的数字
trim:将我输入的内容中的空格，前后空格自动去除。中间内容间的空格不删除
组件化开发
组件化：把一个大的页面，拆分出若干个小的组件，用若干个组件将大的页面搭建出来 并且也可以在其他页面中，重复多次使用同一个组件来搭建新的页面。
组件又会包含若干组件，以此源源不断，最终汇总成一个组件树
注册组件
const app = Vue.create(App);
全局注册组件：可以在任何模板中使用
app.component("组件名称","组件对象")
app.component("component-a",{
template: `<h2>我是component-a组件</h2>`
})
或者
app.component("component-a",{
template:"#component-a"
})
使用全局组件 在templet中书写
<component-a></component-a>
或者
<template id="component-a">
<h2>我是组件的另外一种定义方式</h2>
</template>
注：命名时，最好用 分隔符- 来命名
全局组件带来的问题：
局部注册：
我在专门定义组件的页面书写：
<template id="component-a">
<h2>我是组件</h2>
<p>我是内容</p>
</template>
const ComponentA={
template:"#component-a"
}
局部注册：我需要在某个页面用的时候，我在对应的那个页面使用注册
const App = {
components:{
ComponentA
key:value
组件名称：组件对象；
注意: 当两个一样的时候，可以简写
ComponentA用的驼峰，实际上在使用的时候是等价于component-a
两个大写字母之间的是 - 分隔符
},
data(){...}
}
调用：<component-a></component-a>
