Vue2.0学习笔记1：入门vue

窝窝头一块钱4.1个

已于 2022-10-25 17:09:23 修改

阅读量399

点赞数 1

分类专栏： vue2基础知识文章标签： vue.js javascript 前端

于 2022-08-21 19:13:18 首次发布

本文链接：https://blog.csdn.net/W__J__J/article/details/126453083

版权

vue2基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.学习vue需要具备的基础知识

掌握html，css，JavaScript，以及ajax的基础知识（我在学习过程中参考了b站博主的视频，大家也可以去看看，链接在这里：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili）

二.vue的官方文档

1.学习vue，在观看相关视频学习的同时，参考官方文档是必不可少的：Vue.js (vuejs.org)，点击起步学习文档内容。

三.vue的引入

1.第一种方式，外部引入。是新手学习vue比较适合且便捷的引用方式，打开vue的官方文档，直接复制引入即可，如图所示：

第一种是开发者学习所需要的一种版本，其中包含了对开发者比价有帮助的命令行警告，在开发和调试中比较有帮助（注意需要引用在html中）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第二种是生产环境版本，压缩了一些代码，并优化了尺寸和速度，在产品中比较适合（这个也是注意需要引用在html中）

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.第二种方式，导包。使用脚手架，即使用vue-cli，在公司或者团队中，大部分使用的是这种方式。在之后的文章中，会详细介绍在IDEA中如何搭建vue的脚手架，vue的安装和使用的方法，如何搭建一个vue项目。

四.第一个vue程序

这是一个简单的vue程序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础1</title>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"hello vue!"
				}
			})
		</script>
	</body>
</html>

效果如下：

上面的代码使用第一种方式引入vue。

其中下面这一段采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<div id="app">
	{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"hello vue!"
		}
	})
</script>

其中，div标签的id为app，其中包含了一个用双大括号包裹住的message属性

而在下方的代码中，el则通过"#"标签找到了id为app的标签，data将其中的message属性渲染成了"hello vue!"，将其在页面中显示出来。

那么，el称作挂载点，data则称作数据对象。接下来开始就开始介绍他们吧。

1.el挂载点：

el挂载点通过后面的标签名（上面例子中是"#app"）找到所对应的标签，以便于data渲染属性。

需要注意的是，el挂载点可以定位到的标签是除<html>和<body>之外的所有标签（上例中是"<div>"）。而对于定位标签的方式来说，不仅仅是可以通过id（#）来找到，class（.）同样可以用来寻找标签。

总结：

1.vue实例的作用范围：vue会管理el命中的元素及其后代元素

<div id="app">
	{{ message }}
	<span>{{ message }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"hello vue!"
		}
	})
</script>

2.可以使用其他的选择器，但主要使用的还是id选择器，因为id选择器一般在一个页面中只使用一次

3.可以使用其他的双标签，但是html和body不可以使用

二.data数据对象：

数据对象通过el挂载点选中元素后，可以渲染出它的值。

当它渲染的元素是复杂对象时，可以把较复杂对象中的元素单独"点"出来，示例如下：

<div id="app">
	{{ message }}
	<span>{{ message1.school }}</span>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"hello vue!",
			message1:{
				school:"向阳小学",
				age:"12",
				names:"王大宝"
			},
		}
	})
</script>

当它渲染的是数组时，如下：

<div id="app">
	{{ message }}
	<span>{{ message1.school }}</span><br />
	<span>{{ hobby[0] }}</span>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"hello vue!",
			message1:{
				school:"向阳小学",
				age:"12",
				names:"王大宝"
			},
			hobby:["唱","跳","rap","篮球"]
		}
	})
</script>

总之，渲染复杂类型数据时，遵守js的语法即可。

（文章仅供学习参考，以后期末复习用。并且文章参考了其他博主的教学视频在开头，可以去b站观看他的，哈哈哈）