zoukankan      html  css  js  c++  java
  • vue关于html页面id设置问题

    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。

  • 相关阅读:
    递归算法的时间复杂度
    5分钟了解lucene全文索引
    Codeforces Round #234A
    快速排序法
    构造方法、类的初始化块以及类字段的初始化顺序
    Java之方法重载篇(我重载了,你要如何来调用我。。)
    突如其来的&amp;quot;中断异常&amp;quot;,我(Java)该如何处理?
    一个简单的wed服务器SHTTPD(4)————SHTTPD支持CGI的实现
    一个简单的wed服务器SHTTPD(3)————SHTTPD多客户端支持的实现
    一个简单的wed服务器SHTTPD(2)———— 客户端请求分析
  • 原文地址:https://www.cnblogs.com/chenmz1995/p/9976064.html
Copyright © 2011-2022 走看看