Vue新手入门指南(易懂)

Vue新手入门指南(易懂)Vue.js学习心得前言对于一名初入编程的新手来说,JavaScript的语法偏向复杂,选择Vue库可以说是一个较为不错的体验。在很多方面,Vue简化了JavaScrip语法,并且实现数据与视图的双向绑定,达到响应式页面的目的。1.Vue实例和模板语法<body> <divid=”app”> <p>{{message}}</p> </div><script> newVue({ el:’#app’

大家好,又见面了,我是你们的朋友全栈君。

Vue快速入门

  • 前言

    对于一名初入编程的新手来说,JavaScript的语法偏向复杂,选择Vue库可以说是一个较为不错的体验。在很多方面,Vue简化了JavaScrip语法,并且实现数据与视图的双向绑定,达到响应式页面的目的。

    博主是一位大二的编程小白,以下的内容都是自己对Vue的理解,写本篇博客的目的是为了巩固自己对Vue的基础知识,大家可以作为一种笔记来观看,如果能够给学校Vue的朋友带来帮助,不胜荣幸,对于存在许多表达不恰当以及逻辑错误的地方,还望大家斧正。
    参考资料:《Vue.js从入门到实践》

1. Vue实例和模板语法

<body>
	<div id="app"> 
		<p>{ 
   { 
   message}}</p> 
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			message:'hello,word!'
		},
		methods:{ 
   
		},
	})
</script>
</body>
  • el

Vue语法与JavaScript一样写在script中,通过id选择器绑定DOM,在Vue中,只需要在el中对DOMid进行挂载,可以简单的理解为钩子el通过id=”app”的特征钩住了<div>中的所有内容,这样我们就可以在Vue中实现对DOM中的操作。

  • data

Vue中的data用于声明我们所要使用的数据,这样操作有利于我们在维护或者操作文档的时候能够更容易的清晰某一板块所需要修改的数据,并且不需要直接对DOM进行操作,此时的数据与DOM是双向绑定的,当我们对data中所声明的数据进行修改时,DOM中同时也会发生响应式的变化。

  • methods

Methods中包含的是我们对这个页面的整个逻辑以及页面中的触发事件,其中的内容相当于JavaScript中的function内容

2. 内置指令
在Vue中有许多内置指令,通过这些指令替换JavaScript中对文档的以及事件的操作。

  • v-html
    v-html:将数据以html标签形式更新
<body>
	<div id="app"> 
		<p>{ 
   { 
   website}}</p>
		<p v-html="message">{ 
   { 
   website}}</p> 
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			website:'Vue,js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{ 
   
		},
	})
</script>
</body>

在这里插入图片描述
可以发现,第二个<p>标签中所绑定的Vue.js被hello,word!所更新,并且在声明的message中‘<h1>hello,word!<\h1>’通过html标签更新了其中的内容,看到的这是一个一级标题的hello,word!。

  • v-text
<body>
	<div id="app"> 
		<p>{ 
   { 
   website}}</p>
		<p v-text="message">{ 
   { 
   website}}</p> 
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			website:'Vue,js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{ 
   
		},
	})
</script>
</body>

在这里插入图片描述
通过v-txet指令,尽管仍然替换掉了<p>标签中的内容,但是仅仅是通过字符串的形式显示了出来,而不是像html一样通过html标签的形式显示。

  • v-cloak

代码加载的时候先加载HTML,把插值语法当做HTML内容加载到页面上,当加载完js后才把插值语法替换掉,所以我们会看到闪烁问题,而v-clock可以解决这个问题。

<div v-cloak>{ 
   { 
   msg}}</div>
<style type="text/css">
 [v-cloak]{ 
   
  display: none;
 }
 </style>
  • v-once

v-once指令只渲染元素和组件一次,随后的渲染,使用了此指令的元素、组件及其所有的子节点,都会当作静态内容并跳过,这个可以用于优化更新性能。

<body>
	<div id="app"> 
		<p v-once>can not change:{ 
   { 
   website}}</p>
		<p>change: { 
   { 
   website}}</p>
		<p ><input type="text" v-model = "website"></p> 
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			website:"hello"
		},
		methods:{ 
   
		},
	})
</script>
</body>

在这里插入图片描述

  • v-on

对于Vue的事件绑定使用内置的v-on指令来完成,以及传递参数。

