【Vue指令】

Vue指令

指令是vue开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

1、 内容渲染指令

• v-text 会覆盖元素内部原有的内容
• {{}} 插值表达式 在实际开发中用的多，只是内容的占位符不会覆盖原有内容
• v-html可以把带标签的字符串，渲染成真正的html内容

2、 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

v-bind:的指令为元素的属性动态绑定值 可以简写为 :

3、 事件绑定指令

• v-on指令可以简写为@

4、双向绑定指令

v-model

v-model能轻松实现表单输入和应用状态之间的双向绑定
v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上

5、条件渲染指令

v-if 和 v-show区别
vue的存在就是为了减少了dom操作从而提高性能
v-if频繁操作会减少性能 因为dom会频繁删除和添加
v-show只是改变了css的样式display:none 或者block，所以更推荐，更利于提高性能

6.列表渲染指令

 <div id="app">
        <table border="1" >
            <tr>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </tr>
            <!-- 官方建议：只要用到v-for指令，那么一定绑定一个:key属性 -->
            <!-- 而且尽量把id作为key的值 值类型要求为:字符串或数字类型 -->
            <!-- key的值不能重复，否则终端报错Duplicate keys detected  -->
            <tr v-for="(item,index) in list" :key="item.id " :title="item.name">
                <td>{{index+1}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </table>
    </div>

 const vm=new Vue({
       el:'#app',
        // <!-- data对象就是渲染到页面上的数据 -->
        data:{
            list:[
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'}
            ]
        }
    })

7、事件修饰符

    .prevent 阻止默认行为

    .stop 阻止事件冒泡
    
    .self  只有点击自身的时候才会被触发

8、表单修饰符

   @keyup.enter  表示按下回车抬起的时候触发
   @keyup.13 也可以使用keyCode来表示