Vue-Day03
Posted 随遇而安
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-Day03相关的知识，希望对你有一定的参考价值。
过滤器
- Vue中使用filters进行声明过滤器
如何使用:在Vue所绑定的区域中使用{{time|f1|f2}}需求:给定一个时间:2021-06-19通过过滤器将时间格式过滤为:2021/06/19 - 代码实现:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>filters时间过滤器</title>
6
7 </head>
8 <body>
9<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
10 <div id="app">
11 {{time|f1|f2}}
12 </div>
13 </body>
14 <script type="text/javascript">
15 new Vue({
16 el: \'#app\',
17 data: {
18 time: "2021-06-19"
19 },
20 methods: {
21
22 },
23 filters:{
24 f1(v){
25 let arr=v.split(\'-\');
26 let str=arr.join(\'/\');
27 return str;
28 },
29 f2(v){
30 return "今天是"+v;
31 }
32 }
33 })
34 </script>
35</html>
- 运行效果:
自定义指令
11.定义:
2new Vue({
3el:\'\';
4data:{},
5methods:{},
6//自定义指令声明
7directives:{
8\'自定义指令名\':{
9钩子函数:在特定时机会自动调用的函数
10bind(el,binding){},
11update(el,binding){
12}
13}
14}
15})
162.使用:
17系统指令:v-xxx
18自定义指令:v-自定义指令名
- 案例:通过设置自定义属性实现v-show效果
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
9</head>
10<body>
11 <div id="app">
12 <p v-demo="bool">出现还是隐藏</p>
13 <button @click="fun()">走</button>
14 </div>
15</body>
16<script>
17 new Vue({
18 el:"#app",
19 data:{
20 bool:true
21 },
22 methods:{
23 fun(){
24 this.bool = !this.bool;
25 }
26 },
27 directives:{
28 \'demo\':{
29 //bind的调用时机:在使用指令的时候自动调用
30 bind(el,binding){
31
32 },
33 //在自定义指令的指令值发生改变的时候会自动调用
34 update(el,binding){
35 if(binding.value){
36 el.style.display = \'block\';
37 }else{
38 el.style.display = \'none\';
39 }
40 }
41 }
42 }
43 })
44</script>
45</html>
- 运行效果:
全局组件
- 组件定义:扩展html的(就是给html做封装),为让让html可以重复使用
- 全局组件定义:声明在vue对象外的组件,就是全局组件,全局组件可以在任意的对象中使用
KDoc：插入代码片段