vue關於html頁面id設置問題

本文轉載自查看原文 2018-11-17 22:44 3776 vue

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。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html頁面相同id Vue中出現Do not use built-in or reserved HTML elements as component id:footer等等vue warn問題 jsp頁面用html引入vue.js注意問題遍歷獲取html頁面所有元素的id 根據html頁面id尋找對應的Js文件 vue通過ID（參數）修改URL復用同一個頁面（組件）不重新加載的問題 html頁面編碼問題 vue頁面初始化時設置scrollTop無效問題總結 vue meta設置頁面 vue如何設置login頁面