关于vue.js:Vue-入门此文足矣

目标

理解 Vue 是什么？

理解为什么抉择 Vue

用案例来理解 Vue 罕用的外围语法

引自官网——

Vue (读音 /vjuː/，相似于 view) 是一套用于 构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为能够 自底向上逐层利用 。Vue 的外围库 只关注视图层 ，不仅易于上手，还 便于与第三方库或既有我的项目整合 。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能 为简单的单页利用提供驱动。

构建用户界面比拟好了解，但 渐进式框架 是个什么鬼？
简略来说，渐进式框架 是这样一个东东。你能够边学习边把握边按需利用到我的项目中，而不用将它齐全把握后对我的项目进行重构。^[1]

由基层开始做起，把根底的货色写好，再逐层往上增加成果和性能。^[1]

申明式渲染 、 组件式开发、css 过渡和动画 等都是为此服务。

因为 Vue 是一个 渐进式框架，那能实现与既有我的项目整合必定是必然的。

现代化工具链：webpack、vite
各种反对类库：UI、vuex、vue-router

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

关于vue.js:Vue-入门此文足矣

一、Vue 是什么？

构建用户界面的渐进式框架

自底向上逐层利用

只关注视图层

便于与第三方库或既有我的项目整合

为简单的单页利用提供驱动

二、为什么抉择 Vue^[2]

参考