在本教程中你可以学习到代码的最佳实践，项目推动式的学习过程中的反馈也是最足的，从基本概念到高级概念，通过简单的步骤学习VueJS。
在教程中遇到任何不懂的地方记得去搜索引擎上去搜哦！
介绍：学习一个框架层次的内容对于开发人员都是一个煎熬的过程，更何况身为初学者的我们，所以在讲解过程中，我努力使得Vue.js学习变得尽可能简单易懂。
在本教程中你需要有的基础是：
- 具有Html，Css，JavaScript基础知识，亲自实践。
- 仅此而已
有许多种方式开始Vue项目，我们选择最简单的一种。
许多的文章教程喜欢直接用npm，webpack去建立项目，但这都是在假设开发者已经了解了如何设置开发环境，对于初学者的我们来说这简直就是灾难，所以我们用老土的办法，使用script标签。
选择一个你喜欢的代码编辑器，创建一个index.html的文件，我喜欢VsCode。
如果你使用的是VsCode，建议食用live server插件，在html文件中按Alt+L Alt+O就可以立刻打开浏览器，还可以随时保存文件很方便哦。
之后将框架复制粘贴入你的文件中
<html>
<head>
<title>Vue 101</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="app"></div>
<p> {{ Property }}</p>
</body>
</html>接下来我们进入Vue库，把以下代码复制粘贴入我们的body标签内
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 现在我们的Vue已经加载入我们的页面里面啦！
接下来让我们创建一个Vue实例，通过在script标签内，我们将通过将#app传递给选项object的el属性来给它一个选择器，这样Vue就会知道我们的应用程序应该在哪里被渲染，data属性是我们的内容项目。
将以下代码复制粘贴进入以上的script之后
<script>
const app = new Vue({
el: '#app',
data: {
Property:'I am your First Vue.app'
}
});
</script>在这里我们创建了我们的new vue对象，并且给了它一个对象，让我们关注一下内容
<p> {{ Property }}</p>这里所发生的叫做变量插值，意思是我要在这个占位符显示我的Property里面的内容，就是{{}}的位置
现在打开我们index.html所在的浏览器，我们会看到我们的内容。
恭喜你，你已经成功完成了你的第一个Vue项目！
好啦，这一模块的第一部分已经完成啦，值得一提的是有很多人说Vue是一个反应性框架，那是什么意思呢？
在浏览器中按F12，打开我们的开发者工具，输入以下文本
app.Property='Hello World',
你会发现网页中的内容变了样子，也就是页面对这个变量的变化做出了反应。
附上之上的全部代码
<head>
<title>Vue 101</title>
</head>
<body>
<h1>Hello!</h1>
<div id="app">
<p> {{ Property }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
Property: 'I am your first Vue.app'
}
});
</script>
</body>
</html>喜欢的话可以关注我哦！
我们下一章节再见啦！
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
