初学者 Vue.js 实践（第一部分）

Vue 作为库

在我们的应用程序上显示属性

反应性

对于任何开发者来说，学习一个新框架都可能是一个非常艰巨的过程，尤其是对于仍在学习基础语言（这里指的是 JavaScript）的开发者来说。因此，我决定创建这个系列，力求让 Vue.js 的学习尽可能轻松易懂 🙂

我不喜欢做冗长的介绍，所以我假设如果你还在读：

你具备一些基本的 HTML/CSS/JS 知识。你不需要是一位经验丰富的前端开发者才能使用 Vue 作为开发框架，但至少你需要能够编写自己的 HTML 标记，了解 CSS 的基本工作原理，当然，还要会写 JavaScript。总而言之，这就是我们的目的所在。
就是这样。不，真的。

Vue 作为库

有几种方法可以将Vue集成到你的 Web 项目中。让我们从最简单的方法开始（你可能不会经常用到）。

大多数教程/文章都会假设您对如何设置开发环境有所了解，您将在其中使用诸如之类的工具npm来webpack设置项目 - 虽然这是理想的，因为您可以获得开箱即用的功能 - 但我们可以从一种更简单、更适合初学者的方法开始。可靠的旧<script>标签。

继续启动您最喜欢的代码编辑器，并创建一个名为的新文件index.html。（如果您还没有，VS Code是一个流行的免费选择。）

<html>
  <head>
    <title>Vue 101</title>
  </head>

  <body>
    <h1>Hello!</h1>
    <div id="app"></div>
  </body>
</html>

没什么特别的，我们只是在为一个简单的网站搭建骨架。现在让我们把Vue库放进去。在结束符之前粘贴这个脚本标签</body>。

[...]
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

现在它Vue已经加载到我们的页面中，我们可以开始使用了。
我们先创建一个新的 Vue 实例，把new它放在一个<script>标签内。我们将通过传递options 对象的属性来给它一个选择器，这样它就能知道我们的应用应该渲染到哪里。（还记得那个ID 为app的空对象吗？）#appelVue<div>

将此代码放在我们的最后一个脚本标签之后。

<script>
    const app = new Vue({
        el: '#app', // 1
        data: { // 2
            myLocalProperty: 'Im a local property value' // 3
        }
    });
</script>

那么这里发生了什么？
我们创建了new Vue实例，并传递了一个配置对象。看到了{}参数吗？

el:正如我之前提到的，这里我们告诉 Vue 我们希望应用程序显示在 HTML 中的哪个位置。在本例中，是带有appid 的 div。
data对象。每个 Vue实例都有一个本地存储，就像一个用来保存变量和属性的盒子，我们可以在编写应用代码时使用它们。数据保存着一个 JavaScript 代码object，所以我们用语法给它赋值{ }。在本地存储中，我们放置了一个属性。
myLocalProperty。此属性在我们的实例的对象内部定义data，它的名称是 myLocalProperty，右侧的值是值 - 在本例中为字符串。

在我们的应用程序上显示属性

现在，如果你打开index.html浏览器，就不会看到太多变化。

让我们添加一些代码来在 HTML 中显示我们的属性。你的文件应该如下所示：

<html>
    <head>
        <title>Vue 101</title>
    </head>

    <body>
        <h1>Hello!</h1>
        <div id="app">
          <p>My local property: {{ myLocalProperty }}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>
          const app = new Vue({
            el: '#app',
            data: {
              myLocalProperty: 'Im a local property value'
            }
          });
        </script>
    </body>
</html>

请密切关注这一行：

<p>My local property: {{ myLocalProperty }}</p>

这里发生的事情称为变量插值，这是一个很奇特的术语，意思是“我将在我现在所在的myLocalProperty占位符中显示我的变量的内容”。{{ }}

重新加载页面，您将看到字符串更新以反映我们的变量。

继续尝试将里面的字符串更改myLocalProperty为其他文本并重新加载页面，您应该会看到文本相应地更新。

反应性

最后，在本课中，我们来谈谈reactivity。你可能听说过Vue是一个响应式框架。但这究竟意味着什么？在 Chrome 开发者工具中打开控制台，并在 index.html 中加载类型：

app.myLocalProperty = 'Vue is reactive';

您将看到页面对此变量变化做出反应！

敬请期待第二部分！

文章来源：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-1-2j2g

初学者 Vue.js 动手实践（第一部分）Vue 作为库在我们的应用程序上显示属性反应性

初学者 Vue.js 实践（第一部分）

Vue 作为库

在我们的应用程序上显示属性

反应性

Vue 作为库

在我们的应用程序上显示属性

反应性