Vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

朱振玉小迷弟

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量77

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue javascript vue.js css html

本文链接：https://blog.csdn.net/weixin_50357864/article/details/114277277

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、第一个Vue程序

1、导入开发版本的Vue.js
2、创建Vue实例对象，设置el属性和data属性
3、使用简洁的模板语法把数据渲染到页面上
附带上Vue官方文档，Vue的作者是一名中国人，叫尤雨溪，所以官方文档对中文特别友好，可以参照官方文档进行学习。

第一个Vue程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue基础</title>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:" Hello Vue! "
				}
			})
		</script>
	</body>
</html>

运行结果：
运行结果图

二、el挂载点

使用方法：

		<script>
			var app = new Vue({
				el:"#app",                    
				data:{
					message:" Hello Vue! "
				}
			})
		</script>

总结：

1、el是用来设置Vue实例挂载（管理）的元素。
2、Vue会管理el选项中命中的元素及其内部的后代元素。
3、可以使用其他的选择器，但是建议使用id选择器（id选择器是唯一的）。
4、可以使用其他的双标签，不能使用html和body（会报错）。

三、data数据对象

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue基础</title>
	</head>
	<body>
		<div id="app">
			{{ message }}
			<h2>{{school.name}}{{school.mobile}}</h2>
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
				<li>{{campus[2]}}</li>
				<li>{{campus[3]}}</li>
			</ul>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:" Hello Vue! ",
					school:{
						name:"爱冒险的猫",
						mobile:"123-123-1234"
					},
					campus:["黑河校区","绥芬河校区","齐齐哈尔校区","双鸭山校区"]
				}
			})
		</script>
	</body>
</html>

运行结果图：

总结：

1、Vue中用到的数据定义在data中
2、data中可以写复杂类型的数据
3、渲染复杂类型数据时，遵守js的语法即可

四、Vue中的MMVVM

在这里插入图片描述

计数器中的MVVM

在这里插入图片描述

朱振玉小迷弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

一、第一个Vue程序1、导入开发版本的Vue.js2、创建Vue实例对象，设置el属性和data属性3、使用简洁的模板语法把数据渲染到页面上附带上Vue官方文档，Vue的作者是一名中国人，叫尤雨溪，所以官方文档对中文特别友好，可以参照官方文档进行学习。第一个Vue程序<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue基础</title>
复制链接

扫一扫