vue關於html頁面id設定問題
阿新 • • 發佈：2018-11-19
vue是一個前端框架，類似於angularJS等，vue在編寫的時候需要在html頁面指定id，但是不是都可以實現的，一般放在id需在div設定裡才可以實現。
(一)
在html裡設定id:
1 <!DOCTYPE html> 2 <html id="vue"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>JS Bin</title> 7 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 8 </head> 9 <body> 10 <div> 11 <h1>site : {{site}}</h1> 12 <h1>url : {{url}}</h1> 13 <h1>{{details()}}</h1> 14 </div> 15<script type="text/javascript"> 16 var vm = new Vue({ 17 el: '#vue', 18 data: { 19 site: "菜鳥教程", 20 url: "www.runoob.com", 21 alexa: "10000" 22 }, 23 methods: { 24 details: function() { 25 return this.site + " - 學的不僅是技術，更是夢想！"; 26 } 27 } 28 }) 29 </script> 30 </body> 31 </html>
頁面效果:
可以看出並不起作用。
(二)
在body中設定id。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>JS Bin</title> 7 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 8 </head> 9 <body id="vue"> 10 <div> 11 <h1>site : {{site}}</h1> 12 <h1>url : {{url}}</h1> 13 <h1>{{details()}}</h1> 14 </div> 15 <script type="text/javascript"> 16 var vm = new Vue({ 17 el: '#vue', 18 data: { 19 site: "菜鳥教程", 20 url: "www.runoob.com", 21 alexa: "10000" 22 }, 23 methods: { 24 details: function() { 25 return this.site + " - 學的不僅是技術，更是夢想！"; 26 } 27 } 28 }) 29 </script> 30 </body> 31 </html>
顯示效果:
可以看出仍然是不起作用。
(三)
在div設定id:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>JS Bin</title> 7 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 8 </head> 9 <body> 10 <div id="vue"> 11 <h1>site : {{site}}</h1> 12 <h1>url : {{url}}</h1> 13 <h1>{{details()}}</h1> 14 </div> 15 <script type="text/javascript"> 16 var vm = new Vue({ 17 el: '#vue', 18 data: { 19 site: "菜鳥教程", 20 url: "www.runoob.com", 21 alexa: "10000" 22 }, 23 methods: { 24 details: function() { 25 return this.site + " - 學的不僅是技術，更是夢想！"; 26 } 27 } 28 }) 29 </script> 30 </body> 31 </html>
效果展示:
可以看出現在已經正確渲染出來了。
結論:可以看出在html和body中設定id是不起作用的，應該是建一個div在裡邊設定id。