vue之组件
组件与模块的区别
组件：组件的出现就是为了拆分vue实例代码量的，能够让我们以不同的组件来划分不同的功能模块。
所谓模块化是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一；组件化，是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用。
全局组件定义的三种方式
1、使用Vue.extend配合Vue.component方法：
<script>
//1.1 使用Vue.extend来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>this is a h3</h3>' //通过template属性，指定组件要展示的HTML结构
})
//1.2 使用Vue.component('组件的名称',创建出来的组件模板对象)
Vue.component('myCom1', com1)
//Vue.component第一个参数，组建的名称在将来引用组建的时候，就是一个标签形式的他来引入
//第二个参数 Vue.extend创建的组件，其中 template就是组件将来要展示的HTML内容
//也可以像如下直接这么写
// Vue.component('myCom1', Vue.extend({
// template: '<h3>This is a h3</h3>'
// }))
</script>
div部分
<div id="app">
<!--如果要使用组件，直接把组件的名称，以HTML的形式引入到页面中即可}-->
<!--注意如果用驼峰形式的命名， 要用横杠并取消大写-->
<my-com1>
</my-com1>
</div>
2、直接使用Vue.component方法：
//注意无论用哪种方式创建出来的组件，组建的template属性指向的模板内容，必须有且只有唯一的一个根元素
Vue.component('mycom2',{
template: '<h3>这是直接用Vue,component创建出来的组件</h3><span></span>'
})
3、将模板字符串定义到script标签中：
<div id="app">
<mycom3></mycom3>
</div>
//这种方式的好处是在template里面有html代码的高亮提示
<template id="temp1">
<div>
<h1>这是在外部定义的组件结构</h1>
</div>
</template>
<script>
Vue.component('mycom3', {
template:'#temp1'
})
</script>
定义私有组件
<div id="app">
<login>
</login>
</div>
<template id = 'temp'>
<h1>this is a private component</h1>
</template>
<script>
var vm = new Vue({
// 私有
el:'#app',
data:{},
methods: {},
filters:{},
directives:{},
components:{
//定义实例内部私有组件
login:{
template:'#temp'
}
},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
updated(){},
beforeDestory(){},
destoryed(){},
})
</script>
为什么组件的data必须是一个函数，返回值是一个对象
有以下三点需要明确
1 组件可以有自己的data数据
2 组件的data必须是一个方法，并且方法必须返回一个对象
3 组件中的data数据使用方法和实例中的data使用方法是一样的
<div id="app">
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="temp1">
<div>
<input type="button" value="+1" @click = "increment">
<h3> {{count}} </h3>
</div>
</template>
<script>
// 计数器组件，我们在这里定义一个对象
var dataObj={ count: 0 }
Vue.component('counter',{
template:"#temp1",
data:function(){
//这里返回dataObj，理论上是可以的
return dataObj
},
methods:{
increment(){
this.count++;
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
结果就是
两个实例的数据串用，这是因为datObj是一个对象，对象属于引用类型，我们在 div#app 放置了两个counter组件，那这两个组件内部数据返回的对象永远都指向dataObj这一对象，也就是这两个counter实例共享了同一个data数据
所以将data的返回值改成
return{
count:0
}
这样一来每当创建一个新的组件实例，就会调用data中的函数，这个data 函数就会return 一个新开辟的对象。这样才能保证每个实例的data才是独有的。
结果如下：
组件切换—v-if
html代码:
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if=flag></login>
<resiger v-else=flag></resiger>
</div>
<script>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('resiger',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
flag:true
},
methods: {}
});
</script>
组件切换—component 及 is 属性
解决了v-if只能两者之间切换的问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='resiger'">注册</a>
<!-- Vue提供了component 来展示对应组件的名称 -->
<!-- component 是一个占位符 :is 属性 可以用来指定要展示的组件名称 -->
<component :is="comName"></component>
<!-- 当前学习得Vue提供的标签
component template transition transitionGroup
-->
</div>
<script>
// 组件名称是字符串
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('resiger',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
//当前component中 :is绑定的组件名称
comName: 'login'
},
methods: {}
});
</script>
</body>
</html>
未完待续。。。
插入链接与图片
链接: link.
图片: 
带尺寸的图片:
居中的图片: 
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
## 生成一个适合你的列表
- 项目
- 项目
- 项目
1. 项目1
2. 项目2
3. 项目3
- [ ] 计划任务
- [x] 完成任务
## 创建一个表格
一个简单的表格是这么创建的：
项目 | Value
-------- | -----
电脑 | $1600
手机 | $12
导管 | $1
### 设定内容居中、居左、居右
使用`:---------:`居中
使用`:----------`居左
使用`----------:`居右
| 第一列 | 第二列 | 第三列 |
|:-----------:| -------------:|:-------------|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
### SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE |ASCII |HTML
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'` |'Isn't this fun?' |
|Quotes |`"Isn't this fun?"` |"Isn't this fun?" |
|Dashes |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|
## 创建一个自定义列表
Markdown
: Text-to-HTML conversion tool
Authors
: John
: Luke
## 如何创建一个注脚
一个具有注脚的文本。[^2]
[^2]: 注脚的解释
## 注释也是必不可少的
Markdown将文本转换为 HTML。
*[HTML]: 超文本标记语言
## KaTeX数学公式
您可以使用渲染LaTeX数学表达式 [KaTeX](https://khan.github.io/KaTeX/):
Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过欧拉积分
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
> 你可以找到更多关于的信息 **LaTeX** 数学表达式[here][1].
## 新的甘特图功能，丰富你的文章
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划一 : des3, after des2, 5d
计划二 : des4, after des3, 5d
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
1944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
