Vue(一) HelloWorld

Vue

一、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue 最简单的Hello World程序步骤

1、去Vue官网

Vue官网：https://cn.vuejs.org/

2、获取Vue库

去到https://cn.vuejs.org/v2/guide/界面获取vue库链接,可以先使用开发环境版本练习，因为它有帮助的命令行警告。

3、使用Vue写个简单的Hello.html

创建个Hello.html的文件，输入如下内容：

    
    
    
    


{{msg}}

使用浏览器打开Hello.html的文件，显示如下效果：

三、Vue Hello.html详解

1、Vue实例

Hello.html里面通过new Vue()创建了一个Vue的实例
 new Vue({
        el: "#app",
        data: {
            msg: "Hello World"
        }
    })

2、Vue 实例绑定div id

Vue通过el: "#app"指定vue实例的挂载点名是app和

{{msg}}

里面的id的值app形成绑定关系。

3、获取Vue实例里面的数据

{{msg}}

vue实例绑定div id后，可以通过{{msg}}获取vue实例data里面
data: {msg: "Hello World"}的msg的值。