Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）
文章目录
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、测试结果
Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）的更多相关文章
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- iOS中表视图单元格事件用nib和storyboard的两种写法总结
从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- 关于MyBatis的两种写法
刚接触MyBatis是在Jike的视频中学习的,但是之后又发现和项目中的MyBatis的用法不太一致.上网找了好多资料,发现网上的教程分为两种写法: 第一种,是jike视频中的写法,写好map.xml ...
- OpenGL坐标变换及其数学原理，两种摄像机交互模型（附源程序）
实验平台:win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): a.鼠标拖拽旋转物体,类似于OGRE中的“OgreBites::CameraStyle: ...
- ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法
ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法 语法 第一种: 通过使用Oracle语句块 --指定文档所有部门都能查看 declare cursor TABLE_DEPT and ...
- EF架构~linq模拟left join的两种写法,性能差之千里!
回到目录 对于SQL左外连接我想没什么可说的,left join将左表数据都获出来,右表数据如果在左表中不存在,结果为NULL,而对于LINQ来说,要实现left join的效果,也是可以的,在进行j ...
- 运算符关键字。数据区别大小写。日期范围。判空的两种写法。NOT IN的两种写法。IN范围可含NULL,但NOT IN值范围不能含NULL。
比较:>,<,=,>=,<=,<>(!=) 逻辑:AND,OR,NOT 范围:BETWEEN...AND... 范围:IN,NOT IN 判空:IS NULL, I ...
- 快速排序partition过程常见的两种写法+快速排序非递归实现
这里不详细说明快速排序的原理,具体可参考here 快速排序主要是partition的过程,partition最常用有以下两种写法 第一种: int mypartition(vector<int& ...
随机推荐
- C#《原CSharp》第四回 人常见岁月更替 却难知人文相继
纪芾显然此时并不是很能理解纪老爷子口中是也不是这句话的意思,不过他依然将这个要点记在了心里,方便以后悟出其最终门道的时候进行比对. "今天,我在璃月港北边的一户人家,遇到了一个挺有意思的后生 ...
- Reactive UI -- 反应式编程UI框架入门学习（一）
推荐一个反应式编程的MVVM跨平台框架. 反应式编程 反应式编程是一种相对于命令式的编程范式,由函数式的组合声明来构建异步数据流.要理解这个概念,可以简单的借助Excel中的单元格函数. 上图中,A1 ...
- 《笨办法学Python3 》入坑必备，并不是真笨学！！！
<笨办法学Python3 >免费下载地址 内容简介 · · · · · · 本书是一本Python入门书籍,适合对计算机了解不多,没有学过编程,但对编程感兴趣的读者学习使用.这本书以习题的 ...
- HC32L110 系列 M0 MCU 的介绍和Win10下DAP-Link, ST-Link, J-Link的烧录
HC32L110 系列 Cortex M0 MCU Hackaday 在三月份的时候介绍了一款最小的MCU NEW PART DAY: SMALLEST ARM MCU UPROOTS COMPETI ...
- 275. H 指数 II--Leetcode_暴力
来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/h-index-ii 著作权归领扣网络所有.商业转载请联系官方授权,非商业转载请注明出处. 题目的大意是 ...
- Excelize 2.3.1 发布，Go 语言 Excel 文档基础库，支持加密表格文档
Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...
- day30-注解
Java注解 1.注解的理解 注解(Annotation)也被称为元数据(Metadata),用于修饰解释 包.类.方法.属性.构造器.局部变量等数据信息 和注释一样,注解不影响程序逻辑,但注解可以被 ...
- 第七十二篇：Vue组件的props
好家伙, 1.组件的props props是组件的自定义属性,在封装通用组件的时候,合理的使用props可以极大的提高组件的复用性 来假设一下,如果我们需要两个组件分别显示不同的值 目录结构如下: H ...
- APICloud如何对接大牛直播SDK
随着apicloud的普及,越来越多的用户苦于apicloud下没有一款真正靠谱低延迟的rtmp/rtsp直播播放器苦恼. 鉴于此,大牛直播SDK携手apicloud资深版主,推出apicloud对接 ...
- Springboot mybatis总结
mybatis 总结 属性配置 1. mybatis.configuration.mapUnderscoreToCamelCase=true mapUnderscoreToCamelCase用于映射表 ...