Vue中app实例对象的几种写法
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实例对象的几种写法的更多相关文章
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- hibernate中的java对象有几种状态,其相互关系如何(区别和相互转换)。
hibernate中的java对象有几种状态,其相互关系如何(区别和相互转换). 解答:在Hibernate中,对象有三种状态:临时状态.持久状态和游离状态. 临时状态:当new一个实体对象后,这个对 ...
- spring中创建bean对象的三种方式以及作用范围
时间:2020/02/02 一.在spring的xml配置文件中创建bean对象的三种方式: 1.使用默认构造函数创建.在spring的配置文件中使用bean标签,配以id和class属性之后,且没有 ...
- Android中Intent传递对象的两种方法(Serializable,Parcelable)
今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...
- 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)
Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...
- [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)
http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...
- Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!
[转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...
- 在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...
- Java中创建实例化对象的几种方式
Java中创建实例化对象有哪些方式? ①最常见的创建对象方法,使用new语句创建一个对象.②通过工厂方法返回对象,例:String s =String.valueOf().(工厂方法涉及到框架)③动用 ...
随机推荐
- 使用字节流(InputStream、OutputStream)简单完成对文件的复制
文件的复制 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; imp ...
- 【锁】synchronized的实现(偏向锁、轻量级锁、重量级锁)
synchronized的三种应用方式 一. 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁. 二. 修饰静态方法,作用于当前类对象加锁,进入同步代码前要获得当前类对象的锁. 三. ...
- struts2---访问WEB
一:在Action中,可以通过以下方式访问WEB的HttpSession,HttpServletRequest,HttpServletResponse等资源 与Servlet API解耦的访问方式 通 ...
- 【HDOJ6599】I Love Palindrome String(PAM,manacher)
题意:给出一个由小写字母组成的长为n的字符串S,定义他的子串[L,R]为周驿东串当且仅当[L,R]为回文串且[L,(L+R)/2]为回文串 求i=[1,n] 所有长度为i的周驿东串的个数 n<= ...
- h5视频做背景的样式
video{ position: fixed; display: block; width: 100%; object-fit:fill; height:100%; right: 0px; botto ...
- Rainbow的信号 CH3801
题目链接 题意:求n个整数任意取一个区间,一起进行xor,and,或or的操作,求xor的期望值,and的期望值,or的期望值. 思路:区间取的左端点为l,右端点为r,当r==l时,选的概率为1/n/ ...
- BUUCTF | CODE REVIEW 1 (反序列化,md5绕过)
<?php /** * Created by PhpStorm. * User: jinzhao * Date: 2019/10/6 * Time: 8:04 PM */ highlight_f ...
- Hbuild X 打包 混合式app
1.调用原生方法的接口文档:http://ask.dcloud.net.cn/docs/ (亲测有效,使用js 调用原生的设备方法是可以的) 2.HbuildX 可以直接真机调试的.(亲测有效,安装好 ...
- Linux(Ubuntu)常用命令(二)
归档管理: 打包: tar -cvf xxx.tar 打包对象 (一般来说就是 -cvf 一起用)但这种不压缩的打包通常不用,接下来会说. -options:-c 生成档案文件,创建打包文件. ...
- 箫声远(本人)的小站(为展示作品、简历,基于github pages)
箫声远的个人前端小站在线地址