为 Vue.js 新手准备的实战入门教程，第一部分
对于任何开发人员来说，学习一个新框架都是一个非常艰巨的过程，特别是对于仍在学习基础语言(在这种情况下为 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> 标记内将其实例化。我们通过将 #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 实例，并向其传递一个配置对象。请参阅{}作为参数。
el:如上所述, 在这里，我们告诉 Vue 在 HTML 中我们希望应用程序显示的位置。在本例中， 是带有appid 的 div 。data对象。每个 Vue 实例 都有一个本地存储，就像一个包含变量和属性的方框，我们可以用它来编写应用程序，我们可以在编写应用程序时使用这些变量和属性。因此我们使用{ }语法为它赋值。在里面，我们放置了一个属性。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 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
写的好，第二部分呢