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。

  • 相关阅读:
    CentOs上安装Oracle 10g
    多线程更新form
    C#中写INI文件的方法
    C语言的函数大全,参数列表,数字的81016进制转换
    CCS 3.3 操作C函数读写文件
    关于XML文档读写
    关于MathType的一些用法
    DateTime Proc
    拖拽获得文件路径
    用事件进行窗口间参数传递
  • 原文地址:https://www.cnblogs.com/chenmz1995/p/9976064.html
Copyright © 2011-2022 走看看