前言:仅做笔记使用。不是制作精良的博客。
时间:2022/11/13
p9 el与data的两种写法
el的两种写法
第一种写法:
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
第二种写法
const v=new Vue({
data:{
name:'尚硅谷'
}
})
v.$mount('#root');
data的两种写法
<script type="text/javascript">
new Vue({
el:'#root',
//data的第二种写法:函数式
data:function(){
console.log('@@@@',this) //此处的this是Vue实例
return{
name:'尚硅谷'
}
}
})
</script>
普通函数可以简写成
data(){
....
}
总结:
data的两种写法
1.el有两种写法
(1)new Vue的时候配置el属性
(2)先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值
2.data有2钟写法:
(1)对象式
(2)函数式
3.一个重要原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>el与data的两种写法</title>
</head>
<body>
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
//data的第二种写法:函数式
data(){
console.log('@@@@',this) //此处的this是Vue实例
return{
name:'尚硅谷'
}
}
})
</script>
</body>
</html>
p10MVVM模型
虽然没有完全遵循MVVM模型
举例:
接收这个对象用vm
能看vm上所有属性:{{}}
总结:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>MVVM模型</title>
</head>
<body>
<div id="root">
<h1>Hello,{{_c}}</h1>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
}
})
</script>
</body>
</html>
P11Object.defineProperty
给一个对象添加属性用的
age是不可以被枚举(遍历)
解决:
没法变的那种:
get函数==>getter
P12理解数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作:读和写
通过obj2操控obj1中的x
P13Vue中的数据代理
vm中的data存在vm._data
验证: