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:{内容}

​ })