Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）
2024-08-30 03:07:47
文章目录
1、el与data的两种写法
1.1、基础知识
data与el的2种写法
1、el有2种写法
(1)、new Vue时候配置el属性。
(2)、先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。2、data有2种写法
(1)、对象式
(2)、函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
- 3、一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
1.2、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//el的两种写法
//第一种写法
// new Vue({
// el: '#App',
// data: {
// value: "Vue"
// }
// })
//第二种写法
// const vm = new Vue({
// data:{
// name:"VUE",
// }
// })
// vm.$mount('#App')
//data的两种写法
new Vue({
el:'#App',
//第一种写法：对象式
// data:{
// name:'ZYZ'
// }
//data的第二种写法：函数式
data(){
return {
name: 'zyz'
}
}
})
</script>
</body>
</html>
1.3、页面效果
2、MVVM模型
2.1、 基础知识
- MVVM模型
1、M：模型(Model) ：data中的数据
2、V：视图(View) ：模板代码
3、VM：视图模型(ViewModel)：Vue实例 - 观察发现：
1、data中所有的属性，最后都出现在了vm身上。
2、vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
2.2 、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<h1>测试一下2：{{$options}}</h1>
<!-- <h1>测试一下1：{{1+1}}</h1>
<h1>测试一下3：{{$emit}}</h1>
<h1>测试一下4：{{_c}}</h1> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
name: "ZYZ",
address: "CSDX"
}
})
console.log(vm)
</script>
</body>
</html>
2.3、页面效果
3、数据代理
3.1、 基础知识
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
3.2、 回顾Object.defineProperty方法
3.2.1、 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let num = 24
let person = {
name: "张三",
sex: "男",
}
Object.defineProperty(person, 'age', {
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get() {
return num
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value) {
num = value
}
})
console.log(person)
</script>
</body>
</html>
3.2.2、 测试结果
3.3、 何为数据代理
3.3.1 、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
let obj1 = { x: 10 }
let obj2 = { y: 20 }
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x;
},
set(value) {
obj1.x = value
}
})
</script>
</body>
</html>
3.3.2、测试结果
3.4、Vue中的数据代理
3.4.1、代码实例
z<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
name: "ZYZ",
age: 18
}
})
</script>
</body>
</html>
3.4.2、测试结果
最新文章
- 详解BOM头以及去掉BOM头的方法
- yii2.0高级框架配置时打开init.bat秒退的解决方法 (两种方法)
- Java Project和Web Project 区别
- 2014 HDU多校弟八场H题 【找规律把】
- python3.5学习之路_day1_login
- centos7 安装nodejs,git
- 基于Blod的ajax进度条下载实现
- HTTP常用方法
- 命令模式 Command 行为型 设计模式（十八）
- 配置安全的管理访问（GNS3）
- 二十三种设计模式之原型模式的C#实现
- 【烂笔头】adb命令篇
- css实现单行（多行）文本溢出显示 ...
- Error starting Tomcat context. Exception: org.springframework.beans.factory.BeanCreationException
- redis集群，主从，持久化
- Python学习笔记第七周
- Sqoop 导入及导出表数据子集命令详解
- 转：初探nginx架构（二）
- 关于JAVA路径 问题
- 【MySQL】MySQL层级数据的递归遍历