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

相关推荐
Java&Develop2 分钟前
怎么查看当前vue项目，要求的node.js版本
vue.js
hao_04136 分钟前
elpis-core: 基于 Koa 实现 web 服务引擎架构设计解析
前端
松树戈40 分钟前
openfeign与dubbo调用下载excel实践
vue.js·spring cloud·elementui·dubbo
码农黛兮_4642 分钟前
HTML、CSS 和 JavaScript 基础知识点
javascript·css·html
狂野小青年1 小时前
npm 报错 gyp verb `which` failed Error: not found: python2 解决方案
前端·npm·node.js
鲁鲁5171 小时前
Windows 环境下安装 Node 和 npm
前端·npm·node.js
跑调却靠谱1 小时前
elementUI调整滚动条高度后与固定列冲突问题解决
前端·vue.js·elementui
全职计算机毕业设计1 小时前
SpringBoot Vue MySQL酒店民宿预订系统源码（支付宝沙箱支付）+代码讲解视频
vue.js·spring boot·mysql
呵呵哒(￣▽￣)"1 小时前
React - 编写选择礼物组件
前端·javascript·react.js
Coding的叶子1 小时前
React Flow 简介：构建交互式流程图的最佳工具
前端·react.js·流程图·fgai·react agent
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04【解决】Android Gradle Sync 报错 Could not read workspace metadata05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07苍穹外卖面试总结08Coze扣子平台完整体验和实践（附国内和国际版对比）09西电B测-计算机网络综合实验(含验收问题)10VMware虚拟机安装Win7专业版保姆级教程（附镜像包）