Vue 入门 —— 组件化开发打开新世界

原生 JS 写多了，总觉得操作 DOM 又繁琐又容易出 bug。早就听说 Vue 框架很好用，这周终于开始学习 Vue 了。
Vue 是渐进式 JavaScript 框架，核心思想是数据驱动视图。不用再手动操作 DOM，数据变了，页面自动更新。
html
预览

{{ message }}

点击修改

这一点太香了！以前要获取元素、修改内容、切换类名，现在只需要改 data 里的数据，页面自动就变了。
最让我震撼的是组件化开发。把页面拆成一个个独立的组件，每个组件有自己的模板、逻辑和样式，互不干扰。
javascript
运行
// 定义一个组件
Vue.component('todo-item', {
props: ['text'],
template: '

{{ text }}

'
});
比如导航栏是一个组件，轮播图是一个组件，商品卡片是一个组件。组件可以复用，也可以嵌套组合，搭页面就像搭积木一样。
Vue 的指令也很好用。v-bind绑定属性，v-on绑定事件，v-model双向数据绑定：
html
预览

你输入的是：{{ username }}

特别是v-model，表单输入和数据自动同步，省去了大量获取输入值的代码。 只学了一周，我就用 Vue 重写了之前的 TodoList 项目，代码量减少了一半还多，逻辑更清晰，维护起来也更轻松。框架之所以流行，就是因为它实实在在地提升了开发效率。