Vue全局API
Vue.set全局操作-------引用外部数据
Vue.set全局操作，可以在构造器外操作构造器内部的数据，属性或方法
下面的这个例子就是在构造器内部定义一个属性，然后通过在构造器外写一个方法来操作构造器内部的数据。
例子：现在构造器里面定义一个count属性，其初始值为1，通过点击按钮，改变count的值
外部数据：就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.set实例</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>Vue.set实例，在构造器内部操作外部数据实例</h1>
<div id="app">
<p>外部数据: {{count}}</p>
</div>
<button onclick="add()">加分</button>
<script type="text/javascript">
function add(){
//demo.count++;
//dataMessages.count++;
Vue.set(dataMessages,'count',5);
// Vue.set(dataMessages.arr,1,'dd')
}
var dataMessages={
count:1
}
var demo=new Vue({
el:'#app',
data:dataMessages
})
</script>
</body>
</html>
通过Vue.set()对外部数据进行操作，
Vue.set(对象，属性，值)
Vue.set(dataMessages,'count',5);
改变外部数据的方法有以下三种：
function add(){
//demo.count++;---用Vue对象进行操作
//dataMessages.count++;---直接操作外部数据
Vue.set(dataMessages,'count',5);
}
由于javascript的限制，Vue不能自动检测变动的数组，利用Vue.set改变外部数组元素的值。
- 当利用索引更新数组中摸一个元素的值时，vue不会自动更新
- 当改变数组的长度时，vue也不会自动更新
所以想要改变数组元素，需要调用Vue.set方法进行全局操作
点击按钮，将数组元素下标为0的值修改为“dd",同时count的值也会发生改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.set实例</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>Vue.set实例，在构造器内部操作外部数据实例</h1>
<div id="app">
<p>外部数据: {{count}}</p>
<ul><li v-for="item in arr">{{item}}</li></ul>
</div>
<button onclick="add()">加分</button>
<script type="text/javascript">
function add(){
//demo.count++;
//dataMessages.count++;
Vue.set(dataMessages,'count',5);
Vue.set(dataMessages.arr,1,'dd')
}
var dataMessages={
count:1,
messages:'这是Vue.set的测试数据',
arr:['aa','bb','cc']
}
var demo=new Vue({
el:'#app',
data:dataMessages
})
</script>
</body>
</html>
运行前：
运行后：
核心代码：
其中1是数组元素的下标
Vue.set(dataMessages.arr,1,'dd')
