为 Vue.js 新手准备的实战入门教程,第一部分

Vue.js

对于任何开发人员来说,学习一个新框架都是一个非常艰巨的过程,特别是对于仍在学习基础语言(在这种情况下为 JavaScript )的开发人员而言。这就是为什么我决定创建本系列的原因,在该系列中,我尝试使学习 Vue.js 变得轻松和易于理解 🙂

我不喜欢冗长的引言,所以如果您继续阅读的话,我假设:

您具有一些基本的 HTML / CSS / JS 知识。您不需要成为经验丰富的前端开发人员就可以将 Vue 用作开发框架,但是至少您要懂得编写 HTML 标记,了解 CSS 的基本工作原理,还有如何编写 JavaScript。

Vue 作为库

您可以通过多种方式将 Vue 合并到您的 Web 项目中。让我们从最简单的一个开始(您可能不会经常使用它)。

大多数教程/文章都假定您对如何设置开发环境有一定的了解,在该环境中将使用 npmwebpack 之类的东西来设置项目-虽然这是理想的,因为您可以直接使用它。我们可以从更简单的系统的方法开始:可靠的原始的 <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> 标记内将其实例化。我们通过将 #app 传递给 options 对象的 el 属性来给它一个 selector ,这样 Vue 就会知道我们的应用应该在哪里渲染。 (请记住ID为 app 的空 <div>?)

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

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

那么这里发生了什么?
我们创建了 new Vue 实例,并向其传递一个配置对象。请参阅{}作为参数。

  1. el: 如上所述, 在这里,我们告诉 Vue 在 HTML 中我们希望应用程序显示的位置。在本例中, 是带有 app id 的 div 。
  2. data 对象。每个 Vue 实例 都有一个本地存储,就像一个包含变量和属性的方框,我们可以用它来编写应用程序,我们可以在编写应用程序时使用这些变量和属性。因此我们使用 { } 语法为它赋值。在里面,我们放置了一个属性。
  3. 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';

您将看到此变量更改时页面立即做出 响应


请继续关注第二部分!

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/marinamosti/hands-on-vuej...

译文地址:https://learnku.com/vuejs/t/41354

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 1

写的好,第二部分呢

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!