vue-day03

最新推荐文章于 2024-06-04 03:20:19 发布

是姐姐的甜崽吗

最新推荐文章于 2024-06-04 03:20:19 发布

阅读量69

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46690090/article/details/112194080

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue-day03

1-MVVM设计模式

M(Model): 数据层, 处理数据
V(View): 视图层, 展示操作界面
VM(View Model): 视图模型层, 链接视图层和数据层中间纽带, 将数据层的数据交给视图层渲染, 将视图层的操作同步到数据层

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hI62SKdv-1609757116959)(media\mvvm.jpg)]

2-watch侦听器

本质: 特殊的函数
作用: 监视data中的某个数据的改变, 从而做出一些逻辑处理
特点: 不需要手动调用
注意
- watch侦听器的函数名必须和被监视的数据名保持一致
- 不能滥用watch侦听器, 因为会有性能开销

2.1-普通侦听器

语法格式:

 new Vue({
     el:'#app',
     data:{
         msg:'hello'
     },
     // 定义watch监视器
     watch:{
         // 监视msg的改变
         // oldVal:系统自动注入,更新之前的值
         // newVal: 系统自动注入, 更新之后的值
         // 写法1
         // msg(newVal,oldVal){
         //     console.log(newVal,oldVal);
         // }
         // 写法2
         msg:{
             handler(newVal,oldVal){
                 console.log(newVal,oldVal);
             } 
         }
     }
 });

2.2-深度侦听器

应用场景: 通过普通赋值方式修改对象的属性的时候, 普通侦听器监视不到对象的更新, 所以要使用深度侦听器

语法格式:

new Vue({
    el:'#app',
    data:{
        user:{
            name:'jack',
            aeg:20
        }
    },
    methods:{
       change(){
           // 普通赋值方式修改对象属性, 普通侦听器侦听不到(需要使用深度侦听器)
           this.user.name='杰克';
       }  
    },
    watch:{
        user:{
            // oldVal:系统自动注入,更新之前的值
         	// newVal: 系统自动注入, 更新之后的值
            handler(newVal,oldVal){
                console.log(newVal,oldVal);
            },
            // 开启深度侦听
            deep:true
        }
    }
});

3-computed计算属性

本质: 特殊的函数
作用: 可以根据已经存在的数据, 计算出来一个不存在的数据
使用: 调用的时候是当做数据调用
特点: 计算属性内部会有缓存机制
注意:
- computed计算属性方法一定要有返回值
- 计算属性方法名, 不能和data中的数据同名

语法格式

new Vue({
    el:'#app',
    // 计算属性  
    computed:{
    	// 定义
        msg(){
            // 必须要有返回值
            return 'hello';
        }    
    }
});

 <!-- 调用计算属性 -->
<h1>{{msg}}</h1>

4-filter过滤器

本质: 一种特殊的方法
作用: 对模板中将要输出的数据进行预处理
注意:
- 过滤器方法必须有返回值
- 过滤器方法的第一个形参永远是待处理的数据(由系统自动注入)
注意
- 过滤器只能在插值表达式和v-bind指令中使用

4.1- 全局过滤器

所有的vue实例中都可以使用

定义

// 定义全局过滤器
// data: 待处理的数据, 系统自动注入
Vue.filter('toUpperCase',function(data){
    // 必须返回处理结果
    return data.toUpperCase();
});

new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
});

调用:

<div id="app">
     <!-- 调用全局过滤器 -->
     <h1>{{msg | toUpperCase}}</h1>
</div>

4.2-私有过滤器

只能在当前vue实例中使用

定义

new Vue({
    data:{
      	time:Date.now()  
    },
    // 私有过滤器
    filters:{
        // 带参数的过滤器
       dateFmt(time,divider='/'){
            const date=new Date(time);
            const y=date.getFullYear(); // 获取年份
            const m=date.getMonth()+1;  // 获取月份
            const d=date.getDate(); // 获取日期
            const h=date.getHours();    // 获取小时
            const mm=date.getMinutes(); // 获取分钟
            const s=date.getSeconds();  // 获取秒数
            return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;
        },
        // 将小写字母转成大写
        upperCase(data){
            return data.toUpperCase();
        },
        // 字符串翻转
        reverse(str){
            return str.split('').reverse().join('');
        }
    }
});

调用

<!--带参数的过滤器--> 
<h1>{{time|dateFmt('~')}}</h1>

<!--过滤器的串联使用-->
<h1>{{msg|upperCase|reverse}}</h1>

5-单元素过渡动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fbjWWNYz-1609757116962)(media\过渡动画原理图.png)]

