为什么需要组件拆分呢?这样才能更符合模块化这样一个理念。

首先是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 树。

vue2.0:(四)、首页入门,组件拆分1的更多相关文章

  1. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  2. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  3. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  6. 在vue2.0中引用element-ui组件库

    element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...

  7. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  8. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

  9. vue2.0开发时导入组件时出错

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

  10. vue2.0 组织机构树形选择组件(类似elementui <el-transfer> 与 <el-tree> 两个标签的结合)

    1. 效果图 2. 实现:   三级(部门或人员的树形选择) 3. 模拟数据说明:  fake.js name:  显示的名称(同时也是源码中 for 循环单一的key ,  如果真实数据存在名字有重 ...

随机推荐

  1. PS 图像滤镜— — USM 锐化

    这个算法的原理很简单,就是先用高斯模糊获取图像的低频信息,然后用原图减去高斯模糊之后的图,得到图像的高频信息,再将原图与高频信息融合,进一步增强原图的高频信息,看起来,图像的边缘显得特别的sharp. ...

  2. 小工具之Synergy

    用于两个主机共享键盘和鼠标的工具: 软件名字:synergy软件主页: http://synergy-foss.org支持平台:linux,mac,windows 通吃 作用:通过网络在多台主机之间共 ...

  3. JAVA 中的堆和栈

    栈与堆都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆.     Java的堆是一个运行时数据区,类的对象从中分配空间.这些对象通过new.n ...

  4. HDU2203(KMP入门题)

    亲和串 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. Ipython使用总结1

    安装了Anaconda就会发现安装了很多组件.也就省去了安装包时候的依赖问题 https://www.continuum.io/downloads 2 Ipython基础 (1)启动: win+R 启 ...

  6. 使用ant时 出现 java.lang.OutOfMemoryErro r: Java heap space的解决办法

    在Linux的shell中,使用export设置ANT_OPTS变量,值为1G export ANT_OPTS=-Xmx1g ant 同理在windows的cmd中,使用set设置ANT_OPTS变量 ...

  7. E20190308-hm

    sweep vt. 扫除; 打扫,清理; 彻底搜索; 掠过; vi. 打扫; 扫过; 蜿蜒; 大范围伸展; n. 打扫; 延伸; 挥动; 全胜;

  8. Educational Codeforces Round 19 A, B, C, E(xjb)

    题目链接:http://codeforces.com/contest/797 A题 题意:给出两个数n, k,问能不能将n分解成k个因子相乘的形式,不能输出-1,能则输出其因子: 思路:将n质因分解, ...

  9. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:1. 连接阿里云物联网

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  10. builder模式的新学习

    builder模式的新学习 静态工厂和构造器有个共同的局限性:他们不能很好的扩展到大量的可选参数.大多数产品在牧歌可选与中都会有非零的值 对于这种类,应该使用哪种构造器或者静态方法来进行编写?程序员一 ...