没时间学 Vue (2)-前端开发

第 (1) 篇啰嗦了半天，现在让我们正式来学一下 Vue。常用的 Vue 功能可能有 30% 都在 Vue 介绍这篇文章里面，我们换个视角掰碎了来学习 —— 关键是把握要点。我们也假定你没时间学 HTML、CSS 和 JavaScript 这些...

第 (1) 篇啰嗦了半天，现在让我们正式来学一下 Vue。

常用的 Vue 功能可能有 30% 都在 Vue 介绍 这篇文章里面，我们换个视角掰碎了来学习 —— 关键是把握要点。

我们也假定你没时间学 HTML、CSS 和 JavaScript 这些基础的内容，也顺带简单提一下。

具体细节的内容，你还是得看前文 https://blog.csdn.net/planet7/article/details/115279727 里面提到的各个网站。

1、绑定

比如说，我们要显示一段文本 “没时间学 Vue”。

也就是说，我们就是要想办法写这样一段 HTML 出来（先不考虑样式）：

<div>没时间学 Vue</div>

如果用 Vue 的话，大概就是这个样子的。

<html>
  <head>
    <script src="aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS92dWUvZGlzdC92dWUuanM="></script>
  </head>
  <body>
    <div id="app">
      <div>{{message}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "没时间学 Vue",
        },
      });
    </script>
  </body>
</html>

拆解来看，其实是这个样子的 —— 注意其中绿色和蓝色箭头的地方。