1.自定义指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus="{background:'yellow'}">
<div style="height: 100px;width: 100px;" v-bg></div>
<!-- 元素身上使用驼峰命名的属性 fontSize 在元素身上会转化为fontsize
导致两者的名字不一样 从而作用不生效 -->
<p v-font="{fontSize:'50px'}">认真学习VUe</p>
<li v-sty="{background:'red',fontSize:'50px'}">VUEVUEVUE</li>
</div>
<script src="./vue.min.js"></script>
<script>
/* 全局自定义指令 简写方式(不适用于focus()方法)*/
/* 定义指令要方法实例化Vue对象的前面 */
Vue.directive('bg',function(el){
console.log(el);
/* 回调函数第一个参数就是元素本身 */
el.style.background='red'
})
/* 全局自定义指令 全面的方法 */
Vue.directive('focus',{
/* 当绑定元素插入到dom中 */
inserted:function(el,binding){
el.focus();
el.style.background = binding.value.background
}
})
new Vue({
el:"#app",
/* 局部自定义指令 */
directives:{
font:{
inserted:function(el,binding){
el.style.fontSize = binding.value.fontSize
}
},
/* 使用局部自定义指令v-sty实现 传入的color background加了自定义指令的元素能变成相对应的样式 */
sty:{
inserted:function(el,binding){
el.style.fontSize = binding.value.fontSize
el.style.background = binding.value.background
}
},
}
})
</script>
</body>
</html>
效果图：
2.过滤器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 使用v-属性 实现渲染优化 -->
<div id="app" v-cloak>
<!-- | 过滤器的管道符 -->
<h1>{{'没事多卷卷VUE,还有react'|fn('学生')|fn('好好学')}}</h1>
<h1>{{'我爱Vue'|str('我爱React')}}</h1>
<h1>{{'hello'|reser}}</h1>
</div>
<script src="./vue.min.js"></script>
<script>
/* 全局过滤器 */
Vue.filter('fn',function(v,s){
/* v就是管道符左边的数据 */
/* return v.substring(0,v.indexOf(',')) */
return v+s
})
/* 利用过滤器 把 hello 变成 olleh */
new Vue({
el:'#app',
data:{
},
/* 局部过滤器 */
filters:{
str:function(v,s){
return v + s
},
reser:function(v){
return v.split('').reverse().join('')
}
},
})
</script>
</body>
</html>
效果图：
3.组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
组件（Component）的概念：组件即自定义控件
组件的用途：组件能够封装可重用代码，扩展HTML标签功能
组件的本质：自定义标签
组件的分类
全局组件
作用域：不同作用域内均可使用
局部组件
作用域：只在定义该组件的作用域内可以使用
注意：
组件和Vue实例类似，需要注册后才可以使用
-->
<div id="app">
<!-- 组件名是大写 在浏览器编译的时候会转成小写 导致找不到相应的组件
可以全变成小写 中间加-来解决 -->
<div>
<child-a />
</div>
<!-- 所有的组件都需要使用一个div来包裹 -->
<div>
<child-b />
</div>
</div>
<!-- <template id="ChildA">
<div>
<h1>我是ChildA</h1>
</div>
</template> -->
<!-- 模板的第二种写法 使用template加id -->
<template id="ChildB">
<!-- template里面也需要使用div来包裹一下 -->
<div>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
</div>
</template>
<script src="./vue.min.js"></script>
<script>
/* 一定要写在new Vue的前面 */
/* 全局组件 */
Vue.component('ChildA',{
/* 模板的第一种写法 直接写 */
template:'<h1>我是ChildA</h1>'
})
Vue.component('ChildB',{
template:'#ChildB'
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
效果图：
