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. MXNET:深度学习计算-模型构建

    进入更深的层次:模型构造.参数访问.自定义层和使用 GPU. 模型构建 在多层感知机的实现中,我们首先构造 Sequential 实例,然后依次添加两个全连接层.其中第一层的输出大小为 256,即隐藏 ...

  2. 树莓派做路由器_配置防火墙filter和nat转发_转载

    转自:https://blog.csdn.net/hustsselbj/article/details/45866681 如果用树莓派当作路由器转发有线和无线网络,则需要对iptables进行相关配置 ...

  3. wrk压测工具使用

    介绍分为四部分 1.wrk简述 2.wrk安装 3.wrk运行参数 4.wrk高级用法 1.wrk简述 当使用ab做压测的时候发现,ab的客户端消耗很大,而且测试时性能较差,测试redis,sprin ...

  4. Java知多少(88)列表和组合框

    列表和组合框是又一类供用户选择的界面组件,用于在一组选择项目选择,组合框还可以输入新的选择. 列表 列表(JList)在界面中表现为列表框,是JList类或它的子类的对象.程序可以在列表框中加入多个文 ...

  5. IllegalArgumentException:@Body parameters cannot be used with form or multi-part encoding

    使用retrofit时报错IllegalArgumentException:@Body parameters cannot be used with form or multi-part encodi ...

  6. PHP最全笔记(一)(值得收藏,不时翻看一下)

    PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任 ...

  7. java注解中的元注解

    一:java注解中的元注解 四个元注解分别是:@Target,@Retention,@Documented,@Inherited , 再次强调下元注解是java API提供,是专门用来定义注解的注解, ...

  8. [PHP] 06 - Security: Error, Exception and Filter

    前言 Ref: PHP 发送电子邮件 Ref: PHP Secure E-mails PHP发邮件部分在此系列中略. 这里展开”安全“相关的部分. 有啥区别?  Ref: PHP异常与错误处理机制 P ...

  9. linux下通过curl访问web服务器

    在通过xshell或者其他远程连接工具连接linux服务器,没安装浏览器,却要测试web服务的请求: 可以使用curl 访问web服务器 例如返回百度的主页内容 #curl www.baidu.com ...

  10. mysql格式化小数保留小数点后两位(小数点格式化)

    格式化浮点数的问题,用format(col,2)保留两位小数点,出现一个问题,例如下面的语句,后面我们给出解决方法 SELECT FORMAT(12562.6655,2); 结果:12,562.67 ...