2.Vue 声明式渲染

最新推荐文章于 2025-06-19 10:07:10 发布

Matrix 工作室

最新推荐文章于 2025-06-19 10:07:10 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue从入门到核心

本文链接：https://blog.csdn.net/weixin_43336281/article/details/107080958

Vue从入门到核心专栏收录该内容

14 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何创建第一个Vue应用，重点讲解了Vue的声明式渲染概念。预备知识包括HTML、CSS和JavaScript基础。通过创建index.html，引入Vue.js，使用new Vue实例化，并在data中声明变量实现页面渲染。Vue将数据与DOM建立响应式关联，实现了数据变化驱动视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hello，我是 Alex 007，一个热爱计算机编程和硬件设计的小白，为啥是007呢？因为叫 Alex 的人太多了，再加上每天007的生活，Alex 007就诞生了。

2.创建第一个Vue应用

这篇文章我将带领大家创建第一个Vue应用，并且讲解一下什么是声明式渲染。

预备知识：

HTML基础知识。HTML的编程水平要达到中级水平，熟悉基本的标签并且自己制作过简单的页面；
CSS基础知识。CSS的水平也要达到中级，最好有半年以上的切图和布局经验；
JavaScript基础知识。要求对基本的语法有了解；
Node.js基础知识。不做要求，最好了解npm的基本使用。

那我接下来呢，我们看这个 Vue.js 的起步和声明式渲染，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，它的应用可以分为两个重要部分，一个是视图，另一个是脚本。

我们还是来写写代码吧，新建一个index.html文件，在body中创建一个id为app的div标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

然后我们要通过script标签引入Vue.js：

<script type="text/javascript" src="vue.js"></script>

当我们引入Vue.js的时候呢，会声明一个全局变量，它的名字就叫作Vue，通过new Vue的方式可以获得一个Vue对象，这个对象被我们称之为应用对象或者是Vue.js对象。

在new Vue的时候呢，需要注意传递一个对象作为参数，这个对象有两个非常重要的属性，第一个是el(element)，利用id选择器的方式绑定一个div，第二个重要的属性是data，data是一个用于保存数据的对象，我们在视图中使用了哪些变量就需要在data里面声明这些变量。

我们可以声明一个message1变量，值为Hello World，然后在绑定的div中通过h3以双大括号的形式渲染它，就可以就可以看到页面中已经渲染出来了。

		<div id="app">
			<h3>{{ message1 }}</h3>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message1:'Hello World',
				},
			})
		</script>

在这里插入图片描述

到这里之后你可能会有点懵，我们来做一个类比，id为app的div就好像一块地，通过Vue被我们工作室承包了，然后我们想在这块地上种点瓜果蔬菜，这个双大括号就类似于刨的一个个坑，然后把data中准备好的数据一个一个插进入，这就叫插值表达式。

双大括号中除了可以插入data中的数据，还可以直接插入数字、字符串、对象（注意括号）、表达式、函数返回值等等。

		<div id="app">
			<h3>{{ message1 }}</h3>
			<h3>{{ 123 }}</h3>
			<h3>{{ "Alex" }}</h3>
			<h3>{{ {name: 'Alex',age: 18} }}</h3>
			<h3>{{ 1 != 2 ? 'Nice' : 'Fuck' }}</h3>
			<h3>{{ getName(0) }}</h3>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message1: 'Hello World',
				},
				methods: {
					getName(userId) {
						return 'Alex';
					},
				}
			})
		</script>