vue常用的指令汇总

vue常用指令汇总

1、v-clocak:指令用法，解决插值表达式存在闪烁的问题
2、v-text：填充纯文本 渲染的时候源码输出，写的啥输出啥
3、v-html:填充HTML片段 渲染的时候被解析
4、v-pre:填充原始信息
5、v-once:只编译一次
6、v-model:数据的双向绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会发生变化

<div id = "app">
        <p v-text="text"></p>
        <!-- <span>text标签在渲染的时候被源码输出</span> -->

        <p v-html="html"></p>
        <!-- html标签在渲染的时候被解析 -->

        <p>{{mess}}</p>
        <!-- 信息内容 -->

        <span v-pre>{{this will not be complice}}</span>
        <!-- {{this will not be complice}} -->

        <span v-pre>{{msg}}</span>
        <!-- {{msg}} -->
        
    </div>

<script>
    var str = new Vue({
        el:"#app",
        data:{
            text:"<span>text标签在渲染的时候被源码输出</span>",
            html:"<span>html标签在渲染的时候被解析</span>",
            mess:"信息内容",
            msg:"aaaa"
        },
        methods:{

        }
    })
</script>

事件绑定

1、v-on:简写@

事件修饰符

1、.stop阻止冒泡
2、.prevent阻止默认行为

按键修饰符

1、.enter 回车键
2、esc 退出键

自定义按键修饰符

全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 1999

属性绑定

1、v-bind:缩写 ：

分支循环结构

1、v-if 控制元素是否渲染到页面（多个元素，通过条件判断展示或者隐藏某个元素，或者多个元素 ，进行视图之间的切换）
2、v-show 控制元素是否显示（表示已经渲染到页面）
3、v-for 遍历数组

注释：v-show和v-if的区别
v-show：本质就是标签display：none,控制隐藏
v-show只编译一次，后面其实就是控制css,而v-if不停的销毁和创建，故v-show性能更好些，
v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部地事件监听和子组件。