Vue基础知识学习笔记

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

vue官方文档

常用指令

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

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

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