2.第一个Vue程序

1.IDEA中安装Vue.js插件

2.建立项目以及html文件

1.创建一个 HTML 文件

2.引入 Vue.js

1 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3.创建一个 Vue 的实例

1 <script type="text/javascript">
2     var vm = new Vue({
3         el: '#vue',
4         data: {
5             message: 'Hello Vue!'
6         }
7     });
8 </script>

说明:

  • el:'#vue'：绑定元素的 ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!

4.将数据绑定到页面元素

1 <div id="vue">
2     {{message}}
3 </div>

5.完整HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 
 8 </head>
 9 <body>
10 
11 <div id="vue">
12     {{message}}
13 
14 </div>
15 
16 <!--导入Vue.js-->
17 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
18 <script type="text/javascript">
19     let vm = new Vue({
20         el: '#vue',   //绑定元素的 ID
21         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值
22             message: 'Hello Vue!'
23         }
24     });
25 </script>
26 </body>
27 </html>

3.通过MVVM模式更新数据

在控制台修改 vm.message 中的内容，没有主动操作DOM就让页面发生了变化。

MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。

 

posted @ 2019-12-21 22:15  All_just_for_fun  阅读(182)  评论(0)  编辑  收藏  举报