1.传统方法(练习 小DEMO中用的这种)

    <script type="text/ecmascript">
var app=new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>

2.带有返回值的方法(实际项目中大多用的这种,优点下面会讲到)

<script type="text/javascript">
var app=new Vue({
el:'#app',
data: function(){
return {
message:"hello world"
}
}
})
</script>

第二种的es6写法:

<script type="text/javascript">
var app=new Vue({
el:'#app',
data() {
return {
message:"hello world"
}
}
})
</script>

html里面body部分:这里以helloworld 为例

<div id="app">
{{message}}
</div>

区别:

传统的vue.js实例方法 即第一种方法,基本不会被复用,作为练习用较多。

第二种第三种实际项目中用的比较多,因为可能在多处调用同一组件,为了不让多处的组件共享同一data对象,只能返回函数。

export default{
data(){
return {
...
}
}
}

来源:之前看过一篇文章,大致是这么介绍的,今天想起来了更新下,项目中确实后两种用的较多。

Vue中app实例对象的几种写法的更多相关文章

  1. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  2. hibernate中的java对象有几种状态,其相互关系如何(区别和相互转换)。

    hibernate中的java对象有几种状态,其相互关系如何(区别和相互转换). 解答:在Hibernate中,对象有三种状态:临时状态.持久状态和游离状态. 临时状态:当new一个实体对象后,这个对 ...

  3. spring中创建bean对象的三种方式以及作用范围

    时间:2020/02/02 一.在spring的xml配置文件中创建bean对象的三种方式: 1.使用默认构造函数创建.在spring的配置文件中使用bean标签,配以id和class属性之后,且没有 ...

  4. Android中Intent传递对象的两种方法(Serializable,Parcelable)

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

  5. 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)

    Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...

  6. [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)

    http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...

  7. Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!

    [转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...

  8. 在Vue中输入框自动获取焦点的三种方式

    原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...

  9. Java中创建实例化对象的几种方式

    Java中创建实例化对象有哪些方式? ①最常见的创建对象方法,使用new语句创建一个对象.②通过工厂方法返回对象,例:String s =String.valueOf().(工厂方法涉及到框架)③动用 ...

随机推荐

  1. 使用字节流(InputStream、OutputStream)简单完成对文件的复制

    文件的复制 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; imp ...

  2. 【锁】synchronized的实现(偏向锁、轻量级锁、重量级锁)

    synchronized的三种应用方式 一. 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁. 二. 修饰静态方法,作用于当前类对象加锁,进入同步代码前要获得当前类对象的锁. 三. ...

  3. struts2---访问WEB

    一:在Action中,可以通过以下方式访问WEB的HttpSession,HttpServletRequest,HttpServletResponse等资源 与Servlet API解耦的访问方式 通 ...

  4. 【HDOJ6599】I Love Palindrome String(PAM,manacher)

    题意:给出一个由小写字母组成的长为n的字符串S,定义他的子串[L,R]为周驿东串当且仅当[L,R]为回文串且[L,(L+R)/2]为回文串 求i=[1,n] 所有长度为i的周驿东串的个数 n<= ...

  5. h5视频做背景的样式

    video{ position: fixed; display: block; width: 100%; object-fit:fill; height:100%; right: 0px; botto ...

  6. Rainbow的信号 CH3801

    题目链接 题意:求n个整数任意取一个区间,一起进行xor,and,或or的操作,求xor的期望值,and的期望值,or的期望值. 思路:区间取的左端点为l,右端点为r,当r==l时,选的概率为1/n/ ...

  7. BUUCTF | CODE REVIEW 1 (反序列化,md5绕过)

    <?php /** * Created by PhpStorm. * User: jinzhao * Date: 2019/10/6 * Time: 8:04 PM */ highlight_f ...

  8. Hbuild X 打包 混合式app

    1.调用原生方法的接口文档:http://ask.dcloud.net.cn/docs/ (亲测有效,使用js 调用原生的设备方法是可以的) 2.HbuildX 可以直接真机调试的.(亲测有效,安装好 ...

  9. Linux(Ubuntu)常用命令(二)

    归档管理: 打包: tar -cvf xxx.tar 打包对象 (一般来说就是 -cvf 一起用)但这种不压缩的打包通常不用,接下来会说. -options:-c    生成档案文件,创建打包文件. ...

  10. 箫声远(本人)的小站(为展示作品、简历,基于github pages)

    箫声远的个人前端小站在线地址