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 , 如果真实数据存在名字有重 ...
随机推荐
- OC-内存管理的所有权链问题
背景: 最近维护之前的项目,没有注意具体的对象之间的关系,导致了一个bug. 让我了解到对象的所有权链问题. 需要内存管理的知识: 众所周知,oc是使用引用计数来管理内存的(当一个对象被持有,他的re ...
- BZOJ_1671_[Usaco2005 Dec]Knights of Ni 骑士_BFS
Description Bessie is in Camelot and has encountered a sticky situation: she needs to pass through t ...
- Lucas定理和扩展Lucas定理
1.Lucas定理 首先给出式子:\(C_n^m\%p = C_{\lfloor\frac{n}{p}\rfloor}^{\lfloor\frac{m}{p}\rfloor} * C_{n\%p}^{ ...
- Exceprtion:e createQuery is not valid without active transaction; nested exception is org.hibernate.HibernateException: createQuery is not valid without active transaction
如果增加配置了current_session_context_class属性,查询的时候需要session.beginTrasaction()来开启事务
- POJ2274(后缀数组应用)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 25272 Accepted: 10 ...
- Interval query
题意: 给出数轴上的N个区间,M个询问"QUERY(a, b)", 意为[a, b]之间不相交的集合的最大数量是多少. 解法: 考虑 $O(n)$ 的贪心做法,预处理出对于每一个位 ...
- HDOJ-1251
统计难题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others)Total Submi ...
- SSE2介绍及其简单用法举例
http://blog.csdn.net/fengbingchun/article/details/18515241
- 用Go语言异常机制模拟TryCatch异常捕捉
有的同学看到Go和TryCatch一起出现,心里可能会说,难道Go语言升级了,加入了try...catch语句.哈哈,其实Go语言从创建之初就没打算加入try...catch语句,因为创建Go的那帮大 ...
- 51nod 1031+斐波那契和杨辉三角的一些基础知识
直接斐波那契... #include<stdio.h> #include<queue> #include<string.h> #include<iostrea ...