1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>el与data的两种写法</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 el的两种写法:
11 1.new Vue时候配置el属性
12 2.线创建Vue实例,随后再通过vm.$mount('#root')指定el的值
13 data的两种写法:
14 1.对象式
15 2.函数式
16 如何选择:在组件里,data必须使用函数式,否则会报错
17 还有一个重要的原则:有Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue对象,而是window,或者父对象
18 -->
19 <div id="root">
20 <h1>hello, {{name}}</h1>
21 </div>
22 </body>
23
24 <script type="text/javascript" >
25 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
26 v = new Vue({
27 // el: '#root', // el的第一种写法
28 // data:{ // data的第一种写法
29 // name: 'jack'
30 // }
31 data: function() {
32 // this 这里的this就是Vue对象
33 return {
34 name: 'jack'
35 }
36 }
37 })
38 v.$mount('#root') // el的第二种写法
39 </script>
40 </html>
 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Object.defineProperty方法</title>
6 </head>
7 <body>
8 <script type="text/javascript" >
9 let number = 18
10 let person = {
11 name: 'jack',
12 sex: 'man',
13 }
14 Object.defineProperties(person, 'age', {
15 value: number, // 设置age属性的值
16 enumberable: true, // 控制属性是否可以被枚举(遍历),默认false
17 writeable: true, // 控制属性是否可以被修改,默认false
18 configurable: true, // 控制属性是否可以被删除,默认false
19 // 当读取person.age属性的时候调用该方法(在原型中该方法名叫getter)
20 get: function(){
21 return number;
22 },
23 // 当对person.age=19属性赋值的时候滴啊用(在原型中该方法名叫setter)
24 set(value){
25 number = value;
26 }
27 })
28 </script>
29
30 </body>
31
32
33 </html>

Vue el与data的两种写法 && Object.defineProperty方法的更多相关文章

  1. Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)

    文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...

  2. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  3. ThinkPHP中Widget的两种写法及调用

    Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...

  4. vue实现组件切换的两种方式

    <!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...

  5. ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法

    ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法 语法 第一种: 通过使用Oracle语句块  --指定文档所有部门都能查看 declare cursor TABLE_DEPT and ...

  6. EF架构~linq模拟left join的两种写法,性能差之千里!

    回到目录 对于SQL左外连接我想没什么可说的,left join将左表数据都获出来,右表数据如果在左表中不存在,结果为NULL,而对于LINQ来说,要实现left join的效果,也是可以的,在进行j ...

  7. 运算符关键字。数据区别大小写。日期范围。判空的两种写法。NOT IN的两种写法。IN范围可含NULL,但NOT IN值范围不能含NULL。

    比较:>,<,=,>=,<=,<>(!=) 逻辑:AND,OR,NOT 范围:BETWEEN...AND... 范围:IN,NOT IN 判空:IS NULL, I ...

  8. 快速排序partition过程常见的两种写法+快速排序非递归实现

    这里不详细说明快速排序的原理,具体可参考here 快速排序主要是partition的过程,partition最常用有以下两种写法 第一种: int mypartition(vector<int& ...

  9. java 路径分隔符File.separator 以及 路径两种写法"/"和"\\"

    一.File.separator File file=new File(); 这句是新建一个文件.file.separator这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...

随机推荐

  1. 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  2. 我的总结常用的js知识

    nvm nvm是node的包管理工具.在不同的项目下使用不同的node版本.下载地址 https://github.com/coreybutler/nvm-windows/releasesnvm in ...

  3. Windows 程序安装与更新方案: Clowd.Squirrel

    我的Notion Clowd.Squirrel Squirrel.Windows 是一组工具和适用于.Net的库,用于管理 Desktop Windows 应用程序的安装和更新. Squirrel.W ...

  4. swiper使用

    swiper使用 初始化 var mySwiper = new Swiper ('容器区域类', { // 存放swiper属性 }) 属性 基本属性: 1.initialSlide 设定初始化时sl ...

  5. C++primer第二章

    第二章 :变量和基本类型 2.1 基本内置类型 C++定义了一套包含算术类型(arithmetic type)和空类型(void)在内的基本数据类型 2.1.1 算术类型 算术类型的分类: 整型(in ...

  6. Spring Boot整合Swagger报错:"this.condition" is null

    前段时间看到群里有吐槽swagger整合问题,当时没仔细看,总以为是姿势不对. 这两天正好自己升级Spring Boot版本,然后突然出现了这样的一个错误: Caused by: java.lang. ...

  7. HMS Core分析服务6.5.0版本更新啦

    卸载用户价值的合理评估对制定相应的用户召回策略具有重要意义. HMS Core分析服务新版本支持查看用户卸载前使用次数.崩溃次数等指标.通过这些数据,您可以更直观地判断已卸载人群粘性以及崩溃问题对用户 ...

  8. resttemplate 请求方式详解

    get 普通请求: restemplate.getForEntity(url,String.class).getBody(); get 导出请求: restemplate.getForEntity(u ...

  9. R数据分析:临床预测模型中校准曲线和DCA曲线的意义与做法

    之前给大家写过一个临床预测模型:R数据分析:跟随top期刊手把手教你做一个临床预测模型,里面其实都是比较基础的模型判别能力discrimination的一些指标,那么今天就再进一步,给大家分享一些和临 ...

  10. css设置元素背景透明度的2种方式

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...