1.vue指令

2.绑定class的几种方式

Class 与 Style 绑定 | Vue.js (vuejs.org)

1.对象语法

<div :class="{'active':isActive}"></div>
<div class="static-class" :class="{'active':isActive}"></div>
<div ：class="classes"></div>

isActive是data下的某个状态{ isActive:true} classes是computed下监听返回的对象

computed:{
classes:function(){
return {
active:true,
noShow:flase
}
}
}

2.数组语法

<div :class="[actives,errors]"
<div :class="[isActive?actives:errors]"></div>
<div :class="[{'active':isActive},errors]"></div>

3.组件详解

1.props验证类型可以是

• String
• Number
• Boolean
• Object
• Array
• Function

Vue.component('my-component',{
template:`<div @click="countAdd">template展示{{count}}   父组件传过来的props:{{propA}}</div>`
props : { 
//必须是数字类型
propA : Number, 
//必须是字符串或数字类型
propB : [String, Number] , 
//布尔值，如果没有定义，默认值就是 true
  propC: {
    type: Boolean, 
default : true
  },
//数字，而且是必传
  propD: {
    type: Number,
      required : true
  }, 
//如果是数组或对象，默认值必须是一个函数来返回
  propE: {
    type: Array, 
default : function () {
      return [];
    }
  },
//自定义 个验证函数
  propF: {
    validator: function (value) {
      return value > 10;
    }
  }
              } 
data:function(){
return {
count:0
}
},
methods:{
countAdd(){
this.count=++this.count
}
}
})

2.非父子组件通信

1.vue1

除了使用$emit()方法外，还提供了$dispatch和broadcast(),$dispatch用于向上级派发事件，只要是它的父级，都可以在Vue实例的envents选项内接受，$broadcast()是由上级向下级广播事件缺点：组件树结构流的方式难以理解，组件扩展困难，无法解决兄弟组件通信问题

<div id="app">
{{message }} 
<my-component></my-component> 
</div> 
<script>
Vue.component ( 'my-component',{ 
template : '<button @click handleDispatch 〉派发事件</button',
methods: {
  handleDispatch: function() {
    this.$dispatch('on-message 来自内部组件的数据')
  }
}
})
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  events: {
    'on-message': function(msg) {
  this.message = msg ;
}
}
}) 
</script>

2.vue2

使用一个空的Vue实例作为中央事件总线

3.父链和子组件

this.$parent
this.$root
this.$children
ref===>(this.$refs.ref.msg)

4.provide和inject

3.使用`slot`插槽

当需要让组件组合使用时，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发(transclusion)

父组件模板内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译

1.具名slot

如果没有指定默认的匿名slot，父组件内多余的内容片段都将被抛弃

<child-component>
  <h2 slot="header">标题</h2>
</child-component>

//child-component
<div>
  <slot name="header" ></slot>
</div>

2.作用域插槽

<child-component>
<template scope="props">
<p>来自父组件的内容：{{props.msg}}</p>
</template>
</child-component>

//child-component
<div>
<slot msg="子组件内容"></slot>
</div>

3.访问slot

this.$slots.header
this.$slots.default
this.$slots.footer

组件高级用法

1.递归组件

必须给一个条件限制递归数量

2.内联模板

使用inline-template标签，组件就会把它的内容当成模板

<div id="app">
<child-component inline-template> 
<div> 
<h2 ＞在父组件中定义子组件的模板</h2>
<p>{{ message }}</p> 
<p>{{ msg }}</p> 
</div> 
</child-component> 
</div> 
<script> 
Vue.component ('child-component', { 
data: function () { 
return { 
      msg:'在子组件声明的数据',
}
}
} );
var app =new Vue ( { 
el:'#app', 
data:{ 
message: 在父组件声明的数据
}) 
</script>

3.动态组件

<component :is="curComponent"></component>

4.异步组件

Vue.js 许将组件定义为个工厂函数，动态地解析组件。

Vue. 只在组件需要渲染时触发工厂函数并且把结果缓存起来，用于后面的再次渲染。

<div id="app">
<child-component></child-component> 
</div> 
<script> 
Vue.component( 'child-component',function (resolve,reject) { 
window .setTimeout(function () { 
resolve({ 
template :' <div>我是异步渲染的</div>
}) ; 
} ' 2000) ; 
} ) ., 
var app =new Vue({ 
el :'#app '
}) 
</script>

5.$nextTick

$nextTick就是用来知道什么时候DOM更新完成的
异步更新队列 数据更新时不是立即更新dom，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变，在缓冲中去除重复数据，从而避免不必要的计算和dom操作，然后在下一个事件循环tick中，vue刷新队列并执行实际（已去重的）工作
Vue 会根据当前浏览器环境优先使用原生的 Promise en MutationObserver ，如果都不支持，就会采用 setTimeout 替。

6.手动挂载实例

Vue.extend({
template:'<div>{{name}}</div>
data:function(){
return {
   name:'abc'
   }
   }
   })
   new MyComponent().$mount("#app")

1.《vue.js实战学习》-基础知识点回顾