2020 零基础 Vue快速入门 Vue指令 本地应用篇【整理】

最新推荐文章于 2023-10-18 14:53:37 发布
最新推荐文章于 2023-10-18 14:53:37 发布
阅读量1.2k 收藏 3
点赞数 6
分类专栏： Vue全家桶系列 文章标签： vue js javascript html java
原则上允许部分内容转载，转载请注明原文章地址！
本文链接：https://blog.csdn.net/weixin_42429718/article/details/103957276
版权

文章目录

1、引言

本地应用：

  • 通过Vue实现常见的网页效果
  • 学习Vue指令，以案例巩固知识点
  • Vue指令指的是，以v-开头的一组特殊语法
2、内容绑定，事件绑定

① v-text指令

能替换整个标签的内容，另字符串拼接格式详见代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3 v-text="message+'!'"> 你好，Vue</h3>
			<h3>{{message+'!'}} 你好，Vue</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message: "Hello Vue"
				}
			});
		</script>
		
	</body>
</html>
  • 显示效果
    在这里插入图片描述

② v-html指令

  • 能解析html内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-html='content'></p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					content: '<a href="https://blog.csdn.net/weixin_42429718">点击进入博主主页并关注！</a>'
				}
			});
		</script>
		
	</body>
</html>
  • 显示效果
    在这里插入图片描述
    在这里插入图片描述

v-on指令

  • 为元素绑定事件
    但是我们平常更习惯性的把v-on:直接替换为@ 方便写也方便记
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击事件" @click="clickIt"/>
			<h3 @click="clickIt">{{message}}</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message:"点击一下?"
				},
				methods:{
					clickIt:function(){
						this.message+="点个关注呗~"
					}
				}	
			});
		</script>
	</body>
</html>
  • 显示效果
    在这里插入图片描述
2.1 简单计数器应用

步骤：

  • 1.data中定义数据：比如num
  • 2.methods中添加两个方法：比如add（递增），sub（递减）
  • 3.使用v-text将num设置给span标签
  • 4.使用v-on将add和sub分别绑定给+,-按钮
  • 5.累加的逻辑：小于10累加，否则提示“不能再加了！”
  • 6.递减的逻辑：大于0递减，否则提示“不能再减了！”

ps:目前主要还是学的方法，所以没有去整理css，用的原生态的样子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="add">+</button>
			<span>{{num}}</span>
			<button @click="sub">-</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					num:1
				},
				methods:{
					add:function(){
						if(this.num<10){
							this.num++
						}else{
							alert('不能再加了！')
						}
					},
					sub:function(){
						if(this.num>0){
							this.num--
						}else{
							alert('不能再减了！')
						}
					}
				}
			});
		</script>
	</body>
</html>
  • 显示效果
    在这里插入图片描述
3、显示切换，属性绑定

v-show指令

  • 根据表达值的真假，切换元素的显示和隐藏

ps:下面就展示一个例子，用到了上一章讲到的事件绑定，可以进行图片显示或隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="isShow"/>
			<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="age>=18"/>
			<button @click="cc">点击显示或隐藏</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					isShow:false,
					age:16
				},
				methods:{
					cc:function(){
						this.isShow=!this.isShow
					}
				}
			});
		</script>
	</body>
</html>

  • 显示效果
    在这里插入图片描述
    v-if指令

  • 根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

    表面上和v-show差不多，但是实际上有点区别：
    具体详细如下：

  • v-show操纵的是display 看这个标签显示不显示

  • 而v-if操纵的是标签 如果为false 则会删除这整个标签（也就是html不会显示这个标签）然后v-show则不会

v-bind指令

使用方式：
v-bind:属性名=表达式

但vue里面我们能够省去v-bind 即为 :属性名=表达式 的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.active{
				border: 5px solid orangered;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img :src="imgSrc" :title="imgTitle+'!'" @click="cclick" :class="{active:isActive}"/>
		</div> 
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					imgSrc:"https://s2.ax1x.com/2019/06/14/V5R7od.png",
					imgTitle:"追风筝的人",
					isActive:false
				},
				methods:{
					cclick:function(){
						this.isActive=!this.isActive
					}
				}
			});
		</script>
	</body>
