Vue-day03

Vue-day03

提问：

1.动态绑定样式的方式

答：1.通过绑定class ： 1. :class = '变量名' 变量名需要在data中声明，并且值要在style中定义

 2.  :class = '[index%2==0 : "red" : "green"]'  只需要在style中声明类名 （三目）
 3.  :class = '{red : true,green : true}'  只需要在style中声明即可

2.通过绑定style ： 1. :style = '变量名' 必须要在data中声明 对应样式属性有连字符的 需要换为驼峰写法

2. :style = '[变量名1，变量名2]'

2.修饰符有哪些？

答: 事件修饰符 ：.prevent ：阻止事件默认行为

.stop ：阻止事件冒泡

.capture ：捕获事件冒泡

.self ：只能自己触发自己

.once：指定的事件只执行一次

键盘修饰符 :

@keydown.up 键盘方向键向上 .down 向下 .right 向右 .left 向左

.enter 回车键 .esc 返回键 .tab 制表健 .space 空格键

鼠标修饰符 : @click .left 鼠标左键 .middle 鼠标中间滚轮 .right 鼠标右键

表单修饰符 : .lazy : 失去光标后 更新数据 typeof 检测数据类型

.number : 将输入的内容的数据类型自动转换成数值

只验证第一个字符，如果是数字类型，那么返回结果就是number类型

如果第一个字符不是数字，那么返回结果为string类型，同时可以验证默认值。

（输入的第一个只能是数字或者小数点或者是正负号时才会生效。）

.trim : 自动过滤用户输入的首尾空白字符

只能去除用户输入的首尾空格，默认值中的首尾空格不会去除。

3.事件修饰符有哪些？

答：事件修饰符 ：.prevent ：阻止事件默认行为

.stop ：阻止事件冒泡

.capture ：捕获事件冒泡

.self ：只能自己触发自己

.once：指定的事件只执行一次

4.表单修饰符有哪些？

答： 表单修饰符 : .lazy : 失去光标后 更新数据 typeof 检测数据类型

.number : 将输入的内容的数据类型自动转换成数值

只验证第一个字符，如果是数字类型，那么返回结果就是number类型

如果第一个字符不是数字，那么返回结果为string类型，同时可以验证默认值。

（输入的第一个只能是数字或者小数点或者是正负号时才会生效。）

.trim : 自动过滤用户输入的首尾空白字符

只能去除用户输入的首尾空格，默认值中的首尾空格不会去除。

5.生命周期有哪些钩子函数?

答： Vue生命周期可以分为8个阶段：

beforeCreate 创建之前 undefined

created 创建完成 el:undefined data和msg的值已经获取到

beforeMount 挂载之前 数据都已经拿到，el:找到挂载点但是未解析数据

mounted 挂载完成 数据和节点都已经解析完毕

beforeUpdate 更新之前 更新前后数据都是最新的

updated 更新完成

beforeDestroy 销毁之前

destroyed 销毁之后

1.动画

基础使用：

给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以
<transition>
    <div class="box" v-show='isShow'></div>
</transition>
之后去样式中设置6个类名即可
 .v-enter {
            opacity: 0;
        }
​
        .v-enter-to {
            opacity: 1;
        }
​
        .v-enter-active {
            transition: all 2s;
        }
​
        .v-leave {
            opacity: 1;
        }
​
        .v-leave-to {
            opacity: 0;
        }
​
        .v-leave-active {
            transition: all 2s;
        }
​

如果页面中有多个元素需要添加不同的动画，那么只需要给<transition>增加name属性，同时把6个样式中的v-替换为name的值
 <transition name='aa'>
    <div class="box" v-show='isShow'></div>
 </transition>
 样式中:
  .aa-enter {
  opacity: 0;
  }
​
.aa-enter-to {
opacity: 1;
}
​
.aa-enter-active {
transition: all 5s;
}
​
.aa-leave {
opacity: 1;
}
​
.aa-leave-to {
opacity: 0;
}
​
.aa-leave-active {
transition: all 5s;
}

2.动画库

