目的
- 了解 Vue 是什么？
- 了解为什么选择 Vue
- 用案例来了解 Vue 常用的核心语法
一、Vue 是什么？
引自官网——
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
构建用户界面的渐进式框架
构建用户界面比较好理解，但渐进式框架是个什么鬼？
简单来说，渐进式框架是这样一个东东。你可以边学习边掌握边按需应用到项目中，而不必先将它完全掌握后再使用。[1]
自底向上逐层应用
由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。[1]
只关注视图层
声明式渲染、组件式开发、css过渡和动画 等都是为此服务。
便于与第三方库或既有项目整合
由于 Vue 是一个 渐进式框架，那能实现与既有项目整合肯定是必然的。
为复杂的单页应用提供驱动
- 现代化工具链：webpack、vite
- 各种支持类库：UI、vuex、vue-router
二、为什么选择 Vue[2]
了解完 Vue 的特点后，就明白我们为什么选择它了：
- 简化 DOM 与数据的绑定而不必重构项目
- 轻量化且易于学习
- 支持构建单页面应用
- 虚拟 DOM，提升运行效率
- 组件化开发
- 社区友好且活跃
就第一点稍微说明一下，以传统方法实现 DOM 和数据的双向绑定，我们会这样写：
<body>
<p id="result">
<span>结果是：</span>
<span></span>
<button onclick="getResult()">获取信息</button>
</p>
<p>
<label for="">修改结果：
<input type="text" id="new-result" />
</label>
</p>
<script>
var result = ''
var resultDom
var newResultDom
$(document).ready(() => {
// 先将相关 DOM 保存下来
resultDom = $('#result span:eq(1)')
newResultDom = $('#new-result')
// 添加文本输入框的按键完毕的事件监听
newResultDom.keyup(() => {
// 更新结果
setResult(newResultDom.val())
})
})
/** 按钮点击处理，模拟从服务器获取数据 */
function getResult() {
setTimeout(() => {
setResult('Hello, World.')
}, 1000)
}
/** 设置结果 */
function setResult(v) {
result = v
// 更新相关节点的内容
resultDom.text(v)
newResultDom.val(v)
}
</script>
</body>缺点：
- 程序需要建立多个带ID的节点，并将它们引用起来
- 实现逻辑繁琐，如果要实现多个数据绑定的话，将会是个噩梦
- 数据一旦修改会马上触发 DOM 的更新，影响渲染效率
下面咱们使用 Vue 来实现，对比一下：
<body>
<div id="app">
<p>
<span>结果是：</span>
<span>{{ result }}</span>
<button v-on:click="getResult">获取信息</button>
</p>
<p>
<label for="">修改结果：
<input v-model="result" type="text" />
</label>
</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
result: ''
},
methods: {
getResult() {
setTimeout(() => {
this.result = 'Hello, World.'
}, 1000);
}
},
})
</script>
</body>可见，上面用传统方案的三个问题都被解决了（第三个问题比较微观）。这全赖于 Vue 的核心系统，咱们来看看官方给的定义：
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系统
可见此核心系统有以下特点：
- 响应式：实现数据与 DOM 的双向绑定
- 模板语法：可简洁优雅地来表达这种绑定
上面例子中用到了一些基础模板语法：
文本插值
{{ }}：<span>{{ result }}</span>数据绑定指令
v-model：<input v-model="result" type="text" />
参考
[1] Vue 中的重要概念
[2] 我们为什么选择VUE来构建前端
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。