vue基础 - 01 （插值语法、事件绑定、属性绑定、显示/隐藏v-show、v-if 、v-else、v-else-if 、for、html和text、遮罩 / 隐藏、pre、v-once）

1、插值语法

        {{ }}：插值语法，相当于模板字符串的${ }，其中书写的代码都是JS代码，书写在双标签内容里

2、事件绑定

        旧写法：v-on:事件名=""

        新写法：@代替on     @事件名=""

        默认参数：事件触发时，默认带有参数：事件本身的相关内容，一般写event

        <el @click="函数" />

           event.target：就是当前事件触发的DOM元素

          event.target.innerHTML：标签内容

        自定义传参：官方提供了关键词$event，用来代表事件参数：<el @click="函数(参数, 参数..., $event)

3、属性的绑定

        旧写法： v-bind:属性名 = "值"

        新写法： :属性名 = "JS代码范围"

4、显示与隐藏     

        v-show='true'：显示

        v-show='false'：隐藏

        本质是利用css的display:none

5、v-if 、v-else、v-else-if         

        v-if 、v-else、v-else-if  条件为真，加载元素；条件为假，删除元素

        v-show和v-if都能实现元素的隐藏和显示，差别在哪儿？

             v-show 是利用cssd的display:none事件隐藏

             v-if 利用删除或添加DOM元素实现隐藏/显示

             v-show 性能高，推荐使用，v-if 要删DOM，性能低，不推荐

6、for 、key

        v-for="item of  数组/对象"，for...in 和for...of 效果一致， 写在哪个元素上，就可以遍历生成此元素

        可以写两个参数（item,index），代表“元素/序号”、“属性值/属性名”

        也可以遍历数字，v-for="item of 8"，底层会把数字转为[1,2,3,4,5,6,7,8]

        :key的作用：提高遍历的数组中元素 增/删 情况下，DOM的刷新效率

        如果列表元素，由数组遍历而成，如果数组中间部分有增删，则需要把之前列表下方的元素先删除，然后绘制成新元素

         key的作用：为每个元素增加一个唯一标识，当重绘时，系统发现要绘制的元素，和已有的某个元素的唯一标识相同，则直接使用此元素代替 删除+重新添加 操作

        此处理论上不应该用index作为唯一标识，只是脚手架项目部要求必须给一个唯一标识才可以，否则有报错提示

        在没有增删需求的场景下，key没有用，只是官方要求必须写key

 <li v-for="(item, index) in names" :key="index">
        {{ item }}
 </li>

7、html和text

        插值语法{{}}：本质是innerText  ->  原样输出

             v-text=" " ：效果同{{}}

             v-html=" " ：类似于innerHTML  ->  可以被浏览器解析

8、遮罩 / 隐藏

        实际工作时，通常JS文件不会直接书写在HTML中，而是通过引入的方式，把JS制作为独立的文件

        极少见的状况：网速极慢，HTML加载完毕，但是JS未加载完毕

       解决：在vue未加载完毕之前，先隐藏DOM元素

       v-cloak：必须搭配css  display:none使用

      本质：new Vue( )完成后，会自动删除v-cloak属性

9、pre

        v-pre：专门针对{{ }}语法，让标签中的此语法不解析，原样输出，忽略vue关键词

10、一次性渲染

        v-once：值的变化只更新一次DOM，后续不会修改