Vue.js学习笔记1 - Vue基础

开始之前，引入一段Vue官方的文字：

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

怎么理解这段话呢？我个人除了几年前做毕业设计的时候玩过HTML和PHP以外，再没有多余的前端基础，而且那毕设的东西简陋不堪，完全不能构成体系，所以算是一个零基础的小白。但是由于自身是个程序员，所以我初步制定的学习路线大概是：

1. Vue基础
2. HTML+CSS
3. Vue组件

等以上3个阶段渡过之后，希望能直接接触公司项目代码，然后不断从实战中学习。最后，希望这个路线是可行的。

这个学习的过程准备在做粗略记录，简单的罗列一下知识点和个人的踩过的坑。
当然，一切的学习要基于文档，在初学阶段文档可以解决你遇到的大多数问题。

---

1 vue是什么

Vue.js 官方文档

2 使用

2.1 CDN

这种方式推荐在第一个阶段使用，引入
或者：

2.2 Vue CLI
这是一个官方提供的脚手架，配合命令行工具可以创建完整的项目工程，不建议初学者直接使用。官方推荐在熟悉 Vue 本身之后再使用 CLI。

3 开始

开始学习Vue.js最简单的方式就是在浏览器中直接使用：JSFinddle。

但是我的学习方式是以HTML、CSS 和 JavaScript的方式将文件分开，这样方便第二阶段的学习，文件结构如下：

第一个vue程序：

index.html文件：



    
    
    
    
    



    

        {{ message }}
    
    



app.js文件：
var vm = new Vue({
    el : "#app",
    data : {
        message : "Hello Vue!"
    }
})

运行结果

解释：
在上述HTML代码中，在

中引入cdn的