vue是一个前端框架，类似于angularJS等，vue在编写的时候需要在html页面指定id，但是不是都可以实现的，一般放在id需在div设置里才可以实现。

(一)

在html里设置id:

 <!DOCTYPE html>

 <html id="vue">

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

 </head>

 <body>

     <div>

         <h1>site : {{site}}</h1>

         <h1>url : {{url}}</h1>

         <h1>{{details()}}</h1>

     </div>

     <script type="text/javascript">

         var vm = new Vue({

             el: '#vue',

             data: {

                 site: "菜鸟教程",

                 url: "www.runoob.com",

                 alexa: "10000"

             },

             methods: {

                 details: function() {

                     return  this.site + " - 学的不仅是技术，更是梦想！";

                 }

             }

         })

     </script>

 </body>

 </html>

页面效果:

可以看出并不起作用。

(二)

在body中设置id。

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

 </head>

 <body id="vue">

     <div>

         <h1>site : {{site}}</h1>

         <h1>url : {{url}}</h1>

         <h1>{{details()}}</h1>

     </div>

     <script type="text/javascript">

         var vm = new Vue({

             el: '#vue',

             data: {

                 site: "菜鸟教程",

                 url: "www.runoob.com",

                 alexa: "10000"

             },

             methods: {

                 details: function() {

                     return  this.site + " - 学的不仅是技术，更是梦想！";

                 }

             }

         })

     </script>

 </body>

 </html>

显示效果:

可以看出仍然是不起作用。

(三)

在div设置id:

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

 </head>

 <body>

     <div id="vue">

         <h1>site : {{site}}</h1>

         <h1>url : {{url}}</h1>

         <h1>{{details()}}</h1>

     </div>

     <script type="text/javascript">

         var vm = new Vue({

             el: '#vue',

             data: {

                 site: "菜鸟教程",

                 url: "www.runoob.com",

                 alexa: "10000"

             },

             methods: {

                 details: function() {

                     return  this.site + " - 学的不仅是技术，更是梦想！";

                 }

             }

         })

     </script>

 </body>

 </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. C++ 成员函数赋值给C 的函数指针的采坑录

    最近做一个banana Pi M1+的硬解码器封装成类的时候,由于是依赖ffmpeg的,而ffmpeg是C 实现的,本来demo 都是直接用C写的,测试也没有问题,想着封装也不会有问题,至少自己对C+ ...

  2. Go Revel - Logging（日志）

    revel提供了4种日志记录器: 1.`TRACE` - 调试信息 2.`INFO` - 信息 3.`WARN` - 一些无害的异常信息 4.`ERROR` - 必须要关注的错误 日志记录器可以在`a ...

  3. too many open files

    压测遇到这个问题,每次都查,记录一下: 系统分配文件数太少,临时修改方案: ulimit -n 2048 永久配置: vim /etc/security/limits.conf 底部配置: # End ...

  4. spring 手动添加 bean 到容器，例子 ：多数据源配置

    package com.thunisoft.spsjsb.config.db.decrypt; import com.alibaba.druid.pool.DruidDataSource; impor ...

  5. java-信息安全（九）-基于DH,非对称加密，对称加密等理解HTTPS

    概述 java-信息安全(七)-基于非对称加密,对称加密等理解HTTPS 如果想要理解好https,请尽量了解好以上信息等. 参看文章: http://www.ruanyifeng.com/blog/ ...

  6. Spark学习笔记——在集群上运行Spark

    Spark运行的时候,采用的是主从结构,有一个节点负责中央协调, 调度各个分布式工作节点.这个中央协调节点被称为驱动器( Driver) 节点.与之对应的工作节点被称为执行器( executor) 节 ...

  7. 3 saltstack高可用

    高可用 如果我们依赖于saltmaster管理服务器,那么就需要对saltmaster做好高可用.那么saltstack-master怎么做高可用呢? 可以参考官网1,官网2 机器配置: 我们有两台机 ...

  8. 【QT】无需写connect代码关联信号和槽函数

    对于一些简单的事件判别,如点击按钮. 无需写代码关联信号和槽函数. connect(ui->Btnshowhello,SIGNAL(clicked(bool)),this,SLOT(Btnsho ...

  9. @ResponseBody的作用

    由于之前一直用struts2,对springMvc的注解并不太了解.新公司的项目用的是springMvc+hibernate,看到了@ResponseBody注解 @ResponseBody作用类似于 ...

  10. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...