Vue教程3-声明式渲染

Vue.js声明式渲染与基础指令详解

最新推荐文章于 2025-06-20 06:49:49 发布

原创最新推荐文章于 2025-06-20 06:49:49 发布 · 704 阅读

1 ·

CC 4.0 BY-SA版权

本文是Vue教程的第三部分，主要探讨声明式渲染的概念，如何使用Vue进行数据绑定。文章详细介绍了v-model、v-if/v-show、v-for、v-on和v-bind等基础指令的工作原理和用法，帮助开发者理解Vue如何实现视图和数据的双向绑定及条件、循环和事件处理。

Vue

Vue是一套用于构建用户界面的渐进式框架，被设计可以自底向上逐层设计。Vue的核心只关心视图层。

声明式渲染

Vue可以采用简洁的语法模版来声明式的将数据渲染进DOM系统中，也就是可以通过 {{data}} 的方式直接将数据写入DOM中。

<div id='app'>
	{{message}}
</div>

var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello, World',
		show: true,
		LIST: [
			{message: '1111111'},
			{message: '222222},
			{message: '333333'}
		]
	}，
	methods: {
		showMessage(){
			this.message = '1234578'
		}
	}
})

现在数据message已经被写入DOM中，显示在浏览器上Hello, World，并且系统是响应式进行更新，当我们更改data里面的message时，DOM数据也会响应更新，浏览器显示的数据也会进行更新。
当然你也可以通过Vue的其他命令来实现数据的绑定，原理都是一样的。

指令

下面我们将谈谈Vue里面的一些基础指令。

1、v-model

这是平时最常用的，用于帮助form表单来绑定提交数据的，它帮助应用实现了表单输入和应用状态的双向绑定。

<input v-model='message'/>
<div>{{message}}</div>

input 输入组件利用v-model绑定message，input 初始化会显示message的初始数据，同时input的输入可以直接改变message的值，而div标签的message会随着input的输入而发生改变。

2、v-if与v-show

v-if 与 v-show 二者绑定数据后会进行判断，判断结果为true/false，如果是true，便可以显示组件，否则就会隐藏组件。

	<div v-if=‘show’>{{message}}</div>
	<div v-show=‘show’>{{message}}</div>

但是二者有着很大的区别：

v-show，无论true/false，组件都会被初始化创建，说明组件已然是存在的，只是v-show控制了css样式中的显示属性；

但是v-if则不同，v-if如果是false，组件不会被创建，如果由true改成false，组件则直接被销毁，如此反复。

优缺点：

1、v-if更加浪费资源与时间，但是可以进行实时的数据更新
2、v-show更加节省资源事件，但是更新后台的数据就相对来说没有那么及时

3、v-for

循环，循环一般放在数组时使用，当需要逐个显示数组内数据时，便需要使用v-for指令

<div v-for='list in LIST'>
	{{	list.message	}}
</div>

4、 v-on

绑定触发事件便使用v-on，v-on会绑定一个事件监听器，监听绑定的事件。v-on缩写@

<button v-on:click="showMessage">改变消息</button>
<button @click="showMessage">改变消息</button>

button标签绑定一个showMessage函数，点击鼠标，触发函数，

5、v-bind

v-bind 指令可以用于响应式地更新 HTML attribute。v-bind可直接缩写省略，例如：

<a v-bind:href="url">...</a>
<a :href="url">...</a>

在上面的例子中，a标签的属性href与url的值进行绑定