vue组件基础笔记一

vue组件基础笔记一

1、Vue里面组件的扩展功能是通过 Vue.extend() 来做扩展的。
2、组件的扩展中的options和 new Vue( options )使用一致 Vue.extend()不进行实例化 也就是不用 new Vue.extend()
3、全局注册:

const Hello = Vue.extend({
        // template选项是为了确定一个模板,模板中写的就是jsx
        template: '
Hello Component
'
}) Vue.component('Hello',Hello)// Vue.component(组件的名称,组件配置)

全局简写:

// Vue.component('Hello',options)
    Vue.component('Hello',{
        template: '
Hello Component
'
})

4、局部注册:

 const Hello = Vue.extend({
        // template选项是为了确定一个模板,模板中写的就是jsx
        template: '
Hello Component
'
}) new Vue({ el: '#app', components: { // 组件名称:组件的选项 'Hello': Hello } })

局部注册简写:

new Vue({
        el: '#app',
        components: {
            'Hello': {
                template: '
局部注册
'
} } })

5、组件的命名

  1. 一个单词,只要首字母大写就可以了
  2. 如果是两个以上单词,每个单词首字母大写,但是记得使用的时候,写成小写带横杠 HeadTitle head-title
  3. 组件名称可以直接定义为小写带横杠
  4. 案例
<div id="app">
    <Hello>Hello>
    <head-title>head-title>
    <banner-list>banner-list>
div>
    Vue.component('Hello',{
        template: '
Hello
'
}) Vue.component('HeadTitle',{ template: '
头部标题
'
}) Vue.component('banner-list',{ template: '
banner
'
}) new Vue({ el: '#app' })

6、组件的规则

<body>
    <div id="app">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!-- <Hello></Hello> -->
            <tr is = "Hello"></tr>
        </table>
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
    /* 
        我们的html中有些标签是特殊的,它规定了它的父子级,这类型标签有
            ul li 
            ol li 
            dl dt  dd 
            select option 
            table tr td 
        这类型的直接父子级关系的标签,是不能直接用组件代替的,如果代替了,那么父级会将组件排斥在外面

        解决: is属性

            is属性的作用就是将一个绑定的容器解析为一个组件的模板
    
     */


    Vue.component('Hello',{
        template: `
            
                4
                5
                6
            
        `
    })

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

7、动态组件

<keep-alive>    //keep-alive,就相当于用完app之后,不关闭,切换到后台,用的时候,直接从后台调用
  <component v-bind:is="currentTabComponent"></component> //通过使用保留的  元素,并对其 is 特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:
</keep-alive>

8、template标签

<div id="app">
        <template>   //如果在实力范围内书写template标签,那么将来template标签是不会在渲染中出现的
            {{ info }}
        </template>
        <Hello></Hello>
    </div>
    <template id="hello">  //template标签在实例范围外是直接显示的
        <div>
            <p> Hello  模板 </p>
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    /* 
         组件的模板可以放在实例范围外书写,但是不好的一点就是这个template标签将来还会存在

        后期我们可以解决这个问题
    */

    Vue.component('Hello',{
        template: '#hello'
    })

    new Vue({
        el: '#app',
        data: {
            info: '你猜我国庆布不布置作业?'
        }
    })

9、data选项

<div id="app">
        <Hello></Hello>
    </div>
    <template id="hello">
        <div>
            <!-- 唯一根元素 -->
            <p> {{ money }} </p>
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    /* 
        1. 组件是一个独立的个体,那么它应该拥有属于它自己的数据
        2. 组件的数据是要有独立作用域的,不容易被外界干扰
        3. 除了根实例以外,组件的data选项都是一个函数
        4. 为什么data选项要返回一个对象?
            - 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置
        5. 组件的数据在组件的模板中相当于全局变量
     */
    Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                money: 2000
            }
        }
    })
    new Vue({
        el: '#app'
    })

10、组件的嵌套

	<div id="app">
        <Father></Father>
    </div>
	<template id="father">
        <div>
            father
            <Son></Son>/* 组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可*/
        </div>
    </template>
 
    <template id="son">
        <div>
            son
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    
    Vue.component('Father',{
        template: '#father'
    })
    Vue.component('Son',{
        template: '#son'
    })
    new Vue({
        el: '#app'
    })

你可能感兴趣的:(vue)