全局API（二）
Vue.set全局操作
Vue.set的作用就是在构造器外部操作构造器内部的数据，属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要求每次点击按钮给值加1，就需要用到Vue.set
引用构造器外部数据：
什么是外部数据，就是不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用就可以了，外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
<body>
{% verbatim %}
<div id="app">
{{ count }}
</div>
<p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
function add() {
Vue.set(outData,'count',10);
}
var outData={
count:1,
goods:'car'
}
new Vue({
el:'#app',
data:outData
})
</script>
还有这种方法也可以实现：
<body>
{% verbatim %}
<div id="app">
{{ count }}
</div>
<p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
function add() {
//Vue.set(outData,'count',10);
app.count++;
}
var outData={
count:1,
goods:'car'
}
var app = new Vue({
el:'#app',
data:outData
})
</script>
第三种方法：
<body>
{% verbatim %}
<div id="app">
{{ count }}
</div>
<p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
function add() {
//Vue.set(outData,'count',10);
//app.count++;
outData.count++;
}
var outData={
count:1,
goods:'car'
}
var app = new Vue({
el:'#app',
data:outData
})
</script>
如果我们这样写：
<body>
{% verbatim %}
<div id="app">
{{ count }}
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
function add() {
outData.count++;
app.arr[1]='ddd';
}
var outData={
count:1,
arr:['aaa','bbb','ccc']
}
var app = new Vue({
el:'#app',
data:outData
})
</script>
没问题，但我们将outData.count去掉的话，就有问题了，vue是监听不到数组下标的改变的，所以这就要用到vue.set了。
<body>
{% verbatim %}
<div id="app">
{{ count }}
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
function add() {
//outData.count++;
//app.arr[1]='ddd';
Vue.set(app.arr,1,'ddd');
}
var outData={
count:1,
arr:['aaa','bbb','ccc']
}
var app = new Vue({
el:'#app',
data:outData
})
</script>
Vue的生命周期(钩子函数)
Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
<body>
{% verbatim %}
<div id="app">
{{ count }}
<p><button @click="add">add</button></p>
</div>
{% endverbatim %}
</body>
<script>
var app = new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function () {
this.count++;
}
},
beforeCreate:function () {
console.log('1 - beforeCreate 创建之前');
},
created:function () {
console.log('2 - created 创建完成');
},
beforeMount:function () {
console.log('3 - beforeMount 挂载之前');
},
mounted:function () {
console.log('4 - mounted 被挂载之后');
},
beforeUpdate:function () {
console.log('5 - beforeUpdate 数据更新前');
},
updated:function () {
console.log('6 - updated 被更新后');
},
activated:function () {
console.log('7 - activated ');
},
deactivated:function () {
console.log('8 - deactivated ');
},
beforeDestroy:function () {
console.log('9 - beforeDestroy 销毁前');
},
destroyed:function () {
console.log('10 - destroyed 销毁之后');
},
})
</script>
Template制作模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
第一种写法：
<body>
{% verbatim %}
<div id="app">
{{ message }}
</div>
{% endverbatim %}
</body>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
},
template:`
<h2 style='color:red'>我是选项模板</h2>
`
})
</script>
第二种方法：
<body>
{% verbatim %}
<div id="app">
{{ message }}
</div>
<template id="dd2">
<h2 style="color:red">我是Template模板</h2>
</template>
{% endverbatim %}
</body>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
},
template:'#dd2'
})
第三种方法：
<body>
{% verbatim %}
<div id="app">
{{ message }}
</div>
{% endverbatim %}
</body>
<script type="x-template" id="dd3">
<h2 style="color:red">我是Script标签模板</h2>
</script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
},
template:'#dd3'
})
</script>
Component组件
组件在Vue里是十分重要的，其实组件就是制作自定义的标签，这些标签在HTML中是没有的。
全局化注册组件
全局化就是在构造器的外部用Vue.component来注册。
<body>
{% verbatim %}
<div id="app">
<huang></huang>
</div>
{% endverbatim %}
</body>
<script>
Vue.component('huang',{
template:`{% verbatim %}<div style='color:red'>我是全局的组件</div>{% endverbatim %}`
})
var app = new Vue({
el:'#app',
})
</script>
上面的是全局的，下面写个局部的：
<body>
{% verbatim %}
<div id="app">
<huang></huang>
<panda></panda>
</div>
{% endverbatim %}
</body>
<script>
Vue.component('huang',{
template:`{% verbatim %}<div style='color:red'>我是全局的组件</div>{% endverbatim %}`
})
var app = new Vue({
el:'#app',
components:{
'panda':{
template:`{% verbatim %}<div style='color:green'>我是局部panda组件</div>{% endverbatim %}`
}
}
})
</script>
未完待续。。。