首页 > 其他分享 >Vue - data声明区别 data:{} 与 data(){return {}}

Vue - data声明区别 data:{} 与 data(){return {}}

时间:2022-10-07 12:33:32浏览次数:41  
标签:el Vue return app 组件 data

data:{}:全局可见

var vm = new Vue({
        el:'#app',
        data:{
            title:'HELLO,WORLD!'
        }
    })

data(){return {}}:只在当前组件中生效

var vm = new Vue({
        el:'#app',
        data(){
            return{
                title:'HELLO,WORLD!'
            }
        }
    })

总结:不使用 return 包裹的数据会在项目的全局可见,会造成变量污染; 使用 return 包裹后数据中变量只在当前组件中生效,不会影响其他组件。

标签:el,Vue,return,app,组件,data
From: https://www.cnblogs.com/Dm920/p/16759494.html

相关文章

  • 目前最强性能的人脸检测算法(Wider Face Dataset)
           最强性能的人脸检测今天我们不说计算机视觉基础知识,接下来说说AAAI2019一篇比较新颖的Paper,其是中科院自动化所和京东AI研究院联合的结果,在WiderFace......
  • vue 入门
    idea、webstorm、vsCode,都可以开发吧,脚手架vue-cli项目框架一搭建,就写代码了 --关于vue需要掌握的知识点--- 使用的开发工具是webstorm,它是默认就安装好了​​vuejs​​......
  • vue 2 坑编译系统
    errorin./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true&SyntaxError:TypeError:Cannotsetproperty'paren......
  • 【Vue3.x】自定义指令directive
    自定义指令directive不同于vue2指令bindinsertedupdatecomponentUpdatedunbind1.vue3指令中的钩子函数created元素初始化的时候beforeMount指令绑定到元素后......
  • JS基础 -- if分别使用return、break、continue的区别
    /**if分别使用return、break、continue的区别**break:使用break可以退出当前的循环**continue:用于跳过当次循环**return:使用return可以结束整个函数**下面用......
  • 关于 SAP UI5 ODataModel.createEntry 返回的 context 对象
    在返回的上下文中使用创建的API返回的Promise对象,以便在持久化或重置时获得通知。使用isTransientAPI,您可以确定创建的上下文是transient的还是持久的;请注意,对于尚......
  • 改造vue-webtopo-svgeditor2.1版本,兼容vue2
    原控件在 https://github.com/yaolunmao/vue-webtopo-svgeditor 是园子里的朋友 咬轮猫  开发的在网上发现大神开发这套组态,很符合项目要求,10.1期间准备融入项目,结......
  • MVC显示DATATABLE
    @{ViewBag.Title="ShowDataTable";}@usingSystem.Data;@modelModels.ConModel@{vartable=Model.ExcelTableasDataTable;}<scriptsrc="~/Scripts/My97D......
  • Mybatis的数据源DataSource讲解
    在Mybatis的主配置文件里面有个datasource相关的配置。dataSourcetype的值有三个:POOLD,UNPOOLD,JNDI.POOLD:使用mybatis的数据库连接池来管理connection对象UNPOOLD:......
  • Vue3使用可重复使用的Mixins
     这里有两个子页面是重复功能的,一个是点击事件,一个是鼠标移入事件点击事件  鼠标移入事件  效果      现在使用mixins新键一个文件夹minxs,再......