web---Vue常用指令

已于 2023-08-23 14:57:51 修改
阅读量1.4k 收藏 33
点赞数 12
分类专栏： WEB 文章标签： vue
于 2021-05-19 15:38:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allurelover/article/details/117016973
版权

文章目录

1. VUE介绍

1.1 VUE介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

在这里插入图片描述

1.2 VUE官网

https://cn.vuejs.org/

在这里插入图片描述

1.3 VUE下载

https://vuejs.org/v2/guide/installation.html

在这里插入图片描述

2. VUE入门案例

2.1 创建1-入门案例.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.2 引入vue.js文件

在这里插入图片描述> 在这里插入图片描述

2.3 编写入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式 内容 data中对象的属性 -->
			<h1>{{hello}}</h1>
		</div>
		
		
		<!-- 1.导入vue.js的类库 -->
		<script src="../js/vue.js"></script>
		<!-- 2.编辑VUE js -->
		<script>
			//新规定:  1.结尾的;号可以省略   2.字符一般使用'单引号'
			//补充知识:  var: js中声明变量的修饰符 没有作用域的概念
			//    1.const 定义常量的
			//    2.let   有作用域的变量声明.
			
			//1.实例化VUE对象   函数式编程
			const app = new Vue({
				//1.定义el元素 要在哪个位置使用vue进行渲染
				el: "#app",
				//2.定义数据对象
				data: {
					hello: 'VUE入门案例!!!!'
				}
			})
		</script>
			
	</body>
</html>

2.4 运行查看结果

在这里插入图片描述

在这里插入图片描述

2.5 名词解释

  • var:：js中声明变量的修饰符 没有作用域的概念
  • const：定义常量的
  • let：有作用域的变量声明.
  • el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
  • data：data属性专门用来以对象方式存放数据，可以用最对象使用，也可以用作函数使用
  • {{XXX}}：插值表达式基本语法，“Mustache”语法 (双大括号) 的文本插值

3. v-clock指令

3.1 用法

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

在这里插入图片描述

3.2 需求

由于插值表达式在渲染没有完成时,会展现 {{hello}} 效果,用户体验不好 是否可以优化优化: 如果在渲染没有完成时,不给用户展现任何信息.

3.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
		<!-- 配置样式 -->
		<style>
			/* 渲染没有完成时不展现 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
	
		<div id="app">
			<h1 v-cloak>{{hello}}</h1>
			<!-- 以优化后的效果进行展现 内部兼容了v-cloak -->
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					hello: '----vue案例',
				}
			})
		</script>
	</body>
</html>

3.4 结果

在这里插入图片描述

4.v-text指令

4.1 用法

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

4.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- 两总方式一样 -->
			<span v-text="message"></span>
			<br/>
			<span>{{message}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: 'v-text的用法',
				}
			})
		</script>
	</body>
</html>

4.3 结果

在这里插入图片描述

5. v-html指令

4.1 用法

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

4.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- 以html解析之后的效果进行展现 -->
			<span v-html="html"></span>
			<span>{{html}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					html: '<h1>html效果展现</h1>'
				}
			})
		</script>
	</body>
</html>

4.3 结果

在这里插入图片描述

6.v-pre指令

6.1 语法

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

6.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-pre指令 跳过vue的解析的过程,直接原始Mustache标签-->
			<span v-pre>{{name}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					name: 'v-pre跳过vue解析'
				}
			})
		</script>
	</body>
</html>

6.3 结果

在这里插入图片描述

7.v-once指令

7.1 语法

只渲染元素和组件一次

7.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-once指令 元素只被解析一次 -->
			<span v-once>{{once}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					once: '只渲染元素和组件一次',
				}
			})
		</script>
	</body>
</html>

7.3 结果

在这里插入图片描述

8. v-model指令

8.1 语法

在表单控件或者组件上创建双向绑定
如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model，一般在输入框中最为常用,一般用来保证数据的一致性

8.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-model 测试双向数据绑定
				1.服务器将数据给用户展现  2.用户需要传给数据给服务器
			-->
			<input name="model" v-model="model" />
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					model: '测试双向数据绑定'
				}
			})
		</script>
	</body>
</html>

8.3 结果

vue对象中的数据渲染到DOM对象中

在这里插入图片描述

DOM对象中的数据更新到vue对象中

在这里插入图片描述

9. v-on指令

9.1 用法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件

9.2 案例一：自增

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 要求实现num数据+1 -->
			{{num}}
			<!-- 添加事件绑定 -->
			<button v-on:click="num++">自增</button>
			<!-- 简化写法 v-on使用@进行替换 -->
			<button @click="num++">自增</button>
			<!-- 如果操作较为复杂,可以通过方法的方式进行操作 -->
			<button @click="addNum">自增</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 100
				},
				methods: {
					//js中方法称之为函数!!!!
					addNum(){
						//对num + 1
						this.num ++
					}
				}
			})
		</script>
	</body>
</html>

9.3 结果一

在这里插入图片描述

9.4 案例二：加法运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机案例</title>
	</head>
	<body>
		<div id="app" @click="addNum">
			<!-- 定义标题元素 -->
			<h1>计算机案例</h1>
			数据1: <input type="text" v-model="num1"/><br>
			数据2: <input type="text" v-model="num2" @keyup.enter="addNum"/> 
			&nbsp&nbsp
			<button @click="addNum">计算</button>
			<br>
			总数: {{count}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			/* 业务思路
				1.动态获取用户的数据
				2.准备一个加法的方法
				3.将结果进行展现.
			 */
			const app = new Vue({
				el: "#app",
				data: {
					num1: '',
					num2: '',
					count: ''
				},
				methods:{
					addNum(){
						//数值转化 parseInt()
						this.count = parseInt(this.num1) + parseInt(this.num2) 
					}
				}
			})
		</script>
	</body>
