【Vue.js】002-Vue.js起步

訾博ZiBo

发布于 2025-01-06 07:16:37

17700

代码可运行

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

运行总次数：0

代码可运行

一、声明式渲染

1、概述

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

2、简单插值

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 简单插值 -->
			<!-- Vue插值表达式，把data中定义的数据显示至此 -->
			{{ message }} 
			<!-- 三元运算符 -->
			{{ true ? "OK" : "NO" }}
			<!-- 数字运算 -->
			{{ num * 3.14 }}
		</div>
		<script>
			var app = new Vue({
				//el即element元素，用于指定元素
				//此处使用id选择器，接管div区域
				el:"#app",
				//data用于存储数据
				data:{
					//键值对形式进行存储
					message : "Hello Vue!",
					num : 100
				}
			});
		</script>
	</body>
</html>

运行结果：

补充：在控制台改变数据

3、另一种绑定元素的方式

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<script>
			var vue = new Vue({
				el: "#app", 
				data : {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			});
		</script>
	</body>
</html>

运行结果：

知识补充：

v-bind attribute 被称为指令；

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute；

二、条件与循环

1、v-if

示例：

控制切换一个元素是否显示；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<script>
			var vue = new Vue({
				el: "#app", 
				data : {
					seen : true
				}
			});
		</script>
	</body>
</html>

运行结果：

内容补充：

2、v-for

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ol>
				<!-- 从todos中取，作为todo -->
			    <li v-for="todo in todos">
					<!-- 从todo中拿text -->
			      {{ todo.text }}
			    </li>
			</ol>
		</div>
		<script>
			var vue = new Vue({
				el: "#app", 
				data : {
					//todos列表
					todos: [
					      { text: '学习 JavaScript' },
					      { text: '学习 Vue' },
					      { text: '整个牛项目' }
					    ]
				}
			});
		</script>
	</body>
</html>

运行结果：

内容补充：

三、处理用户输入

1、v-on

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					message: "Hello Vue.js!"
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					}
				}
			});
		</script>
	</body>
</html>

运行结果：

2、v-model

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message }}</p>
			<input v-model="message">
		</div>
		<script>
			var vue = new Vue({
				el: "#app", 
				data : {
					message : "你好，訾博！"
				}
			});
		</script>
	</body>
</html>

运行结果：

四、组件化应用构建

1、概述

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

2、简单示例

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ol>
				<!--
			      现在我们为每个 todo-item 提供 todo 对象
			      todo 对象是变量，即其内容可以是动态的。
			      我们也需要为每个组件提供一个“key”，稍后再
			      作详细解释。
			    -->
				<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
			</ol>
		</div>
		<script>
			//定义一个名为todo-item的组件
			Vue.component('todo-item', {
			  props: ['todo'],
			  template: '<li>{{ todo.text }}</li>'
			});
			
			var vue = new Vue({
				el: "#app",
				data: {
					//一个列表
					groceryList: [
						//类似多个实例对象
					      { id: 0, text: '蔬菜' },
					      { id: 1, text: '奶酪' },
					      { id: 2, text: '随便其它什么人吃的东西' }
					    ]
				}
			});
		</script>
	</body>
</html>

运行结果：

3、与自定义元素的关系（Vue官方说明）

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is attribute。但是，还是有几个关键差别：

（1）Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。

（2）Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

对象