从零单排vue第一课--Hello World

写在前面的话

Vue的学习需要大家有一点HTML和JavaScript的基础，不需要太深入，只要达到入门的水平即可。JavaScript主要要学习基础部分和面向对象部分，建议大家看看W3CSchool的教程或者阮一峰的教程。这是我的学习笔记，本人才疏学浅，只为与大家分享，学习笔记主要是按照vue的官方文档以及慕课网购买的Dell老师的仿去哪儿网的vue课程做的记录。

W3cschool：https://www.w3school.com.cn/js/index.asp

阮一峰JavaScript教程：http://javascript.ruanyifeng.com/

阮一峰ES6新特性教程：http://es6.ruanyifeng.com/

另外，编辑器我使用的是HBuildX和Sublime Text3

上手第一个Vue程序--Hello World

1.安装vue

https://cn.vuejs.org/v2/guide/installation.html

在vue官网里，可以看到安装方法有很多种。初学者先通过script的方式引入vue，下载开发版vue，并跟随我，在电脑中新建一个vue文件夹，把下载好的vue.js文件拷贝到vue文件夹中，新建一个html文件。

2.编写代码

在html文件中编写如下代码：

    
        
        
    
    
    
    

      {{content}}
    
      
    

运行结果：

在浏览器中显示hello world

代码解析：

• 第6行代码，使用script标签引入vue.js
• 第9-11行代码，创建了一个id为app的div标签
• 第12-19行代码，在script标签内，写了一段vue语法的代码。代码的意思是，创建了一个Vue实例对象，该对象中有两个属性：el和data。el属性的作用是将vue绑定到id为app的DOM中，data的作用是定义了一个content字符串，内容为hello world。
• 回头看9-11行代码，有一个{{content}}，这就意味着将vue中的content内容输出到这里，将数据绑定到dom中了。如果content内容改变，这里输出也会改变。

与传统JS代码的区别？

var dom = document.getElementById('app');
dom.innerHtml = 'hello world'

• 传统的js代码总是在操作DOM
• 而vue呢？封装了抽象了DOM操作，让你只关注视图和数据，以及如何绑定它们