早就想学习鱿鱼须大佬的Vue框架了，感觉用Vue做出来的网站都很有辨识度，很好看，一眼就能看出是Vue写的,这里写一下我学习Vue框架的一些笔记体会和实践。
Vue是一个轻量级的渐进式框架,这是他的一些特点，感觉和React框架也差不多： 响应式数据绑定:通过双向绑定实现数据和DOM的同步更新。
Vue最独特的特性之一是其响应式的数据绑定功能。在Vue中,通过使用v-model指令可以实现视图层和模型层之间的双向绑定。
组件化:可以将页面拆分为不同的组件,提高代码的复用性。 Vue推崇组件化的设计,通过组件化可以将页面拆分成可重用的组件。例如可以有头部组件、列表组件、详情组件等,每个组件维护自己的HTML、CSS、JS。这样让代码更加模块化,复用性也更强。
虚拟DOM:通过虚拟DOM实现DOM的高效更新。 浅层学习曲线:相比于Angular、React等框架,Vue的学习曲线更为平稳。 Vue通过建立一个虚拟DOM来追踪页面的状态变化,当数据发生改变时,Vue不会直接操作DOM,而是先更新虚拟DOM,最终再将变化的部分渲染到页面上。这个过程提高了渲染效率。
在用webpack对vue项目打包时，还遇到了resolve别名配置失败的问题，还好后面一顿百度解决了。这里提醒一下，在大项目中,要把代码拆分为多个chunk进行打。需要用到webpack的代码分割相关功能。还有存在文件未编译或者实时重新加载不工作等调试问题,检查了一下DevServer的配置以及各Loader的设置稍加修改就好了。
这里贴一下我的Vue实践代码：
<template>
<div id="app">
<input v-model="newTodo" @keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.done">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: [
{ text: '学习Vue', done: false },
{ text: '打CS', done: true },
{ text: '打OW', done: false }
]
}
},
methods: {
addTodo() {
if(this.newTodo.trim() === '') return
this.todos.push({
text: this.newTodo,
done: false
})
this.newTodo = ''
},
removeTodo(todo) {
this.todos = this.todos.filter(t => t !== todo)
}
}
}
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