<body>
	<div id="app"> 
		<input type="button" value="单击事件" v-on:click="alert"> //@click="alert"
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
		},
		methods:{ 
   
		alert:function() { 
   
			alert('触发了点击事件');
		}	
		},
	})
</script>
</body>

在这里插入图片描述

v-on:click点击事件后面添加了命名为alert的方法,在此之前我试过直接使用v-on:click=”alert(‘触发了点击事件’)”,但是点击之后控制台报错,不知道有没有大神明白为什么会这个样子。
使用v-on指令时,不仅仅可以触发点击事件,譬如双击事件以及键盘敲击事件等等,只需要修改v-on:click or(mousedown、mouseup等),同时我们可以将v-on:click简写为@click,触发事件的方法必须写在methods中。

  • v-if

v-if、v-show可以实现条件渲染,Vue会根据表达式值的真假条件来渲染元素。还有可以与v-if搭配的v-else、v-else-if指令,类似与JavaScript中的if-else、if-elseif-elseif。

简单来说,v-if相当于JavaScript中我们对DOM的条件操作,根据表达值的真假,从而对DOM进行有条件的操作,让我们来看看是如何操作的把。

<body>
	<div id="app"> 
		<input type="button" value="切换"  @click="go">
		<p v-if="jump">我跳出来拉</p>
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			jump:false
		},
		methods:{ 
   
			go:function(){ 
   
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

在这里插入图片描述
注意,v-if的默认布尔值为false,并且v-if是直接对DOM的操作,而随后的v-show是对样式的操作。

  • v-show

v-show用法与v-if大致一样,不同的是带有v-show的元素始终会被渲染并且保留在DOM中,v-show只是简单地切换元素的CSS属性display,当模板属性为true的时候,控制台显示为display:block;属性值为false的时候,控制台显示display:none。
v-show不支持<tempalte>语法,也不支持v-else。

<body>
	<div id="app"> 
		<input type="button" value="切换"  @click="go">
		<p v-show="jump">我跳出来拉</p>
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
			jump:false
		},
		methods:{ 
   
			go:function(){ 
   
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

v-show与v-if的区别

  • 都是根据表达式的真假判断元素显示与隐藏
  • v-if只有在条件为真时,才对元素进行渲染,v-show无论初始条件为何,元素总会被渲染。
  • v-show初始开销更高,v-if的切换开销更高
  • 频繁切换时用v-show;运行条件很少改变时用v-if
  • v-for
    在Vue中,提供了v-for指令用来循环数据。
<body>
	<div id="app">
		<h>开始循环</h>
		<li v-for="index in item"> //index用于遍历item中的所有元素
			{ 
   { 
   index}}
		</li>
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
		item:[1,2,3,4,5],
		},
		methods:{ 
   
		},
	})
</script>
</body>

在这里插入图片描述

<body>
	<div id="app">
		<h>开始循环</h>
		<li v-for="(index,items) in item">//index表示数组中的元素,items表实元素的下标
			{ 
   { 
   index}},{ 
   { 
   items}}
		</li>
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
		item:[1,2,3,4,5],
		},
		methods:{ 
   
		},
	})
</script>
</body>

在这里插入图片描述

可以使用of替代in作为分隔符,因为它更接近JavaScript迭代器的语法
<div v-for=“index in items”>

  • v-model
    关于v-model最重要的就是双向数据绑定。使用Vue操作DOM元素时,视图与数据依照任何的一方同时发生改变。
<body>
	<div id="app">
        输入内容:<input type="text" v-model="message"><br/>    <!--v-model绑定了输入框与message中的内容-->
        反转内容:{ 
   { 
   reversedMessage}}
    </div>
<script>
	new Vue({ 
   
            el:'#app',
            data:{ 
   
                message:''
            },  
            computed:{ 
                 //计算属性在computed选项中定义,当计算属性所依赖的值发生变化时,这个属性的值会自动更新
                                    //computed可以换做methods定义一个方法实现相同的功能
                reversedMessage: function(){ 
   
                    return this.message.split('').reverse().join('') //选中message中的内容,反转后添加
                }
            }
        })
</script>
</body>

当我们在input输入框里面输入值时,所绑定的message属性值也发生了变化,当绑定成功,我们在input中输入的任何合法字符串或者数字时,Vue都会重新更新message的属性值,从而符合我们所输入的值,再通过reversedMessage方法将message颠倒过来重新打印在=={
{reversedMessage}}==,由于是双向数据绑定,三者是同时发生的。

  • v-bind
    v-bind的作用是为元素绑定属性,写法v-bind:属性名,可以简写为“:属性名”。