5.1-自定义过渡类名

使用transition标签对目标元素进行包裹
- appear: 让目标元素以动画方式入场
- name: 自定义过渡类名前缀, 默认前缀为v
```
<transition name="slide" appear>
    <h1 v-show="isShow">{{msg}}</h1>
</transition>
```

针对系统提供的2组6个css类选择器进行样式编写

 /* 进入前/离开后 */
.slide-enter,.slide-leave-to{
    left: -400px;
}
/* 进入中/离开中 */
.slide-enter-active,.slide-leave-active{
    position: relative;
    transition: all 1.5s;
}
/* 进入后/离开前 */
.slide-enter-to,.slide-leave{
    left:0;
}

5.2-使用第三方动画类库

引入第三方动画类animate.css

<link rel="stylesheet" href="./libs/animate.css@3.5.1.css">

使用transition标签对目标元素进行包裹

enter-active-class: 进入过程中需要使用的动画类名
leave-active-class: 离开过程中需要使用的动画类名
appear: 让目标元素以动画方式入场

<!--animated: 基础动画类名, 必须添加-->
<transition enter-active-class="animated swing" leave-active-class="animated wobble" appear>
    <h1 v-show="isShow">{{msg}}</h1>
</transition>

new Vue({
    el:'#app',
    data:{
        msg:"hello",
        isShow:true
    },
    methods:{
        toggle(){
            this.isShow=!this.isShow;
        }
    }
});

6-列表过渡动画

6.1-使用第三方动画类库

引入第三方动画类animate.css

<link rel="stylesheet" href="./libs/animate.css@3.5.1.css">

使用transition-group标签对目标元素进行包裹

enter-active-class: 进入过程中需要使用的动画类名
leave-active-class: 离开过程中需要使用的动画类名
appear: 让目标元素以动画方式入场

 <transition-group enter-active-class="animated swing" leave-active-class="animated wobble" appear>
     <h1 v-for="(item,index) in list" :key="index">{{item}}</h1>
</transition-group>

 new Vue({
     el: '#app',
     data: {
         brand:'',
         list: ['奔驰', '奥迪', '宝马']
     },
     methods: {
         // 添加品牌
         add(){
             if(this.brand===''){
                 return alert('请输入品牌名称');
             }
             this.list.push(this.brand);
             // 重置表单
             this.brand=''
         }
     }
 });

6.2-自定义过渡类名

使用transition-group标签对目标元素进行包裹

name: 自定义过渡动画类名前缀, 默认前缀为v
appear: 让目标元素以动画方式入场

 <transition-group appear>
     <h1 v-for="(item,index) in list" :key="item">{{item}}</h1>
</transition-group>

 new Vue({
     el: '#app',
     data: {
         brand:'',
         list: ['奔驰', '奥迪', '宝马']
     },
     methods: {
         // 添加品牌
         add(){
             if(this.brand===''){
                 return alert('请输入品牌名称');
             }
             this.list.push(this.brand);
             // 重置表单
             this.brand=''
         }
     }
 });

自定义过渡动画类名

 .v-enter,.v-leave-to{
     opacity: 0;
}
.v-enter-active,.v-leave-active{
    transition:opacity 2s;
}
.v-enter-to,.v-leave{
    opacity:1
}

7-本地存储localStorage复习

localStorage: 浏览器端的本地存储(HTML5的新特性)
数据存储的位置: 电脑磁盘
存储数据量: 比较大
存储数据类型: 字符串

7.1-相关方法

存储数据
```
localStorage.setItem('key','data');
```
获取数据
```
localStorage.getItem('key');
```
移除数据
```
localStorage.removeItem('key');
```

8-参考网站

vue官网
-leave{
opacity:1
}

7-本地存储localStorage复习

localStorage: 浏览器端的本地存储(HTML5的新特性)
数据存储的位置: 电脑磁盘
存储数据量: 比较大
存储数据类型: 字符串

7.1-相关方法

存储数据
```
localStorage.setItem('key','data');
```
获取数据
```
localStorage.getItem('key');
```
移除数据
```
localStorage.removeItem('key');
```

8-参考网站

是姐姐的甜崽吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-day03

vue-day031-MVVM设计模式M(Model): 数据层, 处理数据V(View): 视图层, 展示操作界面VM(View Model): 视图模型层, 链接视图层和数据层中间纽带, 将数据层的数据交给视图层渲染, 将视图层的操作同步到数据层[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hI62SKdv-1609757116959)(media\mvvm.jpg)]2-watch侦听器本质: 特殊的函数作用: 监视data中的某个数据的改变, 从
复制链接

扫一扫