Vue-插槽、自定义指令、render、过滤器

1.插槽

普通插槽，具名插槽，作用域插槽

插槽允许我们在调用子组件的时候为子组件传递模板。

元素作为承载分发内容的出口。 一个不带 name 的 出口会带有隐含的名字“default”。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

        1.默认插槽

        没有名字的插槽就是默认插槽

 	123
    123

        2.具名插槽

        具有名字的插槽

    123

        3.插槽填充

        内容填充到模板的哪个插槽中？

        指定插槽

        插槽声明  {template:`插槽默认模板`}

        插槽模板

        1.默认模板

    插槽默认模板

        2.自定义模板

        在插槽默认模板中，可以直接访问子组件的数据，可以通过props间接访问父组件的数据

        在插槽自定义模板中，可以直接访问父组件的数据，可以通过插槽属性间接访问子组件的数据(插槽作用域)

	
	
	
	
	



	

		
			
我是子组件
			
			
			
			
		
	
	

2.自定义指令

directive

Vue中多有的指令都以 v- 来调用。但是，有时候Vue提供给我们的指令并不能满足我们的需求，这个时候 我们就需要自定义指令。

指令允许我们对普通 DOM 元素进行底层操作。可以全局注册也可以局部注册

全局注册

        使用Vue.directive

局部注册

        在Vue实例或组件中添加新的选项directives

钩子函数

        钩子函数可以在指令的生命周期内的关键时刻加入代码

	

		
		{{msg}}
		
	
	

3.render渲染函数

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器

4.过滤器

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”|符号指示：

{{ message | filterMethod }}

首先引入 `moment`第三方库，再进行接下来的操作。引入moment仅供实现功能，与过滤器没有关系。

  

  

    
    
{{ new Date() | fmtDate_global}}
    
鼠标悬停查看时间
  
  

5.插件

plugin

插件通常用来为 Vue 添加全局功能。Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
 // 逻辑...
}

// 2. 添加全局资源
Vue.directive('my-directive', {
 bind (el, binding, vnode, oldVnode) {
   // 逻辑...
 }
 ...
})

// 3. 注入组件选项
Vue.mixin({
 created: function () {
   // 逻辑...
 }
 ...
})

// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
 // 逻辑...
}
}

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
// ...组件选项
})

	


	

		{{time | fmtTime}}