Vue的两大特性(组件篇)
Vue的两大特性(组件篇)
1.指令 -- 用来操作dom
2.组件 --组件是html css js等的一个聚合体
3.为什么要使用组件？
1.组件化
思想：1.将一个具备完整功能的项目的一部分进行多处使用
2.能加快项目的进度
3.可以进行项目的复用
2.要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这一完整的整体称 之为组件
3.插件 ： index.html img css js 分开的话会导致复用的麻烦
4.如果能将 html css js img 等多个部分放在一起，那该多好，所以Vue将这个聚合体的文件称之为，单文件组件(xx.vue)
4.基础的组件创建
1.全局创建（也叫全局注册）
2.局部创建（局部注册）
<div id='app'></div>
<script>
//Vue 是构造器函数
//Vue.extend() 是 Vue用来扩展vue功能（组件）的
console.log(Vue) //输出Vue的构造函数
console.log(Vue.extend()) //输出VumComponent的构造函数
//Vue决定不进行实例化Vue.extend(), vue借鉴了react，react中组件是以标签的形式使用的，
//vue决定组件要以标签的形式呈现
//为了符合html / html5的规则，所以组件的标签化使用必须注册，
//注册说白了就是用来解析这个标签化的组件让html能识别的标签
//总结: 组件使用前必须注册
new Vue({
el:'#app'
})
</script>
全局注册
组件必须先注册再使用（组件范围内使用），全局注册就是 只需要注册一次 可以多次使用（别的组件范围也可以使用）
//语法： Vue.component(组件的名称，组件的配置项)
//Vue.extend() 中有options参数
//Vue()也有options参数 两个options基本一致
var Hello = Vue.extend({
template:'<div>这里是father组件</div>'
})
Vue.component('Father',Hello)
new Vue({
el:'#app'
})
全局组件简写形式：
Vue.component('Father',{
template:'<div>这里是father组件</div>'
})
局部注册
注意：
命名：一个单词的大写：注意不要和原生的h5标签重名 比如header footer
标签名字要小写 （如果标签大写的话需要带-）比如 header-title
大驼峰：GaYa 使用 ga-ya
局部注册：在组件中用一个components的配置项目来表示
只能在注册的范围内使用，其他地方不能使用
<div>
<gabriel-yan></gabriel-yan> //这里会输出 ‘这里是1903’
</div>
var Hello = Vue.extend({
template:'<div>这里是1903</div>'
})
new Vue({
el:'#app',
components:{
'gabriel-yan':hello
}
})
局部组件简写形式：(在Vue下面的components中写)
new Vue({
el: '#app',
components: {
'Hello': { //组件名
template: '#hello' //组件的结构
}
}
})
组件的嵌套
父组件里面放子组件 类似于dom结构中的父子结构
将子组件以标签的形式放在父组件的模板中使用
切记 不要放在父组件内容中
错误的写法:
<div id='app'>
<Father><Son></Son></Father>
</div>
正确写法：
<div id='app'>
<Father></Father>
</div>
Vue.component('Father',{
template:'<div>这里是father组件<Son></Son></div>'
})
Vue.component('Son',{
template:'<div>这里是Son组件</div>'
})
嵌套局部写法
new Vue({
el:'#app',
components:{
'Father':{
template:'<div>这里是Father组件</div>'
components:'Son':{
template:'<div>这里是Son组件</div>'
}
}
}
})
组件的一些特殊使用规则
<div id='app'>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
//is规则
// ul>li ol>li table>tr>td select>option
//如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug
//解决 使用is规则：用过is属性来绑定一个组件
// <tr is = "Hello"></tr>
Vue.component('Hello',{
template:'<tr><td>1</td><td>2</td><td>3</td></tr>'
})
new Vue({
el:'#app'
})
template使用：
1.实例范围内使用
2.实例范围外使用
/*
template使用：
\1. 实例范围内使用
template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
\2. 实例范围外使用
实例范围外template标签是不会被直接解析的
组件要想使用template使用，我们采用第二种
但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示
解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件
*/
实例范围内使用
<div id="app">
<h3> 实例范围内使用 </h3>
<template>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
<h3> 使用 hello 组件</h3>
<Hello></Hello>
</div>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
实例范围外使用
<h3> 实例范围外使用 </h3>
<template id="hello">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
总结：1.Vue中有个Vue.extend()方法是用来扩展vue功能(组件)的
2.组件的使用必须要先进行注册（防止和其他标签重名）
3.两种注册方法 全局注册 和 局部注册
全局注册:直接用Vue全局的方法compontends
Vue.components('组件名'，{
template:'内容'
})
局部注册:在组件中用components的配置项目来表示（只能在注册范围内用）
new Vue({
el:'#app',
components:{内容}
})
