共计 1230 个字符，预计需要花费 4 分钟才能阅读完成。
目标
- 理解 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="onClick()"> 获取信息 </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 onClick() {setTimeout(() => {setResult('Hello, World.')
}, 1000)
}
/** 设置后果 */
function setResult(v) {
result = v
// 更新相干节点的内容
resultDom.text(v)
newResultDom.val(v)
}
</script>
</body>参考
[1] Vue 中的重要概念
[2] 咱们为什么抉择 VUE 来构建前端
正文完