目标
- 理解 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来构建前端