官网:https://animate.style/

使用:引入css，给需要添加动画的元素用<transition>包裹起来，然后添加属性 enter-active-class leave-active-class

 <!-- enter-active-class   leave-active-class 使用：引入第三库 必须添加基类+效果类名 -->
     <transition 
     enter-active-class='animate__animated animate__bounce'
     leave-active-class = 'animate__animated animate__backOutUp'
     >
 <div class="box" v-show='isShow'></div>
 </transition>

2.监听

-浅监听

主要监听基本数据类型
监听的是在data中声明的变量，而且监听的名字不能更改
 // 浅监听 :只能监听基础数据类型
 name(newVal, oldVal) {
 console.log(newVal, oldVal)
 },

-深监听

 //    监听引用数据类型用深监听 只能获取最新的数据 handler名称不能换  弊端；使用深监听会引起页面的卡顿
 // 非必要情况不要使用，一旦要使用，需要把深监听转换为浅监听
 obj: {
     handler(a) {
     console.log(a)
     },
 deep: true
 },

百度搜索案例:

百度：http://suggestion.baidu.com/su?cb=callback&wd=123

3.过滤器 filter

全局过滤器 vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
局部过滤器 vue实例中增加配置项filters  过滤器名称:function(){过滤操作}

过滤手机号码
<div id="app">
        <!-- | 叫做管道符  管道符前面是需要过来的属性，过滤器后面是过滤器名称-->
      {{tel | filterTel}}
      <!-- 下面的是错误的，因为是局部定义的过滤器 -->
      {{tel | filTel}} 
    </div>
    <script>
    // 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterTel',(tel)=>{
    return tel.slice(0,3)+'****'+tel.slice(7)
})

    let vm = new Vue({
        el: '#app',
        data: {
          tel:'15858589958'
        },
        methods: {

        },

        
    })</script>

过滤价格
<div id="app">
       价格:{{price | filterPrice}}
    </div>
    <script>

// 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterPrice',(price)=>{
    return price.toFixed(2)
})
    let vm = new Vue({
        el: '#app',
        data: {
          price:29
        },
        methods: {

        },

        
    })
   
// filter: 全局过滤器  vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
//         局部过滤器  vue实例中增加配置项filters  过滤器名称:function(){过滤操作}
</script>

过滤时间
<script>
<div id="app">
      时间:{{time | filterPrice}}
    </div>
// 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterPrice',(time)=>{
    // 获取当前时间
    let data = new Date(time)
    // 年
    let year = data.getFullYear();
    // 月
    let month= (data.getMonth()+1+'').padStart(2,'0');
    // 日
    let day = (data.getDate()+'').padStart(2,'0')
    // 时
    let hours = data.getHours()
    //分
    let min= data.getMinutes()
    // 秒
    let sec = data.getSeconds() 
    return `${year}-${month}-${day} ${hours}:${min}:${sec}`
})
    let vm = new Vue({
        el: '#app',
        data: {
            // new Date().getTime()  获取当前时间戳
          time:1609917028669
        },
        methods: {

        },

        
    })
   
// filter: 全局过滤器  vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
//         局部过滤器  vue实例中增加配置项filters  过滤器名称:function(){过滤操作}
</script>

4.计算属性

通过计算得出来的属性叫做计算属性 配置项(computed)

5.购物车案例

跨域：协议（http：，https：,fill本地）、域名（www.baidu.com）、端口号（：8080，：8081)只要有一个不一样就会出现跨域

用jsonp解决

jsonp原理：动态创建script标签，利用src属性进行跨域。

1.动态创建script标签

2.给src赋值

3.得到数据渲染页面

4.回调函数（请求回来的数据）

 

面试题:

1.watch与computed的区别

watch:函数不需要调用

computed:调用的时候不需要添加()

处理场景:

watch:一个数据影响多个数据

computed:一个数据受多个数据影响

watch：属于监听,监听数据的改变

computed：通过计算得到的属性

2.watch 与methods区别？

watch:是观察动作，自定执行

methods:是方法，需要调用