当前位置: 首页 > news >正文

el与data的两种写法

目录

1 el的两种写法

2 data的两种写法

3 总结


1 el的两种写法

之前创建一个容器对象和一个vue实例的时候,我们采用的是如下的方式。

<body>

    <div id="root">
      <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
       data:{
       name:'老六'
       }
       })
        
    </script>
    
</body>

此时我们的容器和vue实例产生了联系。其实还有一种写法。

<body>

    <div id="root">
      <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
     const v = new Vue({
    //    el:'#root',
       data:{
       name:'老六'
       }
       })
       console.log(v)
       v.$mount('#root')
        
    </script>
    
</body>

用$.mount去联系这个容器对象。这种容器与对象绑定的方式更加灵活。

2 data的两种写法

第一种写法:对象式

<body>

    <div id="root">
      <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
       data:{  //data第一种写法,对象式
       name:'老六'
       }
       })
        
    </script>
    
</body>

第二种写法:函数式

<body>

    <div id="root">
      <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
        data:function(){ //第二种写法,函数式
        return{
            name:'老六'
        }
    }

       })
        
    </script>
    
</body>

3 总结

1 el有两种写法

        1).new Vue()时配置el属性。

        2)先创建Vue实例,随后在通过v.$mount('#root')指定el的值

2  data的写法

        1).对象式

        2).函数式

前期两种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。

3 一个重要的原则

由Vue管理的函数,一定不要写箭头函数,写了箭头函数之后,this就不是vue实例了

相关文章:

  • 超常用的网络工具命令汇总
  • java-php-python-springboo动物在线领养网站计算机毕业设计
  • JavaScript try-catch 处理错误和异常指南
  • Python文件的读写及常用文件的打开方式
  • MyBatis 中 #{} 和 ${} 的区别看完这篇文章一目了然
  • 实时即未来,车联网项目之原始终端数据实时ETL【二】
  • python 的re.findall的Bug以及解决方法
  • 在Windows系统上部署DHCP服务器
  • Java多线程~CAS的原理及其应用
  • [CSS]盒子模型
  • 【 C++ 】开散列哈希桶的模拟实现
  • 阿里云数据库(RDS)查看空间使用情况
  • 【C++编程语言】之 文件操作
  • 人生模式 - 如何跟潜意识对话
  • ubuntu18.04安装redis
  • 2017届校招提前批面试回顾
  • React系列之 Redux 架构模式
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 半理解系列--Promise的进化史
  • 编写符合Python风格的对象
  • 大整数乘法-表格法
  • 基于web的全景—— Pannellum小试
  • 计算机在识别图像时“看到”了什么?
  • 精益 React 学习指南 (Lean React)- 1.5 React 与 DOM
  • 聚簇索引和非聚簇索引
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 浅谈web中前端模板引擎的使用
  • 如何编写一个可升级的智能合约
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 消息队列系列二(IOT中消息队列的应用)
  • 学习HTTP相关知识笔记
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • Java性能优化之JVM GC(垃圾回收机制)
  • ​TypeScript都不会用,也敢说会前端?
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • # 数据结构
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • #我与Java虚拟机的故事#连载07:我放弃了对JVM的进一步学习
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • (5)STL算法之复制
  • (java)关于Thread的挂起和恢复
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (理论篇)httpmoudle和httphandler一览
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • .class文件转换.java_从一个class文件深入理解Java字节码结构
  • .net 4.0发布后不能正常显示图片问题
  • .net framework4与其client profile版本的区别
  • .NET 服务 ServiceController
  • .NET教程 - 字符串 编码 正则表达式(String Encoding Regular Express)
  • .NET开源项目介绍及资源推荐:数据持久层 (微软MVP写作)
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • [ Linux ] Linux信号概述 信号的产生