Vue 教程

Vue(读音/vjuː/) 是一套构建交互式的 Web 用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

1. Vue 主要特点

  • Javascript 框架
    Vue 是一个Javascript 框架，兼具angular.js和react.js的优点,并剔除了它们的缺点。
  • 简化 Dom 操作
    对浏览器提供的修改 Dom 结构API进行封装，只需要对数据对象进行操作，由 Vue 负责调用底层浏览器 API。
  • 响应式数据驱动
    数据和视图双向绑定，当数据发生变化时，视图跟着进行更新； 当视图发生变化时，数据跟着进行更新。

 

2. 适用人群

本教程假设你已了解关于 HTML、CSS 和 JavaScript 的初中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

 

3. Vue 范例

下面页面是一个最简单的 Vue 范例，在浏览器中访问该页面，将输出 “Hello,World!”。

<html>
<head>
  <title>编程宝库 Vue教程</title>
</head>
<body>
  <div id="app"> 
    <p>{{ message }}</p> 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:'#app',	
      data:{
        message:'Hello,World!'
      }
    })
  </script>
</body>
</html>

我要试一试

 

4. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=2&share_source=copy_web

Vue 框架的代码全部封装在 Vue.js 文件中，尝试学习 Vue.js 最简单的方法是使用 Hello World 例子。1. Vue 版本选择：Vue.js 文件分为两个版本：开发环境版本和生产环境版本。2. Vue 使用方式：使用 Vue 有两种方法：下载到本地使用 或者 直接引用 CDN 链接。3. 声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。