2020 零基础 Vue快速入门 Vue基础篇【详细】

最新推荐文章于 2024-08-19 13:55:31 发布

懒笔头

最新推荐文章于 2024-08-19 13:55:31 发布

阅读量420

点赞数

分类专栏： Vue 全家桶

本文链接：https://blog.csdn.net/csdnsunyf/article/details/104657056

版权

Vue 全家桶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1、引言

2、Vue简介

① JavaScript框架
② 简化Dom操作
③ 响应式数据驱动

3、什么是Dom?

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

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}}

结果显示：

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>