Vue常用内置指令，代码Demo演示和讲解

最新推荐文章于 2024-03-31 14:14:36 发布
最新推荐文章于 2024-03-31 14:14:36 发布
阅读量957 收藏 22
点赞数 30
分类专栏： 次要的个人笔记 # Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46085118/article/details/136145459
版权

文章目录

一、v-text

  • 作用，更改标签的显示值
  • 使用 v-text 会读取 data中的变量值
  • 如果变量存在替换原来的值，如果不存在则报错
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-text</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1 v-text="msg">旧数据</h1>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data: {
            	msg: '新数据'
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

二、v-html

  • v-text 不会解析，v-html会解析然后显示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-html</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1 v-text="msg"></h1>
		<h1 v-html="msg"></h1>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data: {
            	msg: '<span>Hello Vue</span>'
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

三、v-bind

  • 简写 :
  • 作用是更改标签的属性值，值只会从data传向标签，不会从标签传向data，单向数据绑定
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-bind</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<a v-bind:href="school.url" >点我去{{school.name}}学习1</a>
		<br>
		<a :href="school.url" >点我去{{school.name}}学习2</a>
		<br>
		显示data中name的值：<q v-text="name"></q>
		<br/>
		单向数据绑定：<input type="text" :value="name">
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

四、v-model

  • 本质是一个语法糖
  • 作用是更改标签的属性值，双向绑定数据。使用上和 v-bind 很像，但是无法像 v-bind 那么灵活，v-bind 可以更改所有属性的值，v-model 只能更改默认属性（只有一个，所以属性名都不用写）。如果当前标签没有默认属性，使用 v-model 将会报错，比如标签 a。
  • 它会根据控件类型自动选取正确的方法来更新属性值，但是不是所有标签都可以用 v-model ，有些标签没有找到对应的属性值将会报错
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-model</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		显示data中name的值：<q>{{name}}</q>
		<br/>
		单向数据绑定：<input type="text" :value="name">
		<br/>
		双向数据绑定：<input type="text" v-model="name">
		<br/>
		用v-bind写双向绑定：<input type="text" :value="name" @input="name = $event.target.value">
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				name:'jack'
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

五、v-on

  • 简写 @
  • 作用：触发事件之后调用 v-on 设定的方法
  • 如果标签不存在该事件，将报错
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-on</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<button v-on:click="showInfo1">点我提示信息1（不传参）</button><br>
		<button @click="showInfo1">点我提示信息1（不传参），使用简写</button><br>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				
			},
			methods:{
				showInfo1(event){
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event)
					console.log(number)
					alert('同学你好！调用了showInfo2方法，number的值为：'+number)
				}
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

六、v-show

  • 满足条件则显示，不对dom操作。适合频繁操作
  • 原理是修改元素 的display，实现显示隐藏。当某个标签没有 display，v-show将会失效，比如 template
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，值为false元素隐藏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-show</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h2>当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
		<h2 v-show="n === 1">您好，满足条件显示！</h2>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				n:0
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

七、v-if、v-else

  • 满足条件则显示，对dom操作。不适合频繁操作
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，值为false元素隐藏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-if</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h2>当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
		<template v-if="n === 1">
			<h2>您好，满足条件显示！</h2>
		</template>		
		<template v-else="n === 1">
			<h2>您好，不满足条件显示！</h2>
		</template>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				n:0
			}
        })
    </script>
</body>
</html>
  • 页面结果
    在这里插入图片描述

八、v-for

  • 遍历数组或者list
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-for</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h2 v-for="(item, index) in arr">{{index}}，名字为：{{item}}</h2>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				arr:["张三","李四","王五"]
			}
        })
    </script>
</body>
</html>
  • 页面显示
    在这里插入图片描述

九、v-cloak

  • 作用：防止闪烁，页面更加顺滑
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>初识v-cloak</title>
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
	<style>
		[v-cloak]{
			display:none;
		}
	</style>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h2 v-cloak>{{name}}</h2>
	</div>
    <script>
        let vm = new Vue({
            el: "#demo",
			data:{
				name:'尚硅谷'
			}
        })
    </script>
</body>
</html>
  • 页面显示
    在这里插入图片描述
