第一节：Vue入门了解和初次体验

最新推荐文章于 2022-08-29 15:15:53 发布

binggoling

最新推荐文章于 2022-08-29 15:15:53 发布

阅读量395

点赞数

分类专栏： VueJS 文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_30442207/article/details/108225361

版权

VueJS 专栏收录该内容

43 篇文章 7 订阅

订阅专栏

文章目录

前言
系列文章目录，Vue学习目录，每一章都有代码例子说明
一、 Vue.js 是什么？
二、引入使用
三、声明式渲染
三、初次体验
总结

前言

本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网

系列文章目录，Vue学习目录，每一章都有代码例子说明

一、 Vue.js 是什么？

官网的描述：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

这个有几个关键字：渐进式框架、现代化的工具链、支持类库

用一个例子说明
我们现在很多界面排版的方式，div布局：
在这里插入图片描述 Vue是怎样渐进式到现有的界面上去呢，Vue提供一个很直接的方式就是像JQuery那样，直接引入包的Vue.js（这个包在官网就可以直接下载） <script src="./vue.js"></script> ,然后你就在现有的界面上使用Vue的东西，然后界面就是变成这样下面的图，某个div或者是板块变成Vue框架，你现有的其他界面是完全没有影响的，现在我们界面使用出现两个不同类库，这就是Vue的现代化的工具链、支持类库，当你一步步把一个个板块替换，最后整个界面都是Vue框架，完成整个界面重构的效果，这就是Vue的渐进式框架

在这里插入图片描述

二、引入使用

官网-起步，在官网上有详细介绍了几种引入方式。这里我就不说了，看一下官网就好了

三、声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

我来编写了三个例子，分别是javaScript、jQuery、Vue的写法来说明

这是一个javascript最简单的使用（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello javascript</title>
	</head>
	<body>
		<h1 id="app1"></h1>
	</body>
	<script>
		var h1 = document.getElementById("app1");
		h1.innerHTML = 'hello javascript';
	</script>
</html>

这是一个jquery最简单的使用（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello JQ</title>
	</head>
	<body>
		<h1 id="app1" class="title"></h1>
	</body>
	<script src="./jquery.min.js"></script>
	<script>
		    $(function(){
		    	var h1 = $("#app1");
		    	$('.title').html('hello jquery');//修改后的内容
		    })
		</script>
</html>

这是一个Vue最简单的使用（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello vue</title>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: "hello vue"
			}
		})
	</script>
</html>

我们看到javaScript、jQuery两个的写法就是按照写的代码一步步执行，最后实现界面效果，这种编程方式就是我们说命令式编程，就是我们来告诉计算机，你第一步干什么，第二步干什么，第三步... 我们看看Vue，它只是把id的交给了Vue的el这个元素做管理，然后在data做数据DOM，没有那些步骤操作，我们表面看到就是这样，很简洁。但是你了解到vue源码就会知道，其实Vue做了很多很多操作，只是这些操作我们没看到。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的,这就是一个声明式渲染。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。再也不用重复像javaScript、jQuery那种操作就可以完成数据渲染，是不是减少很多步骤，代码也看起来很舒服

三、初次体验

3.1 展示一个hello Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello Vue</title>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
		</div>
	</body>
	<script src="../css/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: "hello Vue"
			}
		});
	</script>
</html>

3.2 Vue的列表展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello Vue</title>
	</head>
	<body>
		<div id = "app">
			<ul>
				<li v-for="item in lists">{{item}}</li>
			</ul>
		</div>
	</body>
	<script src="../css/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				lists: ["java","C","C++","Vue","react"]
			}
		})
	</script>
</html>

3.3 一个简单的计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello Vue</title>
	</head>
	<body>
		<div id="app">
			<h2>开始计算的数：{{number}}</h2>
			<button v-on:click="addNumber(1)">+</button>
			<button v-on:click="subNumber(2)">-</button>
		</div>
	</body>
	<script src="../css/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				number: 0
			},
			methods:  {
				addNumber(num) {
					console.log("开始加" + num);
					this.number++;
				},
				subNumber: function (num) {
					console.log("开始减" + num);
					this.number--;
				}
			},
			//内置函数，是生命周期执行那步骤的回调函数，生命周期下次说，知道就好
			// beforeCreate: function () {
			//
			// },
			// errorCaptured: function () {
			//
			// },
			// create:function () {
			//
			// },
			// beforeMount:function () {
			//
			// },
			// update: function () {
			//
			// },
			// destroyed:function () {
			//
			// }

		})
	</script>
</html>

总结

刚刚入门的Vue使用，让我们对Vue有一个初步的了解和简单使用，也让我们了解的Vue一些强大之处，我也是刚刚开始学习，我相信Vue的功能肯定不住这一点点。写的内容有什么错误地方也请多多指出，我们一起讨论学习吧
看了一下Vue，感觉还有要一点html+css+javascript基础会好一点，没有学过的同学，可以先学一下，比较简单，再回来学Vue会更加容易上手。
下一章
第二节：Vue实例和生命周期

binggoling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第一节：Vue入门了解和初次体验

文章目录前言一、 Vue.js 是什么？二、使用步骤1.引入库2.读入数据总结前言本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习 [Vue官网](https://cn.vuejs.org/)一、 Vue.js 是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化
复制链接

扫一扫