title: Vue学习第三天
date: 2016-9-21 15:00:52
tags: vue
watch 监听
vm.$watch(name，fnCb)// name:要被监视的数据
fnCb要执行的回调函数 （此为浅度监视）
vm.$watch(name,fnCb,{deep:true})(此为深度复制)
动画 animate
推荐使用animate.css插件
使用方法：1安装 npm i --save vue2-animate (以webpack依赖)
2 在main.js中引入
require('vue2-animate/dist/vue2-animate.min.css')
或者
import 'vue2-animate/dist/vue2-animate.min.css';
3 然后使用（可以看API)
组件 (组件里面放数据：data必须是函数形式，函数必须返回一个对象（json)
1 全局组件注册方式：Vue.component(组件名，{方法})
例： <div id="app">
<my-component></my-component>
</div>
Vue.component("my-component",{
template:"<h1>我是全局组件</h1>"
});
new Vue({
el:"#app"
});
注意：全局组件必须写在Vue实例创建之前，才你能在根元素下面生效
2 局部组件 直接在Vue实例里面注册
例：<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
new Vue({
el: "#app1",
components:{
"child-component":{
template:"<h1>我是局部组件</h1>"
}
}
});</script>
局部组件需注意：1 属性名为components, S千万别忘
2 最好模板定义在一个全局变量里
方法如下： var child={
template:<h1>我是局部组件</h1>"
}
new Vue({
el: "#app1",
components:{
"child-component":child
} });
3 组件模板
例：<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']}},
methods:{
change(){
this.msg='changed';
}},
template:'#aaa'
}}});</script>
4 动态组件 <component :is="组件名称"></component> (主要考察的是is)
例： <div id="box">
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a"></component>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa' },
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'}，
'bbb':{
template:'<h2>我是bbb组件</h2>'
}}});
</script>