Vue.js学习笔记（二）

Vue.js不支持IE8及以下的版本，因为vue使用了IE8无法模拟的ECMAScript5的特性，它支持所有兼容ECMAScript5的浏览器。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Hello World</title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 </head>
11 
12 <body>
13     <div id="app">{{content}}</div>
14     <script>
15         //原生js实现hello world
16         // var dom = document.getElementById("app");
17         // dom.innerHTML = 'Hello World!';
18         // setTimeout(function() {
19         //     dom.innerHTML = 'bye world'
20         // }, 2000);
21 
22         //vue实现hello world
23         //使用vue之后不需要关注任何dom的操作，只需把精力集中到数据的管理之上，
24         //数据放的是什么，页面展示的就是什么，数据改变了，页面就会跟着改变
25         var app = new Vue({
26             el: '#app', //限制了一个vue实例处理的DOM范围
27             data: {
28                 content: 'Hello World!' //data用于定义一些数据
29             }
30         });
31         setTimeout(function() {
32             app.$data.content = 'bye world'  //两秒之后content内容变成bye world
33         }, 2000)
34     </script>
35 </body>
36 
37 </html>

 

posted @ 2018-07-03 00:37  叶子玉  阅读(156)  评论(0)  编辑  收藏  举报