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

server/2024/10/18 2:40:21/

目录

一、介绍

1.概念

2.常见指令语法及用法

1.v-bind:

2.v-model:

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实例的数据上，实现数据的动态更新。

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


http://www.ppmy.cn/server/7522.html

相关文章

springboot 从mysql 迁移人大金仓 -kingbase

springboot 从mysql 迁移人大金仓 -kingbase

一、配置方法修改 1、添加maven依赖 <!-- 人大金仓 --><dependency><groupId>cn.com.kingbase</groupId><artifactId>kingbase8</artifactId><version>8.6.0</version></dependency> 2、连接配置&#xff0c;修改 .y…
阅读更多...
安全开发实战(3)--存活探测与端口扫描

安全开发实战(3)--存活探测与端口扫描

目录 安全开发专栏 前言 存活探测 端口扫描 方式一: 1.3.1 One 1.3.2 Two 1.3.3 批量监测 方式二: 1.3.1 One 1.3.2 Two 1.3.3 Three 1.3.4 扫描ip地址,提取出开放端口和协议 ​编辑 1.3.5 批量扫描(最终完成版) 总结 安全开发专栏 安全开发实战​http://t.csd…
阅读更多...
electron项目打包慢、打包报错

electron项目打包慢、打包报错

项目使用了electron框架&#xff0c;在第一次打包或者网络条件不好的环境下进行打包时熟速度慢的出奇&#xff0c;甚至经常出现打包失败的情况&#xff08;如上面图片的报错&#xff09;。 这是因为&#xff0c;在electron打包的过程中&#xff0c;需要去官方源https://github.…
阅读更多...
在线json格式化编辑器--在线查看json解析视图并按节点排序，查看，编辑，并可导入导出json

在线json格式化编辑器--在线查看json解析视图并按节点排序，查看，编辑，并可导入导出json

在线JSON编辑器--视图查看器&节点筛选&节点编辑插入&json导入导出
阅读更多...
[MoeCTF 2022]Hex

[MoeCTF 2022]Hex

看提示要用010&#xff0c;拖进010查看&#xff0c;查找ctf找到flag&#xff0c; moectf{Hello_Hex}
阅读更多...
vscode 搭建stm32开发环境记录(eide+cortex-debug+jlink)

vscode 搭建stm32开发环境记录(eide+cortex-debug+jlink)

前言 clion使用的快过期了&#xff0c;所以就准备使用vscode 来代替clion作为代码开发环境 vscode 插件安装 创建个空白工程 添加项目相关的源文件&#xff0c;和配置宏定义和头文件目录 编译和烧录(ok) 结合cortex-debug 结果(测试ok)
阅读更多...
【C语言__函数栈帧的创建和销毁__复习篇9】

【C语言__函数栈帧的创建和销毁__复习篇9】

目录 前言 一、知识补充 二、分析创建和销毁的过程 三、前言问题回答 前言 本篇主要讨论以下问题&#xff1a; 1. 编译器什么时候为局部变量分配的空间 2. 为什么局部变量的值是随机的 3. 函数是怎么传参的&#xff0c;传参的顺序是怎样的 4. 形参和实参是什么关系 5. 函数…
阅读更多...
https协议的加密方式详解

https协议的加密方式详解

各位大佬能多多点赞关注评论收藏&#xff0c;球球各位大佬们了&#xff01;&#xff01; &#xff01; 目录 1.为什么要加密&#xff1f; 2.如何加密 1.密钥&#xff08;yue,第四声&#xff09; 2.对称加密 3.非对称加密 4.公证机构 3.总结 1.为什么要加密&#xff1f;…
阅读更多...
最新文章

Copyright @ 2022~2023