文章目录

1、引言
2、Vue简介
  • ① JavaScript框架
  • ② 简化Dom操作
  • ③ 响应式数据驱动
3、什么是Dom?

document文档 object 对象 model模型，Dom翻译中文：文档对象模型

DOM是一种用于HTML和XML文档的编程接口。很多时候我们会用javascript作用于网页上从而达到一定功能效果。而javascript调用很多DOM定义的控件和方法。譬如有时候我们通过javascript取一个标签（a）的信息会用到下面的代码： document.getElementsByTagName(“a”) Document接口是 DOM1核心（DOM1 Core）规范 中定义的第一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。 DOM1核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表（NodeList） ，也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。

4、第一个Vue程序（Hello Vue）
  • 导入开发版本的Vue.js
  • 创建Vue实例对象，设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}}{{name}}
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message: "Hello Vue !",
					name: ' by yangchaoyi'
				}
			});
		</script>
		
	</body>
</html>
  • 显示效果
    在这里插入图片描述
5、el挂载点相关问题
  • ① Vue实例的作用范围是什么呢？
  • ② 是否可以使用其他的选择器？
  • ③ 是否可以设置其他的dom元素呢？

第一个问题： Vue实例的作用范围是什么呢？
比如我们在元素的外部写上{{message}}
在这里插入图片描述
结果显示：
在这里插入图片描述
答:Vue会管理el选项命中的元素及其内部的后代元素

第二个问题：是否可以使用其他的选择器？

答：当然是可以的 我们可以使用class , 还有css里面其它一些标签等等
不过在开发的时候，我们一般默认会用id选择器，而class和一些标签呢是可以命中多个元素，而id选择器会让我们默认觉得这是唯一的，所以建议选择Id选择器

下面简单用两个例子试试：
①使用class
在这里插入图片描述

  • 显示效果
    在这里插入图片描述

②使用div标签 由于只有一个div 我们可以test一下
在这里插入图片描述

  • 显示效果
    在这里插入图片描述

第三个问题：是否可以设置其他的dom元素呢？

答：可以使用其他的双标签，但不能使用HTML和BODY

6、data:数据对象
  • ① Vue中用到的数据定义在data中
  • ② data中可以写复杂类型的数据
  • ③ 渲染复杂类型数据时，遵守js的语法即可

下面简单展示关于对象和数组的使用例子：

<!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">
			{{message}}
			<h3>{{school.name}} {{school.phone}}</h3>
			<h3>专业：</h3>
			<li>{{array[0]}}</li>
			<li>{{array[1]}}</li>
			<li>{{array[2]}}</li>
			<li>{{array[3]}}</li>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message: "Hello Vue !",
					school:{
						name:'湖南大学',
						phone:'123456'
					},
					array:['计算机','市场营销','信息管理','医学信息工程']
				}
			});
		</script>
		
	</body>
</html>
  • 显示效果
    在这里插入图片描述

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

点击进入Vue❤学习专栏~
学如逆水行舟，不进则退
# java # javascript # python
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue