Vue常用指令（入门系列）1.Vue常用指令总结 2.Vue常用指令用法 2.1文本相关 2.1.1 v-text bo

转载请注明出处，谢谢
Vue入门系列友情链接:
Vue基础框架（入门系列）
Vue常用指令（入门系列）--------当前文章

1.Vue常用指令总结(干货放在最前边)

文本相关：v-text  v-html
事件相关：v-no （可简写为@）
显示隐藏：v-if   v-show
属性操作：v-bind（可简写为：）
遍历数据：v-for
数据双向绑定：v-model


vue中提供的指令 都是 v-开头

2.Vue常用指令用法

2.1文本相关

2.1.1 v-text

boyd中

<body>
    <div id="app">
       <h2 v-text="message+'!'">深圳</h2>   //Hello!
       <h2 v-text="info+'!'">深圳</h2>      //Vue!
       <h2>{{ message + '!' }} 深圳</h2>    //Hello!深圳
    </div>
</body>

script中

<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello',
            info:'Vue'
        }
    })
</script>

2.1.2 v-html

boyd中

<body>
    <div id="app">
        <h2 v-text="message+'!'">深圳</h2>       //Hello!
        <h1>{{content}}</h1>                    //Vue
        <h1 v-html="con"></h1>                 //百度（超链接）
    </div>
</body>

script中

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello',
            content: 'Vue',
            con: "<a href='https://www.baidu.com'>百度</a>"
        }
    })
</script>

2.1.3 小结

v-html 可以解析变量里面的标签相当于innerHTML
v-text 无法解析变量里面的标签相当于innerText

2.2事件相关

简写：v-on 可以简写成@
语法：@事件名.事件修饰符='函数名/VUE表达式'

2.2.1点击事件

boyd中

<body>
    <div id="app">
        <input type="button" value="点击" @click="sayHi">  //吃了没 （点击后弹窗出现）
    </div>
</body>

script中

<script>
    var app = new Vue({
        el:"#app",
        methods: {           
            sayHi(){
                alert("吃了没");
            }
        },
    })
</script>

2.2.2其他事件

@click ：点击事件
@keyup ：键盘事件

2.2.3修饰符

事件修饰符（v-on）
例如@submit.prevent="submit"

名称	说明
事件.stop	阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
事件.prevent	阻止默认事件发生
事件.capture	使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
事件.self	只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
事件.once	只执行一次

按键修饰符
例如：@keyup.enter="" 或者 @keyup.13=""

别名修饰符	键值修饰符	对应按键
.delete	.8/.46	回格 / 删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

2.3显示隐藏

2.3.1 v-show、v-if

boyd中

<body>
    <div id="app">
         <div v-show="s">v-show是否显示</div>  //当s等于false不显示元素
         <div v-if="s">v-if是否显示</div>     //当s等于true显示元素
    </div>
</body>

script中

<script>
    var app = new Vue({
        el: '#app',
        data: {
           s:false,
        },
    })
</script>

2.3.2 指令的值

这两种指令的值是布尔值值为ture的时候元素显示值为false的时候元素隐藏
布尔表达式 false true 1===1 1==1 2>1 '' undefined 0 null
0 '' null undefined NaN 默认都是转换成false

2.3.3 两者区别

v-if 指令值为false 的时候,会把dom节点删除,把删除的节点保存到了缓存中,下一次v-if的值为true的时候再从缓存中拿出来 ,这样就不用重复创建dom节点了
v-if指令并不会频繁销毁和穿件dom节点不用担心性能问题
v-if是懒性的第一次为true的时候才会真正的创建dom
v-show相当于给元素添加display: none;

2.4属性操作 v-bind

boyd中

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">   
        <img :src="imgSrc" alt="">               //简写
    </div>
</body>

script中

<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        },
    })
</script>

2.5遍历数据 v-for

boyd中

<body>
    <div id="app">
        <ul>
           <li v-for="(it,index) in arr">
                {{ index+1 }}地址:{{ it }}
           </li>
        </ul>
    </div>
</body>

script中

<script>
    var app = new Vue({
       el:"#app",
       data:{
           arr:["北京","上海","广州","深圳"],          
       }
    })
</script>

2.6数据双向绑定 v-model

boyd中

<body>
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{ message }}</h2>
    </div>
</body>

script中

<script>
     var app = new Vue({
         el: "#app",
         data: {
             message: "Hello Vue"
         }
     })
</script>

转载请注明出处，谢谢