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 的系统。