Vue基础知识学习笔记

Vue基础知识学习笔记

前言：
本篇笔记是根据李南江老师视频学习总结的，内容是老师视频讲的+自己理解为主，有些比较简单的就省略了。因为视频是2019年的了，比较久了，所以笔记内容有些用法比较旧，建议大家可以结合官网来学习更好哦！笔记内容是vue2为主，后续会继续学习vue3！（ps：笔记有不足的地方请大家多多指正呀！）
Vue官方文档

一、常用指令

• v-model：在表单控件或组件上双绑，input/textare/select
• v-once：只渲染一次
• v-cloak：数据渲染之后自动显示元素，没绑定前先隐藏，配合[v-cloak]{display：none}使用
• v-text：会覆盖原有内容，不会解析HTML
• v-html：会覆盖原有内容，会解析HTML
• v-if：条件渲染，只有true显示，false不显示不创建（消耗性能）可以直接写表达式。
• v-else：接在v-if后使用，不能单独使用

  <p v-if = "true">1</p>
  <p v-else>2</p>
  

• v-else-if：在v-if和v-else之间使用
• v-show：条件渲染，只有true显示，false隐藏，无论true或false都创建，适合多次切换，性能高
• v-for：for in 循环
• v-for = “(value,index) in list”
  内容 索引 数组/字符/数字对象
  对象：“(value,key) in obj” { {key}}-{ {value}}
• v-bind：给元素的属性绑定数据，绑定的数据合法js皆可，可省略v-bind，只写：（冒号）若v-bind对class和style绑定，:class = “[‘需绑定的类名’,…]”
• v-on：专门用于给元素绑定监听事件 @click

修饰符
.once：只触发一次回调（@click.once）
.prevent：调用event.preventDefault()，阻止默认行为
.stop：阻止事件冒泡，调用event.stopPropagation()
.self：只有当前元素触发事件，才执行回调函数
.capture：把事件冒泡变成事件捕获

按键码 keycode

自定义：Vue.config.keyCodes.f1 = 112

自定义全局指令（特点：在任何一个vue实例控制区中都可使用）

directive方法接收两个参数：指令名称，对象。指令可以在不同的生命周期阶段执行。
bind：指令被绑定到元素上的时候执行
inserted：绑定指令的元素被添加到父元素上的时候被调用

Vue.directive('自定义指令名称',{
   
    生命周期名称 : function(el){
   
        指令业务逻辑代码
    }
});

自定义指令参数

<div id="app">
<!--    <p v-color="'blue'">我是段落</p>-->
    <p v-color="curColor">我是段落</p>
</div>
<script>
    Vue.directive("color", {
     
        // 这里的el就是被绑定指令的那个元素
        bind: function (el, obj) {
     
            // el.style.color = "red";
            el.style.color = obj.value;
        }
    });
// 这里就是MVVM中的View Model
    let vue = new Vue({
     
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
     
            curColor: 'green'
        },
        // 专门用于存储监听事件回调函数
        methods: {
     
        }
    });
</script>

自定义局部指令（只有自定义那个实例可用）

在methods后加
directives: {
   
    // key: 指令名称
    // value: 对象
    'color': {
   
        bind: function (el, obj) {
   
            el.style.color = obj.value;
        }
    }
}

二、计算属性

插值语法特点：

    可以在{
  {}}中编写合法js表达式
    split("")分割字符串
    reverse()反转字符串
    join("")合并字符串
    若返回值无变化，则只执行一次。

computed:{
    //专门用于定义计算属性的
    msg:function(){
   
        let r = "abcde".split("").reverse().join("");
        return r;
    }
}
<p>{
   {
   msg}}</p>

三、自定义过滤器

全局（只能在插值和v-bind）一般用于格式化插入的文本数据

Vue.filter("过滤器名称",函数)
<p>{
   {
   name | formartStr}}</p>
Vue.filter("formartStr",function(value){
   
    value = value.replace(/学院/g,"大学");
    return value;
});
let vue = new Vue({
   
    el: '#app',
    data: {
   
        name: "广东学院, 广州学院"
    }
});

局部

filters: {
   
    // value: 过滤器处理函数
    'formartStr': function (value) {
   }
}

<p>{
   {
   name | formartStr}}</p>
filters: {
   
    "formartStr": function (value) {
   
        value = value.replace(/学院/g, "大学");
        return value;
    }
}

四、动画

过渡动画

1、类名添加

把需要执行动画的元素放到transition组件中，进入动画会通过自动查找.v-enter/.v-enter-active/.v-enter-to类名来实现，离开动画会通过自动查找.v-leave/
.v-leave-active/.v-leave-to类名来实现。需要在上面提到的类名设置需要执行动画的元素设置状态，就可以实现过渡动画。

<style>
    *{
     
        margin: 0;
        padding: 0;
    }
    .box{
     
        width: 200px;
        height: 200px;
        background: red;
    }
    .v-enter{
     
        opacity: 0;
    }
    .v-enter-to{
     
        opacity: 1;
    }
    .v-enter-active{
     
        transition: all 3s;
    }
    .v-leave{
     
        opacity: 1;
    }
    .v-leave-to{
     
        opacity: 0;
    }
    .v-leave-active{
     
        transition: all 3s;
    }
</style>
<div id="app">
    <button @click="toggle">我是按钮</button>
    <transition>
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

<script>
    let vue = new Vue({
   
        el: '#app',
        data: {
   
            isShow: false
        },
        methods: {
   
            toggle(){
   
                this.isShow = !this.isShow;
            }
        },
    });
</script>

transition中只能放一个元素, 多个元素无效
初始动画设置,在transition添加appear属性，默认进入就显示动画。
给多个不同的元素指定不同的动画，在transition添加name
（//查找.one开头的类名）

2、结合钩子函数调用（可以保持动画最终的效果）

v-on:before-enter=“beforeEnter” 进入动画之前 v-on:enter=“enter” 进入动画执行过程中
v-on:after-enter=“afterEnter” 进入动画完成之后
v-on:enter-cancelled=“enterCancelled” 进入动画被取消
v-on:before-leave=“beforeLeave” 离开动画之前
v-on:leave=“leave” 离开动画执行过程中
v-on:after-leave=“afterLeave” 离开动画完成之后
v-on:leave-cancelled=“leaveCancelled” 离开动画被取消

<transition appear