Vue模版语法（初学Vue之v-指令语法）

2024-04-22 11:36:03
开发
14

一、介绍

1.概念

2.常见指令语法及用法

1.v-bind:

2.v-model:

3.v-if / v-else-if / v-else:

一、介绍

1.概念

在Vue.js中，v-开头的指令是用来添加动态行为到你的HTML元素或者组件上的。这些指令可以被应用到普通的HTML元素上，也可以用在Vue.js组件上。

2.常见指令语法及用法

1.v-bind:

将HTML属性绑定到Vue实例的数据上，实现数据的动态更新。

<a v-bind:href="url">Link</a>

2.v-model:

在表单控件元素上创建双向数据绑定。

<input v-model="message">

3.v-if / v-else-if / v-else:

根据表达式的值条件性地渲染元素。

<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>

4.v-for:

基于数据源循环渲染列表。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

5.v-on:

绑定事件监听器，用于触发响应函数。

<button v-on:click="handleClick">Click me</button>

6.v-show:

根据表达式的值控制元素的显示和隐藏，类似于CSS的display属性。

<p v-show="isVisible">Now you see me</p>

7.v-pre:

跳过这个元素和它的子元素的编译过程，用于显示原始Mustache标签。

<span v-pre>{{ message }}</span>

8.v-cloak:

这个指令保持在元素上直到关联实例结束编译，用于防止未编译的Mustache标签显示在页面上。

<div v-cloak>{{ message }}</div>

二、使用

1.Mustache插值语法

插值语法：{{}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.基本使用 -->
        <h2>{{message}}</h2>
        <h2>当前计数：{{counter}}</h2>
        <!-- 2.表达式 -->
        <h2>计数双倍：{{counter*2}}</h2>
        <h2>展示的信息: {{infos.split("")}}</h2>
        <!-- 3.三元运算符-->
        <h2>{{age >= 18 ? "成年人" : "未成年人"}}</h2>
        <!--调用methods函数-->
        <h2>{{formatDate(123)}}</h2>
        <!-- 4.注意： 这里不能定义语句-->
        <!-- <h2>{{const name = "why"}}</h2> -->
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    counter: 100,
                    infos: "my name is sleep",
                    age: 19,
                    time:123
                }
            },
            methods:{
                formatDate:function(date){
                    return "2022-10-10" + date
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

2.v-once指令使用

只执行一次绑定数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 指令： v-once -->
        <h2 v-once>{{ message }}
            <span>数字：{{counter}}</span>
        </h2>
        <h1>{{message}}</h1>
        <button @click="changeMessage">改变message</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    counter: 100
                }
            },
            methods: {
                changeMessage: function () {
                    this.message = " 你好啊，xxx"
                    counter = counter + 100
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

3.v-text指令使用

插入text文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text = "message"></h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Vue" 
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

4.v-html指令使用

插入html元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{content}}</h2>
        <h2 v-html="content"></h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    content:`<span style="color: red; font-size: 30px;">哈哈哈</span>`
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

5.v-pre指令使用

显示原始标签，不使用mustache插值语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <p>当前计数：{{counter}}</p>
        <p v-pre>{{counter}}</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    counter: 0
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

6.v-cloak指令使用

胡子语法：vue语法使用时展现对应的html内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 v-cloak>{{message}}</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        setTimeout(() => {
            const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Vue"
                }
            },
        })
        app.mount("#app")
        }, 3000);
    </script>
</body>

</html>

7.v-memo指令使用

数组展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-memo = "[name,age,height]">
            <h2>姓名：{{name}}</h2>
            <h2>年龄：{{age}}</h2>
            <h2>身高：{{height}}</h2>
        </div>
        <button @click="updateInfo">改变信息</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    name: "why",
                    age: 18,
                    height: 1.88
                }
            },
            methods:{
                updateInfo:function(){
                    this.name = "newName";
                    this.age = 20;
                    this.height = 1.75;
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

8.v-bind指令使用

动态绑定属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <button @click = switchImg>切换图片</button>
        </div>
        <!--绑定img的src属性-->
        <img v-bind:src="showImg" alt="">
        <!--语法糖： v-bind->:  -->
        <img :src="showImg" alt="">
        <!--绑定a的href属性-->
        <a v-bind:href="href">点击进入百度</a>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    imgUrl1:"https://img-operation.csdnimg.cn/csdn/silkroad/img/1712817929834.png",
                    imgUrl2:"https://img-operation.csdnimg.cn/csdn/silkroad/img/1712629628741.png",
                    showImg:"https://img-home.csdnimg.cn/images/20240416090633.jpg",
                    href:"http://www.baidu.com"
                }
            },
            methods:{
                switchImg:function(){
                    this.showImg = this.showImg === this.imgUrl1 ? this.imgUrl2 : this.imgUrl1
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

三、总结

v-开头的指令是Vue.js中用来添加动态行为到HTML元素或者组件上的。常见的指令包括：

v-bind: 将HTML属性绑定到Vue实例的数据上。
v-model: 创建双向数据绑定，用于表单控件元素。
v-if / v-else-if / v-else: 根据条件渲染元素。
v-for: 循环渲染列表。
v-on: 绑定事件监听器，触发响应函数。
v-show: 根据条件控制元素的显示和隐藏。
v-pre: 跳过元素和子元素的编译过程，用于显示原始Mustache标签。
v-cloak: 保持元素隐藏直到关联实例结束编译，防止未编译的Mustache标签显示。

这些指令使得Vue.js应用可以更加灵活和动态化，根据数据的变化实时更新DOM，提高了开发效率和用户体验。

原文地址:https://blog.csdn.net/m0_73916603/article/details/137927194 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1782251995000868864.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部