【Vue.js学习笔记（1）】从hello world开始第一个Vue实例

一、创建第一个Vue实例

Step 0：安装vue.js的两种方式

0、开发版本/生产版本 通过直接script标签在head部分引入。

我采用的是开发版本，首先新建一个文件夹，用于这个项目，将下载下来的vue.js文件放入文件夹，再用编译器打开文件夹，在文件夹下建立一个html文件，并进行引入vue.js，如图：

初始代码如下：

    
    
    


    
hello world

1、采用CDN形式，在head部分通过script标签引入链接。

Step 1：明确vue.js该怎么使用

在body部分中，建立script标签，在其中创建vue实例，并且传一个参数到vue实例中，这个参数包括以下几个部分：

（0）el：vue这个实例去接管页面中的哪一个element（元素）

例如：

   
hello world
         

这个vue实例接管了id=root的那个div元素中的内容

（1）data：存放vue实例中的数据

例如：

   
{{msg}}
          

msg中存放hello world字符串，而{{msg}}则能够正确使用data中的msg数据。

Step 3：完整代码如下

    
    
    


    
{{msg}}
    

运行结果：

二、挂载点、模板与实例

0、挂载点

（0）、什么是挂载点

Vue实例中el后面跟的所对应id的div就是一个挂载点，即上例中的

{{msg}}

就是一个挂载点

（1）、挂载点的作用

Vue只会处理挂载点下面的内容，如果：

    

    
{{msg}}
    

运行结果：

也就是说，如果这个块的id与el后面的不对应（即这个模块不是挂载点），那么vue实例并不会去处理这个模块，也就不会得到data中的数据。

1、模板

（0）、什么是模板

    
hello {{msg}}

其中，div这个挂载点的内部就成为模板内容，即

hello {{msg}}

为模板内容，模板可以是字符串或者是data中的数据。

（1）、模板的两种写法

A.模板写在挂载点内部，例如：

    

        
hello {{msg}}
    
    
    

运行结果：

B.模板写在vue实例中的template属性里，例如：

运行结果：

由此可见这两种方式的运行结果没有任何不同。

2、实例

指定挂载点，并且写上模板，vue会自动结合模板和数据生成最终要展示的内容，并把这个内容放在挂载点之中。