北风toto
关注
  • 30
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue常用代码
Meditation_Crazy
11-18 2045
vue scss引用公共css @import url('element-ui/lib/theme-chalk/display.css'); vue引用线上js 在入口文件index.html里面添加： <script src="./static/jquery-1.12.4.js"></script> 这样，就可以全局引用了 mounted () { con...
VUE代码架构浅谈
最新发布
tongliuwei的博客
05-24 814
h 函数就是createElement，是 Vue.js 里面的 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。layout布局页面会在router/index.js中进行加载，是一种将页面布局抽象为可复用组件的方式，以便在多个页面之间共享布局逻辑。app.vue是vue页面资源的首加载项，是主组件，页面入口文件 ，所有页面都是在App.vue下进行切换的。
Vue 的入门代码
lxz_99527的博客
11-05 1667
Vue很有趣很简洁上手很快，深度很深。
vue的基础指令演示代码及简单案例
CHEN的博客笔记
01-10 1576
主要是通过演示不同指令在代码中的使用来增进我们对知识点的理解，该篇文章仅供学习参考
前端vue入门(纯代码)15
m0_62003092的博客
06-25 642
1、准备样式① 过度样式② 动画样式定义动画使用动画v-enter-active：进入过程中的动画v-leave-active：离开过程中的动画2、使用包裹要过度的元素知识补充： 关键帧 @keyframes 动画名 { … } 让包裹的元素一开始就有出场动画【有以下两种方式，but如果写成了,没有冒号，那等式右边的就成一个字符串,所以必须要有冒号】 完整代码 样式css分析 进入、离开的起点进入、离开的过程进入、离开的终点 2、引入animate.css库 3、基础用法 必须配置
vue常用指令代码实例总结
12-20
ody><div id="app"><p>计算属性:</p><p>...这些基本指令和概念构成了Vue.js开发的基础，理解并熟练运用它们是进行Vue应用开发的关键。通过实践这些代码实例，开发者可以更深入地了解Vue的工作原理，并提升开发效率。
vuepress-plugin-demo-code::memo:vuepress的演示和代码插件
05-03
使用此插件，您可以通过以下语法同时显示演示和代码。 ::: demo <div xss=removed>Click me! [removed] export default { methods: { onClick: () => { window.alert( 1 ) }, }, } [removed] ::: 特征 ...
vue内置指令详解
08-27
Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-bind 指令 v-bind ...
Vue中常用的指令 学习 源代码
09-05
本资源为Vue基础框架及指令学习的源...可配合vue常用指令及用法总结进行相应练习： 学习网址https://blog.csdn.net/weixin_46474921/article/details/126673338 指令内容及源代码都是一致同步的，便于大家学习vue技术！
vue的基本属性及其代码示例（十分钟带你学会Vue）
weixin_52859229的博客
04-11 885
计算属性：可以理解为能够在里面写一些计算逻辑的属性。作用：1.减少模板中的计算逻辑。2.数据缓存。当我们的数据没有变化时，不再执行计算过程。3.依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局的数据。
Vue官方文档代码大全
小小学渣的博客
11-16 2351
01、vue实例 1、数据与方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" type="text/javascript" charset="utf-8">&
vue从入门到进阶的30个vue代码示例
温暖前端的博客
02-19 1383
【代码】vue从入门到进阶的30个vue代码示例。
Vue源码解析（详细篇）
weixin_46996561的博客
12-19 3651
vue数据观测实现原理，模版编译过程，模版挂载过程分析
前端vue入门(纯代码)03
m0_62003092的博客
06-05 349
补：Vue2生命周期在Vue中，使用v-bind:style 动态绑定元素的内联样式 对象语法： 的对象语法---->简写： 样式名如果有-，则改成驼峰式命名。指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。 简写=》 ​ **1、：**在Vue实例创建之前 ，其实应该是说 先初始化生命周期，将生命周期定义在 Vue 实例中（生命周期函数有多少个，都叫啥，什么时候调用这些生命周期），然后接着 Vue 内部自带的事件修饰符（例如：once）定义，
前端vue入门(纯代码)12
m0_62003092的博客
06-22 1034
TodoList-全局事件总线
VUE框架实现原理及代码构成结构详解------VUE框架
春风若有怜花意，可否许我再少年
11-19 148
VUE框架实现原理及代码构成结构详解------VUE框架
最新前端Vue代码风格指南大全，前端经典面试题详解
m0_61331407的博客
03-31 661
自定义事件应始终使用 kebab-case 的事件名。不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且v-on事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以将会变成——导致myEvent不可能被监听到。
玩转代码|分享一些实用的Vue 前端代码（一）
Jum的博客
08-31 753
自定义事件应始终使用 kebab-case 的事件名。不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且v-on事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以将会变成——导致myEvent不可能被监听到。
vue2和vue3区别 ，代码实现演示
09-18
Vue2和Vue3是Vue.js的两个主要版本。它们之间有一些重要的区别和改进。 一些Vue2和Vue3之间的主要区别是： 1. 性能改进：Vue3在性能方面进行了优化，使用了更高效的虚拟DOM算法，提高了更新组件的速度和效率。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值