实例-vue是由实例组成的
根实例
组件也是实例
以$开头的单词都是代表着vue的实例属性实例方法
vue实例中的生命周期钩子
8个生命周期函数
这几个函数不用放到methods里面
计算属性
尽量使用计算属性而不是watch！
可以配合着计算属性使用setter和getter
绑定样式
对于非行内样式
方法一：
:class=“{becomeRed: isActivated}”
其中isActivated放到data里面，如果是true，就有becomeRed这个class，否则就没有。
方法二：
:class=“[becomeRed]”
data:{ becomeRed: “”}
becomeRed里面放类名
对于行内样式
:style=“styleObj”
//或
:style=“[styleObj,
{fontSize: '20px'}]”
data:{
styleObj:{
color:”black”
}
}
v-if和v-show
后者只是隐藏而已，dom元素还在；前者直接杀掉dom元素。
使用后者性能更高。
如果要使用v-if，而且這個要隱藏的組件以後還會顯示，我們可以在這個組件標籤裡面加上一個v-once，以此來增加性能，不讓這個組件死掉。
v-if和v-else
两个东西要连着写！
数组
如果想改变数组，界面跟着变。不能使用方括号来改。
有三种方式：
使用数组遍历函数
改变数组的引用
set方法：
Vue.set(vm.userInfo,1,5)
//或
vm.$set(vm.userInfo,2,10)
template占位符
起一个包裹的作用
向对象中注入新的属性
改变对象的引用
set方法：
Vue.set(vm.userInfo,”address”,”beijing”)
//或
vm.$set(vm.userInfo,”address”,”beijing”)
使用自定义组件时
is属性
在table、ul、select下面使用自定义标签时，使用is属性解决模板标签的bug
data
不应该是个对象，而是个函数，返回content，这样的话，返回一个引用，每个子组件都可以拥有独立的数据，互不干扰。
获取dom
对原生标签
ref=‘hello’
this.$refs.hello
对自定义标签
使用ref返回的是引用。
父子组件的数据传递
父传子
通过属性的形式传递数据
//传数字
//传字符串
单向数据流：
父组件可以向子组件传递数据，但是子组件不能修改父组件传过来的东西。因为有可能其他组件还在使用父组件传递过来的数据，会影响其他组件。
如果要修改，得copy一份副本，修改这个副本
子传父
激发事件emit
参数校验
props后面不写数组了，改写成一个对象，like this：
props: {
content: {
type: String,
validator: function(value) {
return (value.length > 5)
}
},
index: Number,
num: [String,Number],
fuck: {
type: String,
required: false,
default: 'default value'
}
}
props特性
父组件向子组件传属性，子组件在props里面刚好声明了，即父传子接。
父组件和子组件有一种对应特性：
这个传递属性不会在dom上显示；
子组件接受了props后，子组件就可以使用差值表达式将其显示出来。
非props特性
父组件向子组件传属性，但是子组件在props里面却没有声明该属性。
即父传子不接。
子组件没办法获取该属性的内容，因为没有获取；
非props特性会显示在dom元素里面的。
如何给自定义组件绑定原生事件？
方法一：
给子组件绑定一个原生事件，触发子组件函数；
在子组件函数里面监听，然后$emit一个自定义事件给自定义组件即可
方法二：
直接在自定义事件上面加native修饰符，这样写：
@click.native = “handleClick”
如何解决复杂的组件间传值？
vuex
发布订阅模式（总线机制/Bus/观察者模式）
总线机制
插槽
默认内容
具名插槽
给插槽起一个名字，插到指定的位置
作用域插槽
当子组件做循环或某一部分它的dom结构应该由外部传进来的时候，使用作用域插槽。
{{props.item}}
動態組件
這個type是根實例data裡面的一個屬性，用於替換component變成你自定義過的自定義組件。
可以用於替代v-if的效果！
動畫
过渡动态效果
渐入
渐出
Animate.css
keyframes自定义的标签动画
导入animate库
香蜜沉沉烬如霜
如何让刷新之后自动显示动画？
在transition标签里面加上这么两个属性：
appear
appear-active-class=“animated swing”
如何让keyframes动画和transiton动画融合在一起？
都放到enter和leave的那两个active class里面去。
两者时间不统一，如何设定动画时间？
在transition标签里面加上这么几条属性即可：
:duration=“{enter: 5000, leave: 10000}”
//或
:duration="1000"
//或
type="transition"
js动画
使用js动画钩子。
香蜜沉沉烬如霜
methods: {
handleBtnClick: function() {
this.seen = !this.seen
},
handleBeforeEnter: function(el) {
el.style.color = 'pink';
},
handleEnter: function(el, done) {
setTimeout(()=>{
el.style.color = 'blue'
},2000);
setTimeout(()=>{
done()
},4000);
},
handleAfterEnter: function(el) {
el.style.color = 'red'
}
}
使用velocity.js来创作js动画
methods: {
handleBtnClick: function() {
this.seen = !this.seen
},
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el, done) {
Velocity(el,{
opacity: 1
},{
duration: 1000,
complete: done
})
},
handleAfterEnter: function(el) {
console.log('4s是垃圾！')
},
handleBeforeLeave: function(el) {
el.style.opacity = 1;
},
handleLeave: function(el, done) {
Velocity(el,{
opacity: 0
},{
duration: 1000,
complete: done
})
},
handleAfterLeave: function(el) {
console.log('我走了！')
}
}
多元素过渡效果
對原生組件
錦覓
旭鳳
對自定義組件
對動態組件
直接用component標籤替換這兩child，就可以直接使用。效果一樣哦。
列表過渡
使用transition-group標籤代替transition標籤，來包裹列表，其他部分使用起來和前面一樣。
原理
相當於在每一個表項div外面包裹了一個transition標籤，對它使用一些如v-enter的class。
動畫封裝
不用css動畫了，用js動畫。
https://www.cnblogs.com/endymion/p/9627728.html
