vue2.0:(四)、首页入门,组件拆分1
为什么需要组件拆分呢?这样才能更符合模块化这样一个理念。
首先是index.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>sell</title>
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
<div id="app"></div> <-----------------------------------------这里才是有用的哦,记住这里,这是一个div,id='app' 这里是 A
</body>
</html>
app.vue文件:
<template>
<div id="aaa"> <!------------------------------------------------------这里也要多注意下哦,稍后解释 这里是 B
<div class="header">
im header
</div>
<div class="container">
im container
</div>
<div class="footer">
im footer
</div>
</div>
</template>
<script> </script>
<style>
</style>
main.js文件
import Vue from 'vue';
import App from './App'; /*eslint-disable no-new*/
new Vue({
el:'#app', <!----------------------------------这里和下面一行都蛮重要的 这里是 C
render: h => h(App) <!----------------------------------还有这里哦 这里是 D
})
好,先让我们看一下这么写的效果和最后呈现在HTML的结构是什么样的(太简单了,我怕你们打我。。。。)
我脑子笨,你们原谅我连这点都想不明白,我刚开始就在纠结这三个问题。
1.index.html里面的那个带id#app的div,为什么不会出现在dom结构里?
2.index.html里面的那个带id#app的div,它与app.vue里面的id=‘#aaa’的div有什么关系?
3.为什么在main.js文件里面,用render: h => h(App)把它们挂载到#app里面,有的却写的是components:{app}?
正好加了一个vue的群,在群里提出了我的问题,里面的人告诉我说:
1.应该index.html 里面那个ID 只在node环境用 打包以后 就渲染成挂载的app.vue的页面了.
2.app.vue 跟 index.html 里面的ID 不一定一样 ,app.vue里面的id 会最终渲染到DOM结构里,并且写的其他标签 要放到那个div里面 而且template下级 只能有一个div.
3.
new Vue({
router,
store,
//components: { App } <!---------------------------------------------vue1.0的写法
render: h => h(App) <!---------------------------------------------vue2.0的写法
}).$mount('#app')
先说render:render
函数是渲染一个视图,然后提供给el
挂载,如果没有render那页面什么都不会出来。
然后是 => 箭头函数。是Es6中的新语法:(如果大家想更深入的了解,推荐一篇文章:链接:https://segmentfault.com/a/1190000009410939)
其实render: h => h(App)的意思, 首先 :表示 Vue 实例选项对象的 render 方法,它作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。等价于:
{
render: function(h) {
return h(App);
}
}
其次:Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。
最新文章
- CF733C Epidemic in Monstropolis[模拟 构造 贪心]
- 【转】Linux重定向操作符
- SQL Server:分离和重新附加数据库
- IT版孔乙己(转)
- 优雅的实现Activiti动态调整流程(自由跳转、前进、后退、分裂、前加签、后加签等),含范例代码!
- ADO.NET与Oracle(一):获取多行记录集
- Linux系统工程师学习方法
- 在vim下写python 会出现python错误:unexpected unident
- 开源 java CMS - FreeCMS2.3 移动app生成首页数据
- 自己动手写处理器之第一阶段(3)——MIPS32指令集架构简单介绍
- Ubuntu 安装启动Tomcat
- dedecms 在php5.4以上环境下 无法保存中文
- python实现博客自动刷点击脚本
- Android Studio开发快速创建MVP框架插件AndroidMVP
- 第一次使用eclipse出现的问题
- zabbix使用微信报警(四)
- audio进度条
- nginx域名转发 负载均衡 反向代理
- JavaScript 为什么不要使用 eval
- Spring boot 入门四:spring boot 整合mybatis 实现CRUD操作