<body>
	<div id="app">
		<img :src="imgsrc" :title="imgtitle">
	</div>
<script>
	new Vue({ 
   
		el:'#app',	
		data:{ 
   
		imgsrc:"xxx",
		imgtitle:"获得图片",
		},
		methods:{ 
   
		},
	})
</script>
</body>

无论是class还是其他标签,都可以通过“:标签名”来为元素绑定属性。对于绑定的元素内容是作为一个JavaScript变量,故而可以对其进行编写JavaScript的表达式。

3. 结束语
编程的学习任重而道远,如果大家觉得不错就点赞分享吧,谢谢大家的观看。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135894.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python的命名规则_python命名规则[通俗易懂]

    python的命名规则_python命名规则[通俗易懂]广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!1、模块模块尽量使用小写命名,首字母保持小写,尽量不要用下划线(除非多个单词,且数量不多的情况)#正确的模块名importdecoderimporthtml_parser#不推荐的模块名importdecoder-特殊的如init模块,如果模块是包的私有模块会使用前缀加一个…

  • 学习 node.js 第八天:Socket 通讯「建议收藏」

    学习 node.js 第八天:Socket 通讯「建议收藏」一般来讲,HTTP是基于文本的“单向”通讯机制。这里所谓的“单向”,乃相对于“双向”而言,因为HTTP服务器只需根据请求返还恰当的HTML给客户端即可,不涉及客户端向服务端的通讯。这种单向的机制比较简单,对网络质量要求也不高。而更多的场景则是需要可靠、稳定的端到端连接。一般这种服务是实时的、有态的而且是长连接,长连接则暗示两段须达致相向通讯的能力,也就说是服务端客户端两者间能够实时地相互间通信。毫无疑问,能够实时通信的服务器正是我们对服务器基本要求之一。区别于HTTP服务器以HTTP为通讯

  • gridview分页样式[通俗易懂]

    gridview分页样式[通俗易懂] gridview分页样式在ASP.NET 2.0种提供了GridView控件。该控件的分页比较方便,可以通过在Visual Studio .NET 2005种简单设置即可实现各种分页功能。1. 默认分页方式(1) 是否允许分页GridView的AllowPaging属性。(2) 每页记录数GridView的PageSize(3) 分页导航条形式GridView的Pager

  • 改进神经风格迁移_癌细胞能否沿着神经迁移

    改进神经风格迁移_癌细胞能否沿着神经迁移神经风格迁移使用CNN将一幅图像的艺术风格转移到另一幅图像。但神经风格迁移存在两个缺陷,首先是神经风格迁移基于神经网络训练反向传播,因此速度较慢,同时风格迁移会获取风格图像所有风格信息,包括颜色和笔触等,不能进行更好的控制。因此许多论文和应用针对原始的神经风格迁移的缺点进行了改进。学会神经风格迁移,免费获取价值百元DIY数字油画定制照片。

    2022年10月26日
  • python中dtype什么意思_NumPy Python中的数据类型对象(dtype)

    python中dtype什么意思_NumPy Python中的数据类型对象(dtype)每个ndarray都有一个关联的数据类型(dtype)对象。此数据类型对象(dtype)告知我们有关数组布局的信息。这意味着它为我们提供了有关以下信息:数据类型(整数,浮点数,Python对象等)数据大小(字节数)数据的字节顺序(小端或大端)ndarray的值存储在缓冲区中,可以将其视为内存字节的连续块。因此,如何解释这些字节由dtype对象给出。1,构造数据类型(dtype)对象:数据类型对象…

  • 树莓派4B摄像头的详细使用教程(拍照+录像+监控)

    树莓派4B摄像头的详细使用教程(拍照+录像+监控)树莓派4B摄像头的详细使用教程(拍照+录像+监控)本篇博文将介绍树莓派摄像头是如何在树莓派开发板上从安装到使用的,博主过程中参考了许多帖子,现将整理的比较全面的过程分享出来,供大家参考使用。排线连接硬件连接时我们首先需要使用树莓派摄像头FFC排线,连接树莓派摄像头与树莓派开发板。其中排线连接的接口被称为CSI(CameraSerialInterface)接口。树莓派开发板的CSI接口位于USB和以太网接口旁边。我们先将CSI接口的黑色挡板拔开,之后将排线蓝色一端正对以太网接口方向插入,之后按下黑

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号