Vue：数据双向绑定和v-系列指令

最新推荐文章于 2025-06-27 12:15:28 发布

原创

最新推荐文章于 2025-06-27 12:15:28 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #常用基础 #v-on v-html v-show v-model等

本文介绍了Vue.js的基础知识，包括Vue.js的声明式渲染、文本插值{{message}}、v-html、v-bind、v-model双向绑定和v-on事件绑定。通过实例展示了这些指令的用法，强调了数据驱动和MVVM模式在Vue.js中的应用，以及使用v-once和v-pre避免重复渲染的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js是当下最火的一款前端框架了，学习的时候要多动手实践以帮助理解。我是通过例子来学习的，这样记的快一些。

Vue.js介绍
如何引入Vue？
何为声明式渲染？如何实现？
文本插值{ {message}}
v-html
v-bind：绑定元素属性
v-model：双向绑定，仅用于表单元素
v-on：事件绑定机制

1.什么是Vue.js？

Vue.js官方网站的解释：

Vue.js（/vjuː/）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
分析Vue.js与DOM

学习Vue.js时要抛开jQuery手动操作DOM的思维，因为Vue.js是数据驱动的，不需要手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
核心

Vue.js是一种MVVM框架（Model-View-ViewModel），其中html是view层，js是model层，ViewModel是Vue.js的核心。

上图是实现数据双向绑定的示意图。

创建了ViewModel实例后，双向绑定的过程分为：

1.上图中的DOM Listeners和Data Bindings是实现双向绑定的关键。

2.从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据。

3.从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

2.引入Vue

方法一：独立下载

在 Vue.js 的官网上直接下载 vue.min.js ，并用 <script> 标签引入。可放在html文件的<head>部分，也可放在<body>
方法二：使用 CDN 方法

不需要下载，直接通过以下方法在html中引入：
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

3.声明式渲染

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

如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js的声明式渲染</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="myVue">
		<P>{
   
   {
   
    Data }}</P>
	</div>

	<script type="text/javascript">
		var vue = new Vue({
   
   
			el: "#myVue",
			data: {
   
   
				Data: '我的第一个Vue应用'
			}
		})
	</