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，提高了开发效率和用户体验。

相关推荐
Мартин.3 小时前
[Meachines] [Easy] Sea WonderCMS-XSS-RCE+System Monitor 命令注入
前端·xss
一 乐4 小时前
学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
昨天；明天。今天。4 小时前
案例-表白墙简单实现
前端·javascript·css
数云界4 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
风清扬_jd4 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++
前端·c++·chrome
安冬的码畜日常4 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀：用函数式编程（FP）实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
ChinaDragonDreamer4 小时前
Vite：为什么选 Vite
前端
小御姐@stella4 小时前
Vue 之组件插槽Slot用法（组件间通信一种方式）
前端·javascript·vue.js
GISer_Jing4 小时前
【React】增量传输与渲染
前端·javascript·面试
GISer_Jing4 小时前
WebGL在低配置电脑的应用
javascript
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache