初始vue模板語法的2大類例子4（一看就懂）
阿新 • • 發佈：2021-07-18
效果；
程式碼：
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 <title>Document</title> 8 <!-- 開發環境版本，包含了有幫助的命令列警告 type="text/javascript" --> 9<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 15 <!-- 16 17 vue模板語法有2大類 18 1 插值語法 19 功能：用於解析標籤體內容。 20 寫法： {{需要的內容}} 21 22 2 指令語法 23 功能： 用於解析標籤（包括 標籤屬性 標籤體內容 繫結事件...) 24 25 備註 ：vue中有很多的指令，並且形式都是 v-???? 此處我們只是拿v-bind 舉個例子。26 27 --> 28 29 <!-- 符合一部分的HTML語法。 --> 30 <div id="root"> 31 32 <h1> 插值語法 </h1> 33 <h1>hello.{{ name }}</h1> 34 <hr> 35 <h1>指令語法</h1> 36 <!-- 連結方式寫入。v-bind. 這裡雙引號裡面，是一個表示式。 37 381 用v-bind可以修改URL地址。 不用這個，就是寫死的了。 不能修改。 39 --> 40 <a v-bind:href="url"> 點我去學習vue 官網</a> 41 42 </div> 43 44 45 <!-- JavaScript程式碼 --> 46 <script type="text/javascript"> 47 Vue.config.productionTip = false // 阻止vue在啟動時 生產生產提示。 48 //建立vue例項。例項就是實際的例子。猶如舉例說明 。el就是 element的縮寫。 49 new Vue({ //注意大寫V 50 el: '#root', // el用於指定當前vue例項為哪個容器服務，值通常為css選擇器字串 51 data: { 52 name: 'Jack', 53 url: 'https://cn.vuejs.org/v2/api/#v-bind' 54 55 56 } 57 58 59 60 }) 61 62 63 64 65 </script> 66 67 </body> 68 69 </html>