VUE（3）基本指令

1、内容渲染（ v-text 、v-html、{{}} ）

（1）    v-text:    ==>    渲染纯文本内容，覆盖原内容

                     绑定DOM元素：<div v-text='textValue'></div>

                     绑定data方法：data(){return { textValue: 'this is v-text', } }

（2）   {{ }}         ==>    渲染纯文本内容，拼接原内容

                     绑定DOM元素：<div> {{textValue}} </div>

                     绑定data方法：data(){return { textValue: 'this is v-text', } }

（3）   v-html:    ==>     渲染 Html 内容   

                     绑定DOM元素：<div v-html='htmlValue'></div>

                     绑定data方法：data(){return { htmlValue: '<button>v-html</button>',, } }

2、属性绑定

（1）    v-bind:    ==>      绑定DOM元素的属性值        （        可以简写成   :        ）

                    <img v-bind:src = ' '>

                     <img :src = ' '>

3、事件绑定

（1）   v-on:        ==>      绑定DOM元素的event          （         如 click 、 keyup 、input        )

                                                                                          （          可以简化为：@                        ）

                     绑定DOM元素：

         <input type='button' v-on:click="changeBind(name,$event)" value='v-on:click'></input>

                     绑定methods方法：

                                methods:{
                                            changeBind( name , e ):function(){

                                                console.log(e.target.value)

                                                        // e为事件 , e.target 为事件所绑定的dom元素 , value为属性值
                                            },
                                },

4、事件修饰符      ==>     如 @click.once   事件仅生效一次

5、<!-- v-if/show    条件开关绑定 -->
        <div>
            （1）<!-- 增删dom元素开关，节省初始化渲染开销，增加dom切换开销 -->
            <div v-if="x1 === '111'">
                x1 === 111 ，触发隐藏div   (v-if)
            </div>
            （2）<!-- 显隐样式渲染开关，节省dom切换开销，增加初始渲染开销 -->
            <div v-show="x2 === '222'">
                x2 === 222 ，触发隐藏div   (v-show)
            </div>
        </div>

6、<!-- v-for    绑定对象数组 -->
        <div>
            <table v-for="(item,index) in nameList" class="myTable">
                <tr>
                    <td>{{index}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.info}}</td>
                </tr> 
            </table>
        </div>