Vue入坑教程(一) - 实例化Vue对象

最新推荐文章于 2024-06-17 02:08:23 发布

清晨的光明

最新推荐文章于 2024-06-17 02:08:23 发布

阅读量4.8k

点赞数 4

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/kdongyi/article/details/89048616

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、为什么要学Vue？

先把Vue官网放出来 ? Vue官网，任何时候最权威的教程就是官网！

但是问题来了，官网是权威，但是不一定是最容易理解的?

转入正题，为什么要学Vue？

首先说说我为什么要学习Vue，其实多半是出于无奈，最近在实验室做一个项目，开始是用Django框架，但是做到一半发现项目的前端需要频繁向后端请求数据然后显示到前端，而且需要大量复用元素块。于是查了很多资料最后决定使用Django + Vue前后端分离的框架结构，这样既可以使用Vue的数据视图双向绑定以及Vue的组件化开发，又可以使用Django的python后端。

关于Django + Vue前后端分离等到以后教程写，现在先记录Vue的学习过程。

下面说说Vue到底好在哪里？在一篇文章上看到了这三段话，感觉说的很通俗易懂 ?

vue是响应式的，即JavaScript代码中变量值的改变会反映到HTML元素中，也就是说，实现了数据和视图（HTML元素）的绑定。
以前的做法：如果要改变DOM元素中的内容，我们通常都是使用JavaScript提供的DOM API，先获取到相应的DOM元素，然后进行动态的操作。因为首先要定位到你要修改的DOM元素，然后才能修改数据。如果要改动多个元素的话，我们就需要频繁的进行手动DOM操作。
现在的改变：我们无需关心DOM的更新了，只需要改变数据就可以了。因为数据和视图是绑定的，数据的改变会影响到视图，所以vue帮我们自动更新了视图。

二、写最简单的Vue程序，来感受Vue的存在

1、首先创建两个文件 index.html 和 app.js

先上代码?

index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Veu.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!-- vue-app是根容器 -->
	<div id="vue-app">
		<p>Name: {{ name }}</p>
		<p>Job: {{ job }}</p>
	</div>
	<script src="app.js"></script>
</body>
</html>

app.js代码如下：

// 实例化vue对象
new Vue({
	el:"#vue-app",
	data:{
		name:"kdy",
		job:"软件工程师",
	},
});

/**
 * el: element 需要获取的元素，一定是html的根容器元素
 * data: 用于数据的存储
 */

在app.js里我们实例化了一个vue对象

el和data都为vue对象的属性

el: element 需要获取的元素，一定是html的根容器元素
data: 用于数据的存储

在index.html中我们使用{{ name }}获取了vue对象中name的值

运行结果：

下一讲：Vue入坑教程(二) - Vue的数据和方法

清晨的光明

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue入坑教程(一) - 实例化Vue对象

一、为什么要学Vue？先把Vue官网放出来 ????Vue官网，任何时候最权威的教程就是官网！但是问题来了，官网是权威，但是不一定是最容易理解的????转入正题，为什么要学Vue？首先说说我为什么要学习Vue，其实多半是出于无奈，最近在实验室做一个项目，开始是用Django框架，但是做到一半发现项目的前端需要频繁向后端请求数据然后显示到前端，而且需要大量复用元素块。于是查了很...
复制链接

扫一扫

专栏目录