<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2实例</title>
</head>
<body>
<div id="app1">
<button type="button" v-on:click="add(2)">{{msg}}</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data:{
msg:"vue"
},
methods:{
add:function(str){
return this.msg+=str;
}
}
});
console.log(app1.add(3));
</script>
</body>
</html>
结果：
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
1.5.4、小结
computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对
属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。
1、每个Vue的实例都会代理其data对象里的所有属性，被代理的属性是响应的；
2、如果实例创建之后添加新的属性到实例上，不会触发视图更新；
3、不要在实例属性或者回调函数中（如 vm.＄watch(‘a’, newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。
4、Vue实例暴露了一些有用的实例属性和方法，带有前缀 ＄ 便于与代理的data区分
a、vm.＄el：类型（HTMLElement）挂载元素，Vue实例的DOM根元素；
b、vm.＄data：类型（Object），Vue实例观察的数据对象
c、vm.＄props：类型（Object），属性
d、vm.＄options：类型（Object），用于当前Vue实例的初始化选项，在选项中需要包含自定义属性的时候很有用。
e、vm.＄parent：类型（Vue实例），父实例。
f、vm.＄root：类型（Vue实例），当前组件树的根Vue实例，如果没有父实例，就是实例本身。
h、vm.＄children：类型（Array(Vue实例)），当前实例的直接子组件
需要注意 ＄children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 ＄children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
i、vm.＄slots：类型（{ [name: string]: ?Array<VNode> }），用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot=”foo” 中的内容将会在 vm.＄slots.foo 中被找到）。default 属性包括了所有没有被包含在具名 slot 中的节点。
