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 树。
vue2.0：（四）、首页入门，组件拆分1的更多相关文章
- Vue2.0表单校验组件vee-validate的使用
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- Vue2.0如何实现父组件与子组件之间的事件发射与接收
关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...
- 在vue2.0中引用element-ui组件库
element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
- vue2.0的瀑布流组件-使用说明
做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...
- vue2.0开发时导入组件时出错
导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...
- vue2.0 组织机构树形选择组件(类似elementui <el-transfer> 与 <el-tree> 两个标签的结合)
1. 效果图 2. 实现: 三级(部门或人员的树形选择) 3. 模拟数据说明: fake.js name: 显示的名称(同时也是源码中 for 循环单一的key , 如果真实数据存在名字有重 ...
随机推荐
- vmware tools for linux 安装
Linux VMware Tools安装步骤简易版 Linux VMware Tools安装估计有点困难,我也在网上看了好多版本的Linux安装VMware Tools,方法都一样.但是自己在安装过程 ...
- Ubuntu16.04 + cuda9.0 + cudnn7.1.4 + tensorflow安装
安装前的准备 UEFI 启动GPT分区 Win10和Ubuntu16.04双系统安装 ubuntu16.04 NVIDIA 驱动安装 ubuntu16.04 NVIDIA CUDA8.0 以及cuDN ...
- 在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串
//封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...
- 使用 Git 命令去管理项目的版本控制（二）
参考 上一篇 完成本篇博客,本篇为作者原创,仅供学习参考. 本篇博文在上一篇的基础上这里记录了我的一个小模拟练习.本篇作为自己的学习笔记,也意在方便其他人的学习使用,达到分享目的.下面主要是操作截图 ...
- unity3D +php +数据库
本文只是自己学习 摘录网上前人的学习资料,并非自己写的!!!!!!最近有项目需要用到数据库,网上有不少资料,但是整理后发现,那些资料对于完全没有PHP+MySQL经验的人来说还是很难理解,所以分享一下 ...
- CodeForces 1098F. Ж-function
题目简述:给定字符串$s[1 \dots n](n \leq 2 \times 10^5)$,以及$Q \leq 2 \times 10^5$个询问,每个询问有两个参数$1 \leq l \leq r ...
- Asset Catalog Help (四)---Adding an iOS App Icon Set or Launch Image Set
Adding an iOS App Icon Set or Launch Image Set Organize different resolutions of your app icons and ...
- 1.131.15 Sqoop导出数据Export使用
一.export 1.export概述 export工具将一组文件从HDFS导入到RDBMS.目标表必须已经存在于数据库中.根据用户指定的分隔符读取输入文件并将其解析为一组记录, 只有map: [ro ...
- 4-1逻辑与运算符介绍 & 4-2逻辑或运算符介绍
后面括号内的(n++)不运算了. 4-2逻辑或运算符介绍
- 洛谷 - P2424 - 约数和 - 整除分块
https://www.luogu.org/problemnew/show/P2424 记 \(\sigma(n)\) 为n的所有约数之和,例如 \(\sigma(6)=1+2+3+6=12\) . ...