今天咱们聊聊Vue，为啥它能在前端界如此风靡。我先带大家回顾一下前端开发的历史，再用一个todoList小案例来体验一下vue给我们带来的全新开发思路-数据驱动界面。话不多让我们一起走进Vue的世界。
原始的前端开发年代
想象一下，前端开发的原始年代，我们的代码里满是document.getElementById和各种事件监听器，简直像在迷宫里找路，而且每次更新页面都要费劲巴拉地操作DOM，这不仅让代码变得复杂难懂，还拖慢了性能。就像开车时总是在市区的小巷子里穿梭，效率低下。当业务量巨大的时候，这样做还不得敲代码敲得头晕眼花。
jQuery时代
然后jQuery来了，它像是给开发者们提供了一张地图，简化了很多DOM操作，$('#id')这种写法让我们的生活轻松了不少。
typescript
<input type="text" id="todo-input">
<script>
$('#todo-input').val('haha')
</script>然而，随着Web应用的复杂性逐渐增加，jQuery已经不能完全满足开发者的需求。特别是在Web 2.0时代，用户对交互体验的要求越来越高，大量JavaScript代码的执行效率和页面性能成为了关键问题。这种情况下，Vue的诞生为前端开发带来了一种新的思考方式。
Vue.js：前端开发的瑞士军刀，让开发者"偷懒"又高效
从DOM编程到数据思维
Vue带来了全新的开发方式------让我们专注于业务逻辑而不是底层API。用数据驱动界面，组件化思维，响应式设计，这些都让前端开发变得更简单、更直观。Vue就像是给我们装上了自动驾驶系统，它知道什么时候该走高速（批量更新DOM），什么时候该停靠休息站（优化渲染过程）。
{{}} 文本插值
文本插值是最基本的数据绑定形式
css
<span>Message: {{ title }}</span>- 双大括号标签会被替换为
title属性的值。同时每次title属性更改时它也会同步更新。
v-bind 动态属性属性绑定
css
<span :class="{done:isDone}">{{title}}</span>- 上面的语法表示
done是否存在取决于数据属性iisDone的真假值。
v-on 绑定事件监听器
我们可以使用
v-on指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler"或@click="handler"。
v-model 在表单输入元素上创建双向绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
ini
<input
:value="text"
@input="event => text = event.target.value">v-model 指令帮我们简化了这一步骤：
ini
<input v-model="text">在Vue中，开发者不需要直接操作DOM。Vue会自动跟踪数据的变化，并在需要时高效地更新DOM。这种机制使得开发者可以专注于业务逻辑，而不必担心底层的DOM操作细节。Vue通过批量收集DOM更新，减少了不必要的DOM操作，提高了性能。这种"减少跑路"的方式，让前端开发变得更加高效和简洁。
todoList
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todos</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 挂载点，vue 作用范围 -->
<div id="app">
<h2>{{title}}</h2>
<input type="text" v-model="title" @keydown.enter="addTodo" />
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.done">
<span :class="{done:todo.done}">{{todo.title}}</span>
</li>
</ul>
<div>
全选<input type="checkbox" v-model="allDone">
<span>{{active}}/{{all}}</span>
</div>
</div>
<script>
const App = {
data() {
return {
title: '',
todos: [
{ title: '吃饭', done: false },
{ title: '睡觉', done: false },
{ title: '打豆豆', done: false }
]
}
},
computed: {
//单纯的返回一个属性值
all() {
//基于现有数据,编写求值逻辑
//return 结果
//计算属性内部可以用this直接访问到app实例
return this.todos.length
},
active() {
//return this.todos.filter(todo => !todo.done).length
return this.todos.filter((todo)=>{
return !todo.done
}).length
},
// get set 都做
allDone: {
get(){
//如果还有要做的事情,active的值就为1 this.active === 0的值为0
return this.active === 0
},
set(val){
// 数据和界面保持一致
this.todos.forEach(todo =>{
todo.done = val
})
}
}
},
methods: {
addTodo() {
this.todos.push({
title: this.title,
done: false
})
this.title = ''
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>结语
Vue的哲学可以概括为：以数据为中心，屏蔽底层的DOM编程细节，提供简洁高效的开发方式。这种开发方式不仅提高了前端开发的效率，也让开发者能够更好地专注于业务逻辑的实现。无论是从简单的数据绑定，还是复杂的用户交互逻辑，Vue都提供了一种优雅的方式来实现。在未来，Vue将会继续以其独特的优势，推动前端开发的发展。