</html>
  • 显示效果

点击前：
在这里插入图片描述
点击后：

在这里插入图片描述

4、列表循环，表单元素绑定

v-for指令
根据数据生成列表结构

之前我们在基础篇里面有一个关于数组的，这里我们就可以通过循环来取值了，具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="(item,index) in array">
				{{item}}
			</li>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					array:['计算机','市场营销','信息管理','医学信息工程']
				}
			});
		</script>
	</body>
</html>

  • 显示效果

    在这里插入图片描述
    v-on补充

    ps:我们可以通过回车键来绑定事件，还可以进行参数传递，具体如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击事件" @click="cclick('yangchaoyi')"/>
			<input type="text" @keyup.enter="hello" />
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				methods:{
					cclick:function(p1){
						alert('你好! '+p1);
					},
					hello:function(){
						alert('Hello');
					}
				}
			});
		</script>
	</body>
</html>
  • 显示效果

在这里插入图片描述
v-model指令

  • 获取和设置表单元素的值（双向数据绑定）

  • v-model指令的作用是便捷的设置和获取表单元素的值

  • 绑定的数据会和表单元素值相关联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="setMessage" value="设置message值" />
			<input type="text" v-model="message" @keyup.enter="getMessage">
			<h3>{{message}}</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message:'一百个Chocolate'
				},
				methods:{
					getMessage:function(){
						alert(this.message);
					},
					setMessage:function(){
						this.message="你好 Vue !";
					}
				}
			});
		</script>
		
	</body>
