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

码农白衣2024-04-22 9:46

目录

一、介绍

1.概念

2.常见指令语法及用法

1.v-bind:

2.v-model:

[3.v-if / v-else-if / v-else:](#3.v-if / v-else-if / v-else:)

4.v-for:

5.v-on:

6.v-show:

7.v-pre:

8.v-cloak:

二、使用

1.Mustache插值语法

2.v-once指令使用

3.v-text指令使用

4.v-html指令使用

5.v-pre指令使用

6.v-cloak指令使用

7.v-memo指令使用

8.v-bind指令使用

三、总结

一、介绍

1.概念

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

2.常见指令语法及用法

1.v-bind:

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

html 复制代码 
<a v-bind:href="url">Link</a>
2.v-model:

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

html 复制代码 
<input v-model="message">
3.v-if / v-else-if / v-else:

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

html 复制代码 
<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>
4.v-for:

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

html 复制代码 
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
5.v-on:

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

html 复制代码 
<button v-on:click="handleClick">Click me</button>
6.v-show:

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

html 复制代码 
<p v-show="isVisible">Now you see me</p>
7.v-pre:

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

html 复制代码 
<span v-pre>{{ message }}</span>
8.v-cloak:

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

html 复制代码 
<div v-cloak>{{ message }}</div>

二、使用

1.Mustache插值语法

插值语法：{{}}

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">
        <!-- 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指令使用

只执行一次绑定数据

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">
        <!-- 指令： 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文字

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>{{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元素

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插值语法

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>{{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内容

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指令使用

数组展示

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">
        <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指令使用

动态绑定属性

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">
        <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元素或者组件上的。常见的指令包括：

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

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

相关推荐
狗狗显卡40 分钟前
一些计算机零碎知识随写（25年1月）
前端
Burt44 分钟前
【unibest】可以去掉hbx模版了，base模板一统天下
前端·微信小程序·uni-app
拖孩1 小时前
💥大家好，我是拖孩🎤
前端·javascript·后端
CHANG_THE_WORLD1 小时前
Linux 基础七 内存
linux·服务器·前端
鹿屿二向箔1 小时前
JavaScript (JS) 前端开发
javascript
Z3r4y1 小时前
【Web】极简&快速入门Vue 3
前端·javascript·vue.js·vue3
cxr8281 小时前
Windows 11 系统中npm-cache优化
前端·windows·npm
小小小小宇1 小时前
如何在 React 中实现 Vue 的插槽功能
前端
工业甲酰苯胺2 小时前
Java Web学生自习管理系统
java·开发语言·前端
码农0002 小时前
CORS三问
vue.js
热门推荐
01渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了02半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)03HCIA-datacom数通题库和录播视频资料04物联网中基于WiFi的室内温度检测系统设计05新手学习VR全景需要知道的几个问题06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07【bug记录】清除僵尸进程，释放GPU显存08【漏洞复现】CVE-2015-3337 Arbitrary File Reading09校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站10OpenCV笔记之图像处理中遮罩和掩模的关系