一、为什么要学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的数据和方法 

Logo
Vue

前往低代码交流专区

更多推荐

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

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

avatar 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