Vue.js

Vue.js 是什么?

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

官方指南假设你已了解关于HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。
学习HTML、CSS、JavaScript网站推荐到MDN上学习,因为这是各大浏览器统一的文档网站

安装Vue.js

我以为的渐进式

我以为的渐进式是你可以从传统的网页开发方式逐渐提升到现代前端模块化工程化的开发方式。

如果你还习惯于传统的网页开发方式,你可以直接引用 vue.js 来尝试使用 Vue,像这样:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

那如果你已经开始使用 node 工具链和模块化开发了,可以使用 npm 进行安装使用:

# 最新稳定版
$ npm install vue

如果你觉得上面两种方法都觉得太繁琐了,Vue 提供了一个官方的 CLI,为单页面应用快速搭建繁杂的脚手架。

声明式渲染

demo
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 系统:

image.png

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

条件与循环

控制切换一个元素是否显示也相当简单:

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

继续在控制台输入 app3.seen = false,你会发现之前显示的消息消失了。

慕课网vue.js入门基础(做一个Todo List)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 6,109评论 7 113
  • 1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架...
    司小璇阅读 1,871评论 0 23
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,501评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,157评论 0 29
  • 听完东叔对巴齐耶的作品《画室》,听我用自己的语言来向大家阐述一下这幅画。 在画的右边弹钢琴的男子是热爱音乐的梅特尔...
    Dimples宇阅读 1,335评论 0 1

友情链接更多精彩内容