v-on:click 可以简写为 @click
vm.$data 输出data对象
vm.$el 输出对象的html
vm.$destroy() 销毁这个实例
this. $e l, t hi s 指向组件的实例。$ el指向当前组件的DOM元素。
8个生命周期， create、mount、destroy、update每个都有before和自身，一共11个
插值表达式 {{变量名 + ’ 字符串’ }} ， data:{{变量名: ‘值’}
插值表达式，先去data里找，找不到再去computed里找

<div v-text="变量名 + ' 字符串' "></div>

直接输出变量内容和后面字符串内容

<div v-html="变量名 +  ' 字符串' "></div>

拼成的值转义成html输出到页面

计算属性

计算属性：

computed:{xxx : function(){return oooo; }}

计算属性有缓存，依赖的变量改变才会变
methods也能实现， {{ xxx()}} ,但是没有缓存

 watch:{ xxx:function(){   }}

监听值改变重新执行逻辑
computed的计属性里xxx变量还能有 get,set 方法

改变样式

class对象绑定：

  :class="{activated:  xxxx}"

data里定义 activated 变量，methos写逻辑

:class ="[ class1,class2 ]"

样式的名称作为变量名

:style="styleObj" , 初始化 data:{ styleObj:{  color: "black" } }

数组也行

  :style="[ styleObj , {fontSize : '20px' }]"

条件渲染

data:{ show : false }
< div v-if =“show” ></ div> ,false 直接消失
< div v-else >aaa </ div> 要紧贴一起使用
还有 < div v-else-if="show === ‘bbb’ " > 这是B</ div>
, false 是隐藏，性能高

列表循环

<div v-for=" ( item , index ) of list " :key="item.id"  > 		 	{{item.text}} -- {{index}} 
</div>data: { list: [{id:"1",text: "2"} ] }

index 从0开始， id是后端返回的主键，不能通过数组下标方式该值
支持的数组操作，push,pop,shift,unshift,splice,sort,reverse
替换数组 vm.list.splice(1,1,{id:“11”,text:“222”}) 或者重新赋值
<template v-for …> < div>…< span>… </ template>，占位符，页面不会输出

对象循环

<div v-for=" (item,key,index) of obj ">  值，键名，序号 </div>

对象添加属性，需要重新赋值

组件

< tr is=“组件别名” > < li >,< option>标签都行，可以用is起别名
组件的定义：

Vue.compoent('组件名称',{data: function() {  return {  xxx : 'dddd' } },template: '模板的html代码'
})

子组件里的data必须返回函数
ref 获取dom节点

<div ref='hello'>  </div>
//输出
this.$refs.hello.innerHTML

子父组件传值
定义子组件时的点击事件监听handClick，handClick定义里通过 $emit 触发使用子组件的 change事件监听handleChange， handleChange定义里找到两个ref对象的逻辑相加

<div id="root"><counter ref="one" @change="handleChange"></counter><counter ref="two" @change="handleChange"></counter><div></div>	
</div>
<script>
Vue.component('counter',{
template: '<div @click="handClick">{{number}} </div>',
data: function(){return {number: 0}
},
methods: {handClick: function(){this.number ++this.$emit('change ')}
}
})var vm =new Vue({
el: '#root',
data: {total: 0
},
methods: {handleChange:function(){this.total = this.$ref.one.number +this.$ref.two.number}}
})
</script>

xxx=“0”,0是字符串， :xxx =“0” ,0是数字，组件的属性赋值
父组件传值给子组件，通过属性
单向数据流的概念，不能修改父组件传递过来的参数
可以修改参数的副本
子组件接收传值，props:[‘属性名’]

给组件绑定原生事件

监听原生点击事件，
@click 表示监听自定义事件，名字叫 click

<child @click.native="HancleClick"></child>

非父子组件传值(Bus/总线/发布订阅模式/观察者模式)

//总体的定义
Vue.prototype.bus = new Vue()
//子组件里定义 click事件的监听方法
//方法里如下写: 触发事件，携带参数
this.bus.$emit('自定义事件名称',参数)
//在通过子组件里的 mounted 监听事件
//是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
this.bus.$on('自定义事件名称',function(value){ //对value的操作 })
//要注意单向数据流 修改值的副本

slot 插槽语法

使用组件时候，里面定义的一些代码，在子组件定义的template里用

 <slot></slot>

slot标签渲染时候就等于定义的一些代码
当有多个时候，可以用具名slot插槽

<!--具名插槽--><div class="header" slot="header">header</div><div class="footer" slot="footer">footer</div><slot name="footer"></slot><slot name="default-header"><h1>默认header</h1></slot>

作用域插槽

<child><!--作用域插槽 template--><template slot-scope="props"><h1>{{props.item}}</h1></template></child><!-- 子组件传值 -->
<ul><slot v-for="item in list" :item="item"></slot></ul>

动画

animate.css 提供了大量的动画效果，官网：https://daneden.github.io/animate.css
使用 Velocity.js 官网：http://velocityjs.org/
多个元素之间的互动效果

<transition mode="out-in">
<div v-if="show" key="hello">Hello World</div>
<div v-else key="bye">Bye World</div>
</transition>

动态组件

<transition mode="out-in">
<component :is ="type"></component> 
</transition>

type传入组件的名称

多个组件

<!--样式 -->
<style>
.v-enter, .v-leave-to {opacity: 0;
}
.v-enter-active , .v-leave-active {transition: opacity 1s;
}
</style><!-- transition-group  相当于包含的每一个都是 transition -->
<transition-group >
<div v-for="item of list" :key="item.id">
{{item.title}}
</div>
</transition-group >

动画封装
把样式封装在组件里

Vue.component('fade',{
props: ['show'],
template:`
<transition @before-enter="handleBeforeEnter"@enter="handleEnter"><slot v-if="show"></slot></transition>`,
methods: {handleBeforeEnter: function(el){el.style.color = 'red'},handleEnter: function(el,done){setTimeout(() => {el.style.color = 'green'done()},2000)}
}	`
})