</html>
  • 显示效果
    在这里插入图片描述

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~
学如逆水行舟，不进则退
一百个Chocolate
关注
专栏目录
VUE-directive指令之语法、引用、钩子函数、参数（1）
LzzMandy的博客
06-13 2138
1、私有指令语法： directives:{ 'focus(指令名称)':{ bind(el) {}, inserted(el,binding){}, updated(el) {}, }, } 引用方式： <input type="text" v-model="id" name="id" v-focus> 注意：在定义...
vue的常用指令及用法总结
weixin_42504805的博客
06-08 9139
vue知识
Vue中的指令及使用方式
qq_44844370的博客
11-25 1347
### 1.什么是指令? 指令：生活中的指令通常指代带有方向和指导性的命令 计算机中的指令：描述的是带有数据功能性处理的一段可执行命令的集合 Vue 中的指令：实现特定功能的一种用法，一般以 v- 符号开头，如 v-text ### 2.具体指令 ##### ①. `v-text / v-html / v-once` **功能描述:** 网页视图中渲染展示变量中的数据 - `v-text`：指令当成标签的属性进行使用，输出数据的变量包含在属性值中，等价于插值表达式 - `v-html.
vue引入依赖指令
海角12138的博客
11-25 822
1--引入element-ui插件 npm install element-ui -S 2--引入axios npm install axios 3--添加vuex插件 npm install vuex --save 4--添加路由 npm install vue-router 5--vue中打开Vscode软件 》》code . ...
如何在Vue中建立全局引用或者全局命令
前端kk的博客
03-16 2376
1 一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到到相同模块。我们不想每个文件都import 一次模块。如果是vue编写的插件我们可以用 Vue.use(...)  2 但是如果想添加一个全局命令，同时又让每个vue的文件都能用到怎么办？第一步：最好建立一个全局的命令文件例如：directive/directive.js第二步：利用Vue.directive()建立一...
2020 零基础 Vue快速入门 npm和cnpm安装指令大全
超逸の学习技术博客
01-14 820
安装 npm npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。 npm -v 由于网络原因 安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 vue-cli cnpm install -...
VUE 快速上手与基础指令（内附详细案例）
HHX_01的博客
10-18 2779
前言 一、vue快速上手 1. vue是什么 2. 创建一个vue实例 3. 插值表达式 4. vue的响应式特性 5. 开发者工具安装 二、vue指令 1. v-html 2. v-if 和 v-show 3. v-else 和 v-else-if 4. v-on 5. v-bind 6. 案例-波仔的学习之
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
一篇文章，Vue快速入门
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
Vue3系统入门与项目实战-包含：Vue3概述与基础、Vue3基础语法与指令、Vue3高级特性与应用章节
最新发布
10-01
vue3---包含：Vue3概述与基础、Vue3基础语法与指令、Vue3高级特性与应用、Vue3项目实战：待办事项管理应用、Vue3项目实战：电商网站前端页面开发、Vue3生态系统与扩展应用
vue实战入门基础篇：从零开始仿门户网站实例
03-13
本教程“Vue实战入门基础篇：从零开始仿门户网站实例”旨在帮助初学者快速掌握Vue的核心概念，并通过实际项目演练提升技能。 在学习Vue时，首要的是理解其核心组件系统。Vue采用组件化开发模式，允许开发者将复杂...
Vue全家桶零基础入门到进阶项目实战第二篇基础核心案例篇
06-20
本课程主要讲解Vue.js基础核心内容，包括vue的核心思想、MVVM框架、常用指令、事件修饰符、按键修饰符、系统修饰符、计算属性、监听器、vue实例生命周期等。掌握好这些内容就能初步使用vue进行开发，同时也为进一步...
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与...
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
虚拟DOM允许Vue高效地更新视图，数据绑定使得视图与数据模型之间保持同步，指令如`v-if`、`v-for`则提供了便捷的条件渲染和循环处理，而组件则是Vue构建复杂应用的基础，它封装了可复用的HTML元素。 在描述中提到的...
Vue报错：[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'cat_pid' of undefined"
超逸の学习技术博客
01-20 5万+
文章目录1、背景2、解决办法3、结束语 点击进入Vue❤学习专栏~ 1、背景 WTF??? 今天写Vue项目的时候，直接gg，按了F12看下控制台一直报错，上帝的心态都开始发生了变化，搞了一下午硬是没看出啥毛病，后来吃完饭后耍了一把王者，用李白秀了一把【手动滑稽】，突然灵感来了，问题解决了… 2、解决办法 首先，我在data中定义了一个表单数据如下，它说我没定义 cat_pid? 这不明摆着有吗...
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
2020 （详）RGB颜色查询大全 #FFFFFF【颜色列表】
超逸の学习技术博客
02-01 2万+
颜色名列表 颜色名十六进制颜色值颜色AliceBlue#F0F8FFrgb(240, 248, 255)AntiqueWhite#FAEBD7rgb(250, 235, 215)Aqua#00FFFFrgb(0, 255, 255)Aquamarine#7FFFD4rgb(127, 255, 212)Azure#F0FFFFrgb(240, 255, 255)Beige#F5F5DCrgb(24...
2020 必须收藏的vscode主题【清爽的前端配置 vue】
超逸の学习技术博客
01-26 1万+
Horla Light Them：浅色主题，非常好 学如逆水行舟，不进则退
【已解决】vue-cil3 运行报错：x errors potentially fixable with the `--fix` option
超逸の学习技术博客
01-16 1万+
背景： 3 errors found. 3 errors potentially fixable with the `--fix` option. 解决办法： 将下面lint部分修改为： eslint --fix --ext .js,.vue src 修改后依旧没解决： 先查看Esint是否关闭，如果关闭的话，修改上面也是会跑不起来的 学如逆水行舟，不进则退 ...
Vue快速入门：从基础到高级开发与实战应用
快速入门Vue意味着掌握核心概念如组件化、指令、状态管理（Vuex）和生命周期钩子，同时理解如何与其他技术（如TypeScript）和第三方库（如地图API）集成。实践项目的过程中，逐步熟悉Vue的目录结构和代码组织方式，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值