vue笔记1

data中装的是定义的变量，跟插值对应

        1.data:{}对象式

        2.data(){return{}}函数式,注：搭建脚手架（vue-cli）后,一定要使用函数式

        注：不可以使用箭头函数

绑定容器的2种方式

    1.el绑定:"容器id或class等"

    2.Vue实例.$mount("容器id或class等"),注：一定写在最后

    创建vue实例

        绑定元素名称使用v-bind:属性名 == :属性名

绑定事件

        v-on:事件 == @事件

        注：事件名称一定不要加on

         methods处理的函数方法

v-for用于遍历数组，对象，字符串，指定次数

        注：:key="需要唯一"

v-cloak 解决网速慢展示插值|页面出现闪烁或白屏，

        使用需要给标签添加v-cloak,还需要添加上面代码

v-if和v-show区别

        1.相同的：都可以进行显示隐藏

        2.不同点：v-if存在或不存在，v-show展示或不展示

        3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗

        多次的显示隐藏推荐使用v-show

       

         v-if和v-for优先级和使用事项

        在vue2中v-for比v-if优先级高

        在vue3中v-if比v-for优先级高

        v-if和v-for在vue2或vue3中都不要同时使用，

        如果需要使用在外层先使用判断，在进行循环

<!-- v-else,v-cloak,v-once，v-pre不需要带值 -->

        <!-- v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model

        v-else,v-else-if,v-text,v-html,v-cloak,v-once,v-pre, -->

        <!-- v-text和v-html，插值 区别 -->

        <!-- 1.相同点：v-text和v-html都会覆盖原本内容

        不同点：v-text文本，v-html标签

        插值会进行拼接

        注：一定不要在用户提交时使用v-html-->

        v-once只加载一次，静态内容，因为不会修改值所以优化了性能

        v-pre可以跳过插值或指令不加载

<!-- v-bind:单向数据绑定,由data流行页面 -->

        <!-- v-model双向数据绑定，由data流向页面或页面(用户输入)流向data -->

<!-- 事件修饰符

        .prevent阻止浏览器默认行为

        .stop阻止冒泡事件

        .once只能触发一次

        .capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发

        打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，

        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）

        .self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)

        给元素设置self后，点击当前设置的自身元素会触发

        点击设置self的子类，会跳过设置了self的元素-->

        <!-- event.stopPropagation();阻止冒泡事件 -->

<!-- v-model修饰符

        v-model.lazy失去焦点后提交数据(data)

        v-model.number可以将字符串转换为有效数字  "1"==1

        v.model.trim清除前后空格 -->

<!-- .number可以将字符串转换为有效数字  "1"==1 -->

            <!-- 注：通常使用v-model绑定表单v-model="",

            v-model:value="" 需要设置默认值-->

            <!-- .lazy失去焦点后提交数据(data) -->