vue-总结3-混入-高级-组件（扩展）

混入（了解一下）

• 局部混入

 new Vue({
        el: '#app',
        mixins: [ obj ]//把这边的obj分离到另外一个js文件定义，然通过script引入符合模块化的思想
    })

• 全局混入

//直接挂在vue上，通过Vue.mixin定义是全局混入
Vue.mixin({
	methods:{
	aa(){
		alert(1)
		}
	}
})

//aa这个方法会直接出现在Vue的实例中

组件（加工资的）

模块化

在模块化引入之前，前端既要解决与用户交互，又要解决与后端的数据交互，我们发现视图层的职责太重，它既要显示
数据还要管理逻辑，还得处理数据，这样导致效率低下。为了方便维护，视图执行效率高，所以我们选择将视图
的任务分离出去所以就慢慢的出现了模块化。

组件化

概念：
当今项目是由团队开发的，我们会将功能拆分，交由不同的成员来完成，每一个成员必须保证自己完成的功能是
独立的，这样它的功能就可以用于多个项目，最后把每一个成员的项目组合起来，这就是组件化。

组件：是html，css，js，img的聚合体，直接就可以在项目中应用

vue中的组件就是Vue的扩展功能

//Vue里组件的扩展功能是通过Vue.extend（）来做扩展的，并且不进行实例化
//全局注册vs局部注册
console.log(Vue)			//Vue( options )
console.log(Vue.extend())	//VueComponent (options) 

组件的使用 需要注册

全局注册

全局注册的作用是，全局注册后的标签 所有实例都能使用

<div id="app">
        <Hello></Hello>
</div>

 /* 
     Vue.extend() 不会进行实例化
     Vue中组件的使用方式 是  类似于   标签

    为了符合H5的规范，那么我们需要将这些类似于标签一样的内容进行注册 
     
     注册的作用是为了使用Vue来进行解析，让html5承认你写的东西
     
 */

全局注册  Vue.component(组件的名称，组件的配置)
名称用大写表示，来区分原生html的标签

//先配置组件
const Hello = Vue.extend({
	template:'<div>这是我注册的标签</div>'
})

//注册组件
Vue.component('Hello',Hello)

new Vue({
el:'#app'
})

局部注册

在实例里加components属性 components：｛组件名：组件配置｝
局部注册的标签只能在注册的实例里使用

<div id="app">
	<Hello></Hello>
</div>

//组件配置
const Hello = Vue.extend({
	template:'<div>这是我注册的标签</div>'
})

new Vue({
	el:'#app',
	components:{
		'Hello':Hello
	}
})

组件配置的简写

组件的配置可以不选择  
const Hello = vue.extend({
	template:'<div>这是我注册的标签</div>',
	
})

可以直接写在注册里
全局
Vue.component('Hello',{
	template:'<div>这是我注册的标签</div>'
})

局部
在你的实例里
components:{
	'Hello':{
		template:'<div>这是我注册的标签</div>'
	}
}

组件的命名

驼峰命名

1. 一个单词，只要首字母大写就可以了
2. 如果是两个以上单词，每个单词首字母大写，但是记得使用的时候，写成小写带横杠
   - HeadTitle    head-title
3. 组件名称可以直接定义为小写带横杠


Vue.component('Hearder',{
	template:'<div>头部</div>'
})

Vue.component('HeadTitle',{//这个写在html里应该是 <head-title></head-title>
	template:'<div></div>'
})

组件的规则

 is属性的作用就是将一个绑定的容器解析为一个组件的模板
 <div id="app">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!-- <Hello></Hello> -->
            <tr is = "Hello"></tr>
        </table>
 </div>

 /* 
        我们的html中有些标签是特殊的，它规定了它的父子级，这类型标签有
            ul li 
            ol li 
            dl dt  dd 
            select option 
            table tr td 
        这类型的直接父子级关系的标签，是不能直接用组件代替的，如果代替了，那么父级会将组件排斥在外面

        解决： is属性

            is属性的作用就是将一个绑定的容器解析为一个组件的模板
    
     */
     Vue.component('Hello',{
        template: `
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        `
    })

    new Vue({
        el: '#app'
    })

动态组件

可以改变的组件 通过 vue提供的 component标签来使用 实现切换

使用了keep-alive的好处
  直接从后台调用
 <div id="app">
        <button @click='change_page'>{{ change_btn }}</button>
        <keep-alive>
            <component :is='comp'></component>//这里的is是 规定
        </keep-alive>//动态缓存

 </div>

   Vue.component('UserLogin', {
        template: `
            <div>
              用户名：<input type="text"/>  
              密码：<input type="password"/>  
            </div>   
        `
    })
    Vue.component('PhoneLogin', {
        template: `
            <div>
              手机号：<input type="text"/>  
              验证码：<input type="text"/>  
            </div>   
        `
    })
    //</keep-alive> </keep-alive>    动态缓存
    const vm = new Vue({
        el: '#app',
        data: {
            comp: 'UserLogin'
        },
        methods: {
            change_page() {
                this.comp = this.comp === 'UserLogin' && 'PhoneLogin' || 'UserLogin'
            }
        },
        computed: {
            change_btn() {
                return this.comp === 'UserLogin' && '手机号登录' || '用户名登录'
            }
        }

    })

template

• 如果在实例范围内书写template标签，那么将来它是不会在渲染中出现的
• template标签在实例范围外是直接显示的
• 组件的模板可以放在实例范围外书写，但是不好的一点就是这个template标签将来还会存在（这个问题可以解决，以后会说）
• 组件的template模板中要求根源是唯一（template 标签只能有一个子元素）

 <div id="app">
        <Hello></Hello>
 </div>
 <template id="hello">
     <div>
         <p> Hello  模板 </p>
         <div> 你好 </div>
     </div>
</template>

Vue.component('Hello'{
	template:'#hello'
})
也能完成组件的注册