1、组件
（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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app1" style="border: 2px solid rgb(218, 162, 162);">
<global-com></global-com>
</div>
<br>
<div id="app2" style="border: 2px solid rgb(72, 72, 82);">
<global-com></global-com>
</div>
<script>
// 全局组件注册
Vue.component('global-com', {
template: '<div style="color: red">全局组件</div>'
})
// 正常情况下，一个应用程序只有一个根实例
// 实例1
var app = new Vue({
el: '#app1',
data:{
}
})
// 实例2
var app2 = new Vue({
el: '#app2',
data:{
},
methods: {
}
})
</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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app1" style="border: 2px solid rgb(218, 162, 162);">
<app-com1 :msg="msg"></app-com1>
<!-- <com2></com2> -->
</div>
<br>
<div id="app2" style="border: 2px solid rgb(72, 72, 82);">
<!-- 局部组件只能在它父组件中使用 如果在实例1中使用则会报错-->
<com2></com2>
</div>
<script>
// 实例1
var app = new Vue({
el: '#app1',
// 定义子组件（局部组件注册）
components: {
// 属性的名称就是组件名称，属性值是一个对象，就是组件的配置项
'app-com1': {
template: `<div style="color: skyblue">app1实例中的局部组件--{{m}}--{{msg}}</div>`,
// 使用全局组件中的，这里是父传子
props: ['msg'],
data() {
return {
m: '你好'
}
},
created() {
},
methods: {
},
filters: {},
computed: {},
watch: {},
},
},
data:{
msg: 'hello'
},
methods: {
}
})
// 实例2
var app2 = new Vue({
el: '#app2',
components:{
com2: {
template: '<div style="color: brown">app2实例中的第二个局部组件</div>'
}
},
methods: {
}
})
</script>
</body>
</html>
2、过滤器
（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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 不带参数的 过滤器中的参数是过滤器前的数据 -->
<!-- <h1>{{count | toFixed}}</h1> -->
<!-- 带参数的，过滤器中会有两个参数，第一个是过滤前的数据，第二个是参数 -->
<h1>{{count | toFixed(3)}}</h1>
<h1>{{count | toFixed(3) |money}}</h1>
</div>
<div id="app1">
<h1>{{msg}}</h1>
<h1>{{count | toFixed(3)}}</h1>
<h1>{{count | toFixed(3) |money}}</h1>
</div>
<script>
Vue.filter('toFixed',function(val,n){
console.log(val,n);
// 直接返回过滤前的数据，相当于没过滤
// return val
// 返回小数点后面的两位
// return val.toFixed(2)
// 返回的是过滤器参数中的数字的位数
return val.toFixed(n)
})
Vue.filter('money',function(val){
console.log(val);
return '¥' +val + '元'
})
var app=new Vue({
el:'#app',
data:{
msg:'hello Vue!',
count:2.323131489320103910310
}
})
var app1=new Vue({
el:'#app1',
data:{
msg:'hello Vue🐾!',
count:5.323131489320103910310
}
})
</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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg | ss}}</h2>
<h2>{{num | toFixed | money}}</h2>
<h2>{{num | toFixed(3) | money}}</h2>
</div>
<div id="app2">
<!-- 不能使用 局部只能在本实例中使用-->
<!-- <h2>{{msg | ss}}</h2>
<h2>{{num | toFixed}}</h2> -->
</div>
<script>
var app = new Vue({
el: '#app',
data:{
msg: 'hello',
num: 3.1415926
},
methods: {
},
// 局部过滤器
filters:{
// ss过滤器的名称 val是传递过来需要过滤的数据
toFixed(val,n){
console.log(val);
return val.toFixed(2)
// return val.toFixed(n)
} ,
ss(val) {
console.log(val);
return val.slice(0, 2);
},
money(val) {
console.log(val);
return '¥' +val + '元'
}
}
})
var app2 = new Vue({
el: '#app2',
data:{
msg: '你好呀',
num: 12.54321
},
})
</script>
</body>
</html>3、插槽
不同于props属性传递数据的方法，就可以使用插槽（slot）的方法，Slot 通俗的理解就是“占位”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动站位（替换组件模板中slot位置）
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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插槽：插槽也是可以传递数据的在组件中的内容区进行传递 -->
<com>
<!-- 直接在这里写标签是不会渲染的 -->
<h1>在这里放个h1,要显示在content中---<span>{{msg}}</span></h1>
</com>
</div>
<script>
Vue.component('com', {
template: `
<div class="content">
<slot></slot>
</div>
`
})
var app = new Vue({
el: '#app',
data: {
msg:'(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤'
}
})
</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>
<script src="./vue.js"></script>
<style>
body{
font-size: 30px;
background-color: #f5f5f5;
}
header{
color: aqua;
}
main{
color: rgb(226, 182, 111);
}
footer{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 插槽：插槽也是可以传递数据的在组件中的内容区进行传递 -->
<com>
<!-- 直接在这里写标签是不会渲染的 -->
<header slot="header">
头部的内容
</header>
<main slot="main">
主体内容
</main>
<footer slot="footer">
尾部内容
</footer>
</com>
</div>
<script>
Vue.component('com', {
template: `
<div class="content">
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})
var app = new Vue({
el: '#app',
data: {
msg: '(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤'
}
})
</script>
</body>
</html>
<!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>
<script src="./vue.js"></script>
<style>
body {
font-size: 30px;
background-color: #f5f5f5;
}
header {
color: aqua;
}
main {
color: rgb(226, 182, 111);
}
footer {
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 插槽：插槽也是可以传递数据的在组件中的内容区进行传递 -->
<com>
<!-- 直接在这里写标签是不会渲染的 -->
<template v-slot="header">
头部的内容
</template>
<main slot="main">
主体内容
</main>
<footer slot="footer">
尾部内容
</footer>
<template v-slot="header">
头部1的内容
</template>
</com>
</div>
<script>
Vue.component('com', {
template: `
<div class="content">
<header>
<slot></slot>
</header>
<slot name="main"></slot>
<slot name="footer"></slot>
<header>
<slot></slot>
</header>
</div>
`
})
var app = new Vue({
el: '#app',
data: {
msg: '(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤'
}
})
</script>
</body>
</html>
