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>