1.IDEA中安装Vue.js插件
2.建立项目以及html文件
1.创建一个 HTML 文件
2.引入 Vue.js
1 <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