</html>

9.5 结果二

在这里插入图片描述

10. v-bind指令

10.1 用法

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

10.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		
		<!-- 定义style标签 -->
		<style>
			.red{
				background-color: red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 属性绑定的语法 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化操作 -->
			<a :href="url"></a>
			
			<hr >
			<!-- class的绑定 -->
			<div class="red">
				class的内容测试
			</div>
			<hr >
			<!-- 需求:需要动态的绑定样式 -->
			<div v-bind:class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 简化写法 -->
			<div :class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 切换样式 -->
			<button @click="isRed = !isRed">切换</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: 'http://www.baidu.com',
					//如果控制样式 则设定boolean类型的值
					isRed: false
				}
			})
		</script>
	</body>
</html>

10.2 结果

在这里插入图片描述

在这里插入图片描述

11. v-if-else if -else指令

11.1 语法

v-if/v-else位置应该连续 v-else不可以单独使用（类似java分支结构）

11.2 案例（成绩判断）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 设定课程的成绩: score 根据课程的成绩进行评级
				 注意事项: v-if/v-else位置应该连续 v-else不可以单独使用
			 -->
			<h3 v-if="score >= 90">优秀</h3>
			<h3 v-else-if="score>=80">良好</h3>
			<h3 v-else-if="score>=70">中等</h3>
			<h3 v-else-if="score>=60">及格</h3>
			<h3 v-else>不及格</h3>
			
			<!-- v-show指令 h3标签动态的展现  跟一个布尔类型的值
				style="display: none 如果数据频繁的切换 效率更高
			-->
			<h3 v-show="isShow">展现一个变化的数据</h3>
			<!-- 通过按钮切换状态 -->
			<button @click="isShow = !isShow">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: 50,
					isShow: true
				}
			})
		</script>
	</body>
</html>

11.3 结果

在这里插入图片描述

12. v-show指令

12.1 用法

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果

12.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<span v-show="show">展示数据</span><br />
			<button @click="show = !show">切换</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					show: true,
				}
			})
		</script>
	</body>
</html>

12.3 结果

点击切换关闭展示
点击切换开启展示

在这里插入图片描述

在这里插入图片描述

13.v-for指令

13.1 语法

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名

13.2 案例（遍历数组&集合）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
			<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
			<!-- 2.带下标的循环遍历语法 2个参数  参数1:遍历的数据   参数2:下标 -->
			<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
			
			<!-- 3.循环遍历对象 -->
			<div v-for="user in userList" :key="user.id">
				<span v-text="user.id"></span>
				<span v-text="user.name"></span>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//一般采用数组形式保存多个数据
					hobbys: ['打游戏','敲代码','喝水','水王八'],
					userList: [{
						id: 100,
						name: '孙尚香'
					},{
						id: 200,
						name: '王昭君'
					},{
						id: 300,
						name: '貂蝉'
					}]
				}
			})
		</script>
	</body>
</html>

13.3 结果

在这里插入图片描述

