VUE基本指令-CSDN博客

本文链接：https://blog.csdn.net/m0_71293166/article/details/137601586

本文详细介绍了Vue框架中的八种基本指令：v-text用于设置元素内容，v-html处理HTML结构，v-on绑定事件，v-show控制元素显示，v-if条件渲染，v-bind动态绑定属性，v-for生成列表，以及v-model用于双向数据绑定。实例演示了如何在实际项目中应用这些指令。

摘要由CSDN通过智能技术生成

VUE基本指令

1、v-text

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
</head>
<body>
<div id="app">
    <h2 v-text="message"></h2>
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"vue学习"
        }
    })
</script>
</body>
</html>

2、v-html

v-html指令的作用是:设置元素的innerHTML
内容中有htm|结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
    <h2 v-html="context"></h2>
    <h2 v-text="context"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            context:"<a href='https:www.baidu.com'>百度</a>"
        }
    })
</script>

3、v-on

v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车

<div id="app">
   <input type="button" value="点击事件绑定" v-on:click="doIt">
        <!--简写-->
    <input type="button" value="点击事件简写" @click="doIt">
    <input type="button" value="双击事件" @dblclick="doIt"></br>
    <button @click="changeData"><h1>修改</h1></button><h1>{{context}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            context:"改数据！！！！！"
        },
        methods:{
            doIt:function () {
                alert("111")
            },
            changeData:function () {
                this.context="已修改数据！！！！"
            }
        }
    })
</script>

4、v-show

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏

<div id="app">
    <button type="button" value="切换图片" @click="isShow">切换</button>
    <img v-show="vshow" src="/images/IMG42.jpg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            vshow:true
        },
        methods:{
            isShow:function () {
                this.vshow=!this.vshow;
            }
        }
    })
</script>

5、v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除

<div id="app">
    <button type="button" value="切换" @click="isShow">切换</button>
    <img v-if="vshow" src="/images/IMG42.jpg">
    <p v-if="vshow"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            vshow:true
        },
        methods:{
            isShow:function () {
                this.vshow=!this.vshow;
            }
        }
    })
</script>

6、v-bind

v-bind指令的作用是:为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增class建议使用对象的方式

<div id="app">
    <img v-bind:src="imgSrc" v-bind:title="imgTitle" >
    <!--简写-->
    <img :src="imgSrc" :title="imgTitle" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"/images/IMG42.jpg",
            imgTitle:"春芽"
        },
        methods:{

        }
    })
</script>

7、v-for

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的

<div id="app">
   <ul>
       <li v-for="(item,index) in arr">{{index+1}}.{{item}}</li>
   </ul>

    <h2 v-for="item in objArr" v-bind:title="item.name">{{item.name}},{{item.age}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           arr:["11","22","33","44"],
            objArr:[
                {name:"zhanfsan",age:18},
                {name:"lisi",age:19},
                {name:"wangwu",age:28}
            ]
        },
        methods:{

        }
    })
</script>

8、v-model

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<==>表单元素的值

<div id="app">
  <input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
          message:"vue学习"
        },
        methods:{

        }
    })
</script>