04_el和data的两种写法
总结：
1 new Vue({
2 el:"#root", //第一种写法
3 data:{
4 name:'尚硅谷'
5 }
6 })
（2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值
1 const vm =new Vue({
2 data:{
3 name:'尚硅谷'
4 }
5 })
6 console.log(v)
7 vm.$mount('#root') //第二种写法
2.data的两种写法
（1）对象式
1 new Vue({
2 el:"#root",
3 //data的第一种写法：对象式
4 data:{
5 name:'尚硅谷'
6 }
（2）函数式
1 new Vue({
2 el:"#root",
3 //data的第二种写法：函数式
4 data(){
5 console.log(this) //此处的this是Vue的实例对象
6 return{
7 name:'尚硅谷'
8 }
9 }
10 })
整个过程的实例代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>el和data的两种写法</title>
8 <script type="text/javascript" src="../js/vue.js"></script>
9 </head>
10 <body>
11 <!-- 准备好一个容器 -->
12 <div id="root">
13 <h1>你好, {{name}}</h1>
14 </div>
15 </body>
16 <script type="text/javascript">
17 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
18 //el的两种写法
19 /* const vm =new Vue({
20 //el:"#root", //第一种写法
21 data:{
22 name:'尚硅谷'
23 }
24 })
25 console.log(v)
26 vm.$mount('#root') //第二种写法 */
27 //data的两种写法
28 new Vue({
29 el:"#root",
30 //data的第一种写法：对象式
31 /* data:{
32 name:'尚硅谷'
33 } */
34 //data的第二种写法：函数式
35 data(){
36 console.log(this) //此处的this是Vue的实例对象
37 return{
38 name:'尚硅谷'
39 }
40 }
41 })
42 </script>
43 </html>
04_el和data的两种写法的更多相关文章
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 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. 基础知 ...
- el与data的两种写法
el的两种写法 Vue初始化(被创建)后会判断有无el 有el:创建Vue实例对象的时候配置el属性 无el:通过vm.$mount('#root')指定el的值 data的两种写法 对象式:data ...
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- 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这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...
- iOS中表视图单元格事件用nib和storyboard的两种写法总结
从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...
随机推荐
- SQL注入详细讲解概括-GET注入、POST注入、HEAD注入
SQL注入详细讲解概括-GET注入.POST注入.HEAD注入 1.SQL注入流程 2.GET注入 3.POST注入 4.HEAD注入 一.SQL注入流程 1.SQL注入流程 · 寻找注入点-与数据库 ...
- autowired循环调用
下面这段代码,表示那你的bean进行了循环调用. org.springframework.beans.factory.BeanCreationException: Error creating bea ...
- AntSK 0.2.1 版本揭秘：动态加载dll，驱动Function Call新境界！
在.NET的无限宇宙中,动态加载dll似乎一直是操控代码生生不息的魔杖.今天,我将与您探讨如何通过AntSK 0.2.1 版本灵活运用dll,将Function Call的强大功能插拔自如地融入项目之 ...
- [Raspberry Pi]树莓派多线程下串口收发数据
[Raspberry Pi]树莓派多线程下串口收发数据 鼠鼠用的是python开发树莓派,因为python是最优美的语言! 少废话,直接上代码: import threading import ser ...
- 3D渲染速度慢，花重金买显卡还是用云渲染更划算
3D渲染对建筑师和设计师来说并不陌生,3D渲染的过程中出现渲染卡顿.特殊材质难以渲染,或者本地配置不足.本地渲染资源不够时,常常会影响工作效率.本文比较了3D渲染时,为提高工作效率,买显卡还是用云渲染 ...
- .NET集成DeveloperSharp操作Sql Server数据库
支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac. 本文提供了一种结合"原生Sql+轻量级ORM"操 ...
- 基于VS Code的JSDoc的使用指南
1. 引言 JSDoc是一个用于 JavaScript 的API文档生成器,可以将文档注释直接添加到源代码中,JSDoc 工具将扫描您的源代码并提供一些操作,例如,生成一个 API 文档 JSDoc官 ...
- KingbaseES V8R3集群部署案例之---通用机无ssh环境脚本部署集群
案例说明: 在一些通用机的生产环境,不允许主机之间通过ssh通讯,或者不允许root用户建立ssh互信或登录.默认KingbaseES V8R3集群通用机环境部署需要建立数据库用户及root用户,在集 ...
- #欧拉序，线段树#洛谷 6845 [CEOI2019] Dynamic Diameter
题目 动态修改边权,强制在线询问树的直径. 分析 设 \(dis[x]\) 表示 \(x\) 到1号点的距离. 那么树的直径就可以表示成 \(dis[x]+dis[y]-2*dis[lca]\) 只需 ...
- 使用OHOS SDK构建filament
参照OHOS IDE和SDK的安装方法配置好开发环境. 从gitee下载源码. 执行如下命令: git clone https://gitee.com/oh-graphics/filament.git ...