<

div>

1. Vue下载

（1）网址： https://cn.vuejs.org/v2/guide/installation.html

（2）点击开发版本，下载完成是一个 Vue.js

2. 使用

（1）创建文件夹

文件夹：html

文件夹：js

把 Vue.js放到 这个文件夹中

文件夹：01-Vue

在这个文件夹中写 html代码：01.html

（2） 引入 Vue.js

完整代码

（3）初体验，打印：HelloVue — 注意体会与JS的不同

• 创建
      

< div id =”app” ></ div >

• 创建 Vue对象

const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data:{//定义数据
            message :"HelloVue"
        }
    })

• 完整代码

    
    
    




    
 {{message}}



    //编程范式：声明式编程
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素  是 l 不是 1
        data:{//定义数据
            message :"HelloVue",
        }
    })

（4）响应式编程：数据发生改变的时候，界面自动改变

• 运行html，打开控制台
• 输入 app.message ：显示HelloVue

• 修改HelloVue：在控制台输入 app.message = “你好啊” 回车  页面会立即发生变化

3. 浏览器执行代码的流程

 1 
 2 
 3 
 4     
 5     
 6     
 7 
 8 
 9 
10 

11     
 {{message}}
12 
13 
14 
15     //编程范式：声明式编程
16     const app = new Vue({
17         el: '#app',//用于挂载要管理的元素
18         data:{//定义数据
19             message :"HelloVue"
20         }
21     })
22     //响应式：数据发生改变的时候，界面自动改变
23 
24 
25 

• 执行到10-13行时，显示出对应的 html
• 执行到16行，创建Vue实例，并且对HTML进行解析和修改

4. 创建Vue时，传入的options： el 和 data

• el：该属性决定了这个Vue对象挂载到哪一个元素上，这里我们挂在到了id为app的元素上
• data：该属性通常会存储一些数据，这些数据可以是上面那样我们直接定义的，还可以是从网络、服务器加载的

5. 源码

    
    
    




    
 {{message}}



    //let 变量 const 常量
    //let name = "why"
    //name = "tom"
    //编程范式：声明式编程
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data:{//定义数据
            message :"HelloVue"
        }
    })
    //响应式：数据发生改变的时候，界面自动改变