vue关于html页面id设置问题
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设置问题的更多相关文章
- WordPress后台的文章、分类，媒体，页面，评论,链接等所有信息中显示ID并将ID设置为第一列
WordPress后台默认是不显示文章.分类等信息ID的,查看起来非常不方便,不知道Wp团队出于什么原因默认不显示这个但可以使用Simply Show IDs插件来实现 不使用插件,其他网友的实现: ...
- vue webpack多页面构建
项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...
- vue项目各页面间的传值
githut地址:https://github.com/liguoyong/vueobj1 一.父子之间主键传值:(主要是在父主件里的子主件传递参数,然后再子主件里用props接收) 例如Father ...
- 前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
- leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询
1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...
- 优化vue+springboot项目页面响应时间：waiting(TTFB) 及content Download
优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download TTFB全称Time To First Byte,是指网络请求被发起到从服务器接收到地 ...
- PHP 404页面/如何设置404页面/URL静态化/URL伪静态化
php中如何设置404页面及其他错误页面 首先在项目根目录下新建文件,文件名为" .htaccess " 在该文件中写入一下配置项: ErrorDocument 404 /404. ...
- vue获得当前页面URL动态拼接URL复制邀请链接方法
vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...
- vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
随机推荐
- ArcGIS Runtime SDK for iOS开发地图图层－图形图层
注:本文翻译自:https://developers.arcgis.com/ios/objective-c/guide/creating-a-graphics-layer.htm 创建图 ...
- Zookeeper系列三：Zookeeper客户端的使用（Zookeeper原生API如何进行调用、ZKClient、Curator）和Zookeeper会话
一.Zookeeper原生API如何进行调用 准备工作: 首先在新建一个maven项目ZK-Demo,然后在pom.xml里面引入zk的依赖 <dependency> <groupI ...
- Ubuntu安装redis缓存数据库
参考:http://blog.csdn.net/xiangwanpeng/article/details/54586087 1.在下载目录下 sudo wget http://download.red ...
- zabbix参考文档
http://www.zsythink.net/archives/category/%E8%BF%90%E7%BB%B4%E7%9B%B8%E5%85%B3/zabbix/
- C#基础--类/接口/成员修饰符，多态、重载、重写，静态和非静态
C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...
- Elasticsearch 学习之携程机票ElasticSearch集群运维驯服记(强烈推荐)
转自: https://mp.weixin.qq.com/s/wmSTyIGCVhItVNPHcH7nsA 一.整体架构 为什么采用ES作为搜索引擎呢?在做任何事情的时候,不要一上来就急着了解怎么做这 ...
- Unity3D Shader 按百分比裁剪模型
Shader Shader "Unlit/Disappear" { Properties { _MainTex ("Texture", 2D) = &qu ...
- 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- iOS - 标准时间与时间戳相互转换
做倒计时后台传的不是时间戳,是时间然后需要与系统时间对比得出时间戳进行倒计时显示 #pragma mark -- 倒计时 // 倒计时时间 NSString* timeStr = task.recei ...
- ElasticSearch入门 第六篇：复合数据类型——数组，对象和嵌套
这是ElasticSearch 2.4 版本系列的第六篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...