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。

vue关于html页面id设置问题的更多相关文章

  1. WordPress后台的文章、分类，媒体，页面，评论,链接等所有信息中显示ID并将ID设置为第一列

    WordPress后台默认是不显示文章.分类等信息ID的,查看起来非常不方便,不知道Wp团队出于什么原因默认不显示这个但可以使用Simply Show IDs插件来实现 不使用插件,其他网友的实现: ...

  2. vue webpack多页面构建

    项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...

  3. vue项目各页面间的传值

    githut地址:https://github.com/liguoyong/vueobj1 一.父子之间主键传值:(主要是在父主件里的子主件传递参数,然后再子主件里用props接收) 例如Father ...

  4. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  5. leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询

    1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...

  6. 优化vue+springboot项目页面响应时间：waiting(TTFB) 及content Download

    优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download TTFB全称Time To First Byte,是指网络请求被发起到从服务器接收到地 ...

  7. PHP 404页面/如何设置404页面/URL静态化/URL伪静态化

    php中如何设置404页面及其他错误页面 首先在项目根目录下新建文件,文件名为" .htaccess " 在该文件中写入一下配置项: ErrorDocument 404 /404. ...

  8. vue获得当前页面URL动态拼接URL复制邀请链接方法

    vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...

  9. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

随机推荐

  1. Could not load file or assembly 'System.Core, Version=2.0.5.0

    项目中用的4.0,本机没问题,服务器上出现问题,查了一下发现  autofac 里面用的这个版本 解决:下载安装这个4.0的补丁 http://support.microsoft.com/kb/246 ...

  2. [js] 处理字符串换行造成的json解析失败

    需求:从数据库某个字段取出字符串出来,转为json,结果发现报错为 解析失败,发现是因为取出的字符串换行导致,现在需要将字符串里面的换行替换为'',使字符串可依成功解析成json对象. 技术:依靠re ...

  3. java-信息安全（六）-基于RSA理解数字签名示例

    概述 java-信息安全(四)-数据签名.数字证书 java-信息安全(五)-非对称加密算法RSA RSA工具类 使用java-信息安全(五)-非对称加密算法RSA项目中RSACoder 数字签名理解 ...

  4. [AWS] Deploy react project on EC2

    如何在aws部署项目 申请到亚马逊AWS免费账户后,我们可以拥有很多的免费云服务产品项目,其中包括: EC2云服务器. Amazon S3存储. Amazon RDS数据库. Amazon Cloud ...

  5. 【代码审计】大米CMS_V5.5.3 目录遍历漏洞分析

      0x00 环境准备 大米CMS官网:http://www.damicms.com 网站源码版本:大米CMS_V5.5.3试用版(更新时间:2017-04-15) 程序源码下载:http://www ...

  6. [Linux] ssh-key 公钥文件格式

    SSH 协议(Secure Shell 协议)最初在 1995 年由芬兰的 Tatu Ylönen 设计开发,由 IETF(Internet Engineering Task Force)的网络工作小 ...

  7. NUC972---Linux驱动开发

    驱动开发是嵌入式 Linux 产品开发的重要组成部分,驱动是将芯片底层与Linux应用连接起来的桥梁.驱动程序的好坏直接影响和决定着产品的稳定性,稳定的驱动程序是产品可靠性的基石. 编写 Linux ...

  8. Puppet报错汇总

    报错1: 解决:该报错是由于Puppet agent 的时间和Puppet master的时间不一致导致,可以使用ntp同步一下时间即可解决 报错2: 启动mcollective的时候报错 解决:ge ...

  9. php面试题之一——HTML+CSS（基础部分）

    一.HTML + CSS部分 1. 请说明 HTML 文档中 DTD 的意义和作用(酷讯) DTD,文档类型定义,是一种保证 html 文档格式正确的有效方法,在解析网页时,浏览器将使用 DTD 来检 ...

  10. HTML head 头标签(转)

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...