1. Vue是什么?
VUE.js 是一个构建用户界面的渐进式框架，它主要关注的是 ViewModel 层，使得开发者可以专注于业务逻辑，而不用关注DOM操作。
Vue.js 采用的是自底向上增量开发的设计，核心库只关注视图层。它易于上手，灵活便于维护，所以我们可以使用Vue.js来快速构建网页应用。
2. Vue中的DIV操作
Vue.js 的模板语法是基于 HTML 的，我们可以在 html 标签上绑定数据来做一些动态的操作。在Vue.js中操作DIV主要可以拆分为两类操作：数据绑定和属性绑定。
2.1 数据绑定
数据绑定是 Vue.js 中最常用的概念之一，Vue.js 给我们提供了简单的绑定语法，可以在html标签上绑定数据或表达式，这些数据会被实时响应到网页中。
下面我们来看一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
代码执行结果：Hello Vue!
在这个例子中，我们定义了一个 data 对象，其中包含了一个名为 message 的属性。在HTML模板中，我们使用 “{{ }}” 的形式来绑定message变量。当Vue实例中 message 的数据值发生变化时，网页中的绑定数据也会实时刷新。
2.2 属性绑定
在Vue.js中，我们还可以在html标签的属性中绑定数据或表达式。这些属性值的变化也会实时显示到网页中。
下面我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p :class="{active:isActive}">{{ message }}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
isActive: true
}
})
</script>
</html>
代码执行结果：Hello Vue!
在这个例子中，我们使用 “:” 的形式在p标签的class属性中绑定isActive变量。当 isActive 的值为true时，p标签将具有active类，当 isActive 的值为false时，p标签将没有active 类。
3. 总结
本篇文章主要介绍了Vue.js中的数据绑定和属性绑定，我们可以在HTML的标签上绑定数据或表达式，通过Vue.js实时响应网页的变化。