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

最新推荐文章于 2024-07-24 12:54:56 发布
最新推荐文章于 2024-07-24 12:54:56 发布
阅读量156 收藏
点赞数
分类专栏： Vue 全家桶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnsunyf/article/details/104657227
版权

文章目录

 

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递减，否则提示“不能再减了！”
 

<!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全家桶零基础入门到进阶项目实战第二篇基础核心案例篇
06-20
本课程主要讲解Vue.js基础核心内容，包括vue的核心思想、MVVM框架、常用指令、事件修饰符、按键修饰符、系统修饰符、计算属性、监听器、vue实例生命周期等。掌握好这些内容就能初步使用vue进行开发，同时也为进一步...
Vue3系统入门与项目实战-包含：Vue3概述与基础、Vue3基础语法与指令、Vue3高级特性与应用章节
10-01
vue3---包含：Vue3概述与基础、Vue3基础语法与指令、Vue3高级特性与应用、Vue3项目实战：待办事项管理应用、Vue3项目实战：电商网站前端页面开发、Vue3生态系统与扩展应用
添加vue项目的命令行
qq_39405179的博客
08-01 341
mkdir test //新建一个文件夹 cd test//进入文件目录 npm -v //npm 版本 npm install -g @vue/cli vue npm install -g @vue/cli-init vue init webpack . npm run dev//进入
2020 零基础 Vue快速入门 Vue指令 本地应用篇【整理】
超逸の学习技术博客
01-13 1252
文章目录1、引言2、内容绑定，事件绑定2.1 简单计数器应用3、显示切换，属性绑定4、列表循环，表单元素绑定 1、引言 本地应用： 通过Vue实现常见的网页效果 学习Vue指令，以案例巩固知识点 Vue指令指的是，以v-开头的一组特殊语法 2、内容绑定，事件绑定 ① v-text指令 能替换整个标签的内容，另字符串拼接格式详见代码： <!DOCTYPE html> <h...
2020 零基础 Vue快速入门 npm和cnpm安装指令大全
超逸の学习技术博客
01-14 816
安装 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 2769
前言 一、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年在他的
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
vue-快速入门
qq_62892403的博客
07-24 1262
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue基础入门
weixin_58470558的博客
05-13 6777
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue实战入门基础篇：从零开始仿门户网站实例
03-13
本教程“Vue实战入门基础篇：从零开始仿门户网站实例”旨在帮助初学者快速掌握Vue的核心概念，并通过实际项目演练提升技能。 在学习Vue时，首要的是理解其核心组件系统。Vue采用组件化开发模式，允许开发者将复杂...
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与...
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
虚拟DOM允许Vue高效地更新视图，数据绑定使得视图与数据模型之间保持同步，指令如`v-if`、`v-for`则提供了便捷的条件渲染和循环处理，而组件则是Vue构建复杂应用的基础，它封装了可复用的HTML元素。 在描述中提到的...
多台三相逆变器并联（本模型为三台并联，市面上多为两台并联）matlab simulink仿真 功能：实现并联系统中各逆变器输出
最新发布
10-09
多台三相逆变器并联（本模型为三台并联，市面上多为两台并联）matlab simulink仿真。 功能：实现并联系统中各逆变器输出功率均分。 （有能力的话还可以研究下垂特性、功率指令以及静态功工作点三者之间的联系） 控制策略：VSG控制策略（同步机控制） 逆变器主电路：三相逆变器，LCL滤波电路，VSG控制模块。 VSG控制模块：定、转子方程，dq变，电压电流双闭环，预同步，pwm发生器。
Ringtones波点音乐-《Lightning Moment》.mp3
10-09
Ringtones波点音乐-《Lightning Moment》.mp3
onnx2onnx-0.3.1.tar.gz
10-09
onnx2onnx-0.3.1.tar
网页商城系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-09
网页商城系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值