AlluzeYu
关注
  • 12
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
moyu-server：基于Vue和Electron的在线协同api接口管理工具
03-03
摸鱼（服务端）一款基于Vue和Electron的接口文档管理工具||预览常用（由于浏览器限制，完整版功能需要下载客户端）主要功能团队协作自定义接口规则支持常见请求方式本地内网发送接口（类似postman）优雅的离线版本...
modern-java-web-scaffold：现代的Web应用程序支架，用于构建RESTful API的Spring Boot和用于视图的Vue.js
01-30
现代Java Web支架介绍modern-java-web-scaffold是用于构建现代Web应用程序的前端和后端支架，使用作为构建工具，集成了常用框架，适用于RESTful体系结构。主框架后端前端快速开始对于后端应用程序：使用Undertow作为...
web项目常用的Linux命令记录
sfh2018的博客
08-05 1136
1、查看进程 例如： ①. ps -ef|grep tomcat ②. ps -ef|grep java 1、查看进程
Vue 基本指令
qq_58875572的博客
02-15 301
vue.js指令
超全vue指令全家桶
qq_48866673的博客
02-23 918
一篇文章搞懂vue2和3中所有的指令常用
vue指令
wasdf231的博客
06-19 174
vue中的指令
Web开发常用命令（Linux/Window）
.鞭指云端.的技术博客
01-01 284
1、Linux 1.1、进程操作 查看进程：ps -ef | grep XXX 查看端口：netstat -apn | grep 8090 查看端口是否使用：telnet 127.0.0.1 8080 杀死进程：kill -9 23475 启动应用：./start.sh（./表示当前目录） 1.2、查看日志 动态查看日志：tail -f catalina.out 指定行数动态日志：tail -fn300 catalina.out 搜索日志关键词：grep ‘XXX’ catalina.out 搜索日
基于 Vue3.2、TypeScript、Vite4、Pinia、Element-Plus 开源的一套后台管理框架
05-20
Geeker-Admin 一款基于 Vue3.2、TypeScript、Vite4、Pinia、Element-Plus 开源的后台管理框架，使用目前最新技术栈开发。...另外本项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。
minsx-management-ui:是minsx家族的成员，主要负责对minsx后端管理的用户交互
05-17
Minsx-Management-UI 是minsx家族的核心成员，主要负责对minsx后端管理的用户交互 ...项目采用NPM管理,常用的基本命令如下： 安装项目: npm install 运行项目: npm run dev 打包项目: npm run build (查看
全新Vue3.0全家桶 零基础入门到项目实战
06-30
本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点，还会精讲Vue 3.0核心语法，如计算属性、过滤器、监视器、模板、生命周期等内容。会带你深入理解Vue组件化技术，讲解全局组件和局部组件的定义，组件间...
一个VueJS运行库让您在Vue中编写命令行界面
08-08
一个VueJS运行库让您在Vue中编写命令行界面
VUE指令合集（更新中）
AnglaSolo的博客
10-20 953
前言：学习前端的都知道，vue框架的地位和重要性，而学会vue指令便是基础，但是vue指令很多，一个全面的指令合集可以让你在需要时轻松找到，由于本人还在学习中，所以vue指令还在更新中，以下便是我目前学过的指令。 1.vue指令v-bind 目标: 给标签属性设置vue变量的值 语法：v-bind:属性名="vue变量" 简写：:属性名="vue变量" <!-- vue指令-v-bind属性动态赋值 --> <a v-bind:href="url">我是a标签</a
ctfhsow web入门 命令执行大全
wangringyi的博客
09-25 2603
全网最全命令执行方法
Vue（三）Vue中的常用指令（全网最全）
io_123io_123的博客
01-19 3283
Vue中的常见指令：v-show、v-if、v-for、v-htm、自定义指令、refl等常见指令（全网最强）的用法以及原理
基本指令v-once
atu1111的博客
08-16 7842
基本指令v-once   v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容   下面示例，原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
Vue技术 v-once指令（表示其内容只会被渲染一次）
weixin_55772633的博客
07-11 3180
指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。用法如下： 在上面的示例中， 指令应用在 元素上，并绑定了 数据。一旦 数据的值发生变化，被标记为 的 元素将保持原始的内容，不再更新。当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变 2.总结
Vue内置指令大全
CoderBin的博客
10-04 1876
大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。
vue 使用 element-plus
最新发布
03-01
Vue是一种流行的JavaScript框架，用于构建用户界面。Element Plus是一个基于Vue的UI组件库，提供了丰富的可重用组件，可以帮助开发者快速构建美观、交互丰富的Web应用程序。 使用Element Plus可以让你更轻松地创建Vue应用程序，并且提供了一致的设计和开发体验。下面是使用Element Plus的一般步骤： 1. 安装Element Plus：你可以使用npm或yarn来安装Element Plus。在项目的根目录下运行以下命令： ``` npm install element-plus ``` 或者 ``` yarn add element-plus ``` 2. 引入Element Plus：在你的Vue项目的入口文件（通常是main.js）中，引入Element Plus的样式和组件： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 使用Element Plus组件：现在你可以在你的Vue组件中使用Element Plus提供的各种组件了。例如，在一个Vue单文件组件中使用一个按钮组件： ```html <template> <el-button type="primary">Click me!</el-button> </template> <script> export default { // 组件逻辑 } </script> ``` Element Plus提供了许多常用的UI组件，如按钮、表单、表格、弹窗等等。你可以根据自己的需求在项目中使用这些组件，以提高开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值