Vuejs學習筆記(一)-2.vuejs初體驗
阿新 • • 發佈：2021-06-30
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-HelloVuejs.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 16:27 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-HelloVuejs</title> 16</head> 17 <body> 18 <div id="app"> 19 {{message}} 20 </div> 21 <script src="../js/vue.js"></script> 22 <script> 23 // es6的語法: const表示常量,let表示定義變數 24 25 const app = new Vue({ 26 27 el:'#app', // el表示載入管理一個名叫app的標籤，本case就是管理<div id='app'></div>28 //data內部定義Vue例項app內管理的資料 29 data:{ 30 message:'hello vuejs' 31 } 32 }) 33 </script> 34 35 </body> 36 </html>
以上程式碼是在<script>中建立一個Vue例項app,並且定義了內部變數data.message,然後讓data.message的值渲染在html中的div標籤中展示。
如下圖所示：
以上程式設計正規化為宣告式程式設計，即只需要在html中宣告一個{{message}}變數即可，不需要知道程式是如何具體將Vue例項中的message如何傳遞給html中，並且在介面展示的黑盒邏輯。