社区首页 >专栏 >【Vue.js】014-Vue：概述、初体验

【Vue.js】014-Vue：概述、初体验

訾博ZiBo

发布于 2025-01-06 07:19:44

6800

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、Vue概述

1、简介

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

官方文档：https://cn.vuejs.org/v2/guide/

参考文章：

https://www.jb51.net/list/list_269_1.htm

2、Vue安装

方式一：直接使用`<script>`引入

开发版本（包含完整的警告和调试模式）：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产版本（删除了警告，33.30KB min+gzip）：

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏；

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

下载到本地引入：

开发版本下载地址：https://cn.vuejs.org/js/vue.js

生产版本下载地址：https://cn.vuejs.org/js/vue.min.js

方式二：NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件；

# 最新稳定版
$ npm install vue

方式三：命令行工具 (CLI)

vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档；

二、Vue初体验

1、简单数据渲染

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">{{message}}Hello {{name}}！</div>
		<script src="js/vue.js"></script>
		<script>
			// 编程范式：声明式编程
			// 创建一个vue对象
			const app = new Vue({
				el: '#app', // 用于挂载要管理的元素
				data: { // 定义数据
					message: 'Hello Vue！',
					name: '訾博'
				}
			})
			// 响应式：数据发生变化，页面内容会自动跟着变化
			app.name = 'zibo';
			// 编程范式：命令式编程；
			// 原生js做法
			// 1、创建div元素，设置id属性；
			// 2、定义一个变量message；
			// 3、将message变量放在前面的div中显示；
		</script>
	</body>
</html>

截图：

运行结果：

2、Vue列表的展示

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}}
			<ul>
				<!-- 每一次取一个元素赋值给item -->
				<!-- 元素循环的同时所在标签也进行循环 -->
				<li v-for="item in people">{{item}}</li>
			</ul>
		</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: "你好！",
					people: ['大哥','二哥','三哥','四哥']
				}
			})
		</script>
	</body>
</html>

运行结果：

3、计数器

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			当前计数：{{counter}}
			<!-- 绑定事件：v-on -->
			<!-- 简单的表达式可以直接写里面执行 -->
			<!-- <button @click="counter++">+</button>
			<button @click="counter--">-</button> -->
			<button @click="add()">+</button>
			<button @click="remove()">-</button>
		</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					counter: 0
				},
				// 定义方法
				methods:{
					add(){
						// this表示当前对象
						this.counter++;
					},
					remove(){
						this.counter--;
					}
				}
			})
		</script>
	</body>
</html>