Vue指令

v-bind

单向绑定解析表达式，v-bind:xx可以简写为:xx。该指令的意思是将实例的某个值或者某个表达式赋值给标签对应的属性

    <a v-bind:href="name" ></a>
    <!-- 将data中name 赋值给 a标签的href属性 -->
    <a :href="name" ></a>
    <!-- 简写 -->

v-bind属于单向绑定，数据从data-->DOM

v-on

用来给元素绑定事件,v-on可以简写为@

    <button v-on:click="myFun()">按钮</button>
    <!--通过v-on指令给button元素绑定了一个myfun的函数 -->
    <button @click="myFun()">按钮</button>
    <!-- 简写 -->

v-for

用来遍历数组，对象，字符串

• 遍历数组(item是值,index是下标)

    <div id="box">
        <ul>
            <li v-for="item,index in arr">
                {{item}}--{{index}}
            </li>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    arr:["aaa","bbb","ccc"]
                }
            },
        }
        var app = Vue.createApp(obj).mount("#box")
    </script>

• 遍历对象(value是值,key是键,index是索引)

<div id="box">
    <ul>
        <li v-for="value,key,index in obj">
            {{value}}--{{key}}--{{index}}
        </li>
    </ul>
</div>
<script>
    var obj = {
        data(){
            return {
                obj:{
                    name:"Vue",
                    age:18,
                    address:"中国"
                }
            }
        },
    }
    var app = Vue.createApp(obj).mount("#box")
</script>

• 遍历字符串(value是下标对应的值,index是下标)

<div id="box">
    <ul>
        <li v-for="value,index in str">
            {{value}}--{{index}}
        </li>
    </ul>
</div>
<script>
    var obj = {
        data(){
            return {
                str:"abcdefg"
            }
        },
    }
    var app = Vue.createApp(obj).mount("#box")
</script>

v-show

条件渲染-动态控制节点/标签是否展示，记住是展示，DOM树中有该节点

<div id="box">
    <div v-show="isShow">
        hello Vue
    </div>
</div>
<script>
    var obj = {
        data(){
            return {
                isShow:true
            }
        },
    }
    var app = Vue.createApp(obj).mount("#box")
</script>

v-if

条件渲染-动态控制节点/标签是否存在

<div id="box">
    <div v-if="isShow">
        hello Vue
    </div>
</div>
<script>
    var obj = {
        data(){
            return {
                isShow:true
            }
        },
    }
    var app = Vue.createApp(obj).mount("#box")
</script>

v-show和v-if的区别

1. 控制方式：v-show只是简单的控制元素的display属性，通过CSS的display:block（显示）或者none（隐藏）来控制DOM元素。v-if则是条件渲染，条件为真时，元素会被渲染到DOM中，条件为假时，元素会被从DOM中删除。
2. 性能影响：v-show有更高的初始渲染开销，适合于频繁的切换。v-if的首次渲染开销较小，更适合用于条件变化不大时使用。
3. 配套条件：v-if有配套的v-else和v-else-if。v-show没有。
4. 搭配使用：v-if可以搭配template使用。v-show不可以。

总的来说，v-show更适用于频繁切换的情况，而v-if更适用于条件渲染的情况。

v-model

双向数据绑定，v-model的简写方式：v-model。只有——有value属性的标签可以使用它。

  <!-- 双向绑定 -->
 <input type="text" v-model:value="name"/>
 <!-- 简写方式 不加 :value -->
 <input type="text" v-model="name"/>

双向绑定，数据不仅能从data流向页面，还能从页面流向data。 就是说你在页面中输入框改变数值的时候，对应标签的值也会跟着一起变化。

v-html

作用：向指定节点中渲染包含html结构的内容。

注意：它会替换掉节点中所有的内容，{{xx}}则不会。同时他还可以识别html结构

 <div> hello,{{name}}</div>
 <!--  下方的hello 会被全部替换成 name所对应的值 -->
 <div v-html="name"> hello</div>

使用v-html时,注意xss漏洞