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)
blank

相关推荐

  • idea在类中搜索方法的快捷键_idea控制台搜索快捷键

    idea在类中搜索方法的快捷键_idea控制台搜索快捷键展开全部IntelliJIDEA代码常用的快捷键有:Alt+回车导入包,自动修正Ctrl+N查找类Ctrl+Shift+N查找文件Ctrl+Alt+L格式e69da5e887aa62616964757a686964616f31333365646234化代码Ctrl+Alt+O优化导入的类和包Alt+Insert生成代码(如get,set方法,构造函数等)Ctrl+E或者Alt+…

    2022年10月10日
  • 数组访问越界_数组越界会导致什么问题

    数组访问越界_数组越界会导致什么问题什么是数组访问越界?所谓的数组越界,简单地讲就是指数组下标变量的取值超过了初始定义时的大小,导致对数组元素的访问出现在数组的范围之外,这类错误也是C语言程序中最常见的错误之一。在C语言中,数组必须是静态的。换而言之,数组的大小必须在程序运行前就确定下来。由于C语言并不具有类似Java等语言中现有的静态分析工具的功能,可以对程序中数组下标取值范围进行严格检查,一旦发现数组上溢或下溢,都会因抛出异常而终止程序。也就是说,C语言并不检验数组边界,数组的两端都有可能越界,从而使其他变量的数据甚

  • 初识.Net审计

    初识.Net审计前言对.net认知比较少,学习一下.net的一些简单审计。遇到.net源码能简单审审。基础概念文件类型ASPX.cs是页面后的代码,aspx负责显示,服务器端的动作就是在as

    2021年12月13日
  • 守护进程、信号和平滑重启[通俗易懂]

    守护进程、信号和平滑重启

  • 《算法和数据结构》学习路线指引

    前WorldFinal选手对学习算法的一点总结。五张思维导图解决你的困惑

  • RNN:timestep、inputsize、Batchsize的区别「建议收藏」

    近期读了一些关于LSTM的文章,但仍旧很难理解,关键就是不懂输入、输出是什么,相比于图像处理的CNN,RNN特别抽象。昨晚花了很大的精力去理解“遗留状态”这个概念,现在终于明白了一些,关键在timestep这个概念。关于timestep我们看到的所有的RNN结构图,其实都是在一个timestep中的,而不是整个序列。(这句话很简单,但真的是花了很长时间才领悟到的)以下引用自知乎回答:[我的…

发表回复

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

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