VUE课程---2、VUE最简单实例

一、总结

一句话总结：

1、引入Vue.js：<script src="vue.js"></script>

2、创建Vue对象：var app = new Vue({});

3、在模板中使用数据：{{ message }}

1、引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

3、在模板中使用数据
    模板语法：双大括号：{{ message }}

    <div id="app">
      {{ message }}
    </div>

二、VUE最简单实例

博客对应课程的视频位置：2、VUE最简单实例
https://www.fanrenyi.com/video/26/219

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>VUE最简单实例</title>
 6 </head>
 7 <body>
 8 <!--
 9 VUE基本使用
10 1、引入Vue.js
11 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
12 
13 2、创建Vue对象
14     el : 指定根element(选择器)
15     data : 初始化数据(页面可以访问)
16 
17     var app = new Vue({
18       el: '#app',
19       data: {
20         message: 'Hello Vue!'
21       }
22     })
23 
24 3、在模板中使用数据
25     模板语法：双大括号：{{ message }}
26 
27     <div id="app">
28       {{ message }}
29     </div>
30 
31 -->
32 <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
33 <div id="app">
34     {{msg}}
35 </div>
36 <script src="../js/vue.js"></script>
37 <script>
38 
39     new Vue({
40         el:'#app', //element
41         data:{
42             msg:'欢迎来到vue的世界'
43         }
44     });
45 </script>
46 </body>
47 </html>