Vue el与data的两种写法 && Object.defineProperty方法
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方法的更多相关文章
- 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. 基础知 ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- vue实现组件切换的两种方式
<!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...
- 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& ...
- java 路径分隔符File.separator 以及 路径两种写法"/"和"\\"
一.File.separator File file=new File(); 这句是新建一个文件.file.separator这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...
随机推荐
- Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- Kafka 万亿级消息实践之资源组流量掉零故障排查分析
作者:vivo 互联网服务器团队-Luo Mingbo 一.Kafka 集群部署架构 为了让读者能与小编在后续的问题分析中有更好的共鸣,小编先与各位读者朋友对齐一下我们 Kafka 集群的部署架构及服 ...
- 从零搭建react+ts组件库（封装antd）
为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...
- POJ1821 Fence 题解报告
传送门 1 题目描述 A team of $k (1 <= K <= 100) $workers should paint a fence which contains \(N (1 &l ...
- 且看这个Node全栈框架，实现了个Cli终端引擎，可无限扩充命令集
背景介绍 一般而言,大多数框架都会提供Cli终端工具,用于通过命令行执行一些工具类脚本 CabloyJS提供的Cli终端工具却与众不同.更确切的说,CabloyJS提供的是Cli终端引擎,由一套Cli ...
- 一个支持数据绑定与数据联动的Dashboard
什么是仪表盘 仪表盘是不同部件的组合,可以在一个页面集中显示各类信息,方便用户集中查看信息.并快速处理业务 关于制作部件,请参见:制作部件 CabloyJS仪表盘的特点 更灵活的自适应能力,可以针对m ...
- 浅析DispatchProxy动态代理AOP
浅析DispatchProxy动态代理AOP(代码源码) 最近学习了一段时间Java,了解到Java实现动态代理AOP主要分为两种方式JDK.CGLIB,我之前使用NET实现AOP切面编程,会用Fil ...
- RPA 抖音机器人汇总
一.RPA 抖音小店催好评机器人 RPA机器人详情: 1.配置好抖音小店订单号与催好评话术 2.启动抖音小店催好评机器人 3.机器人打开飞鸽客服软件 4.自动搜索订单号,自动发送催好评内容 5.机器人 ...
- ShardingSphere-proxy-5.0.0建立mysql读写分离的连接(六)
一.修改配置文件config-sharding.yaml,并重启服务 # # Licensed to the Apache Software Foundation (ASF) under one or ...
- 有关于weiphp2.00611上传sae的一些注意（图片上传解决方案）
一.安装中注意的事项 安装时使用的系统为weiphp2.0611 版本 1.将所有文件上传到代码库中 2.按照步骤进行安装weiphp,注意在数据库导入的时候需要手动导入. ...