Vue.JS基础的详讲( 组件 )

Vue.JS基础的详讲( 组件 )

四月 27, 2021

$cover

组件

Vue的组件是Vue.JS里最难掌握的，当然也是最有趣，精彩的。

基本分类为

  • 根组件
  • 可复用的功能组件

根组件的创建

通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象

1
let app = new Vue(创建组件所需要的一些配置选项); // [根组件]

[vue组件，配置（声明式）构建方式
React组件，命令式] 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 对于React
        // render函数:确定组件的视图
        class MyComponent extends React.Component{

        }
        ReactDOM.render(
            <MyComponent>,
            document.querySelector('#app')
        );

// 对于Vue
        let app = new Vue({
            el:'#app',//挂载点
            template:`
                <div>这是vue</div>
            `          //最后组件产生的视图覆盖掉挂载点
        })

        如果不写el挂载点，只有模板。使用app对象.$mount('#app'); // 手动挂载

可复用的功能组件

通过 Vue 提供的静态方法 component 窗口可复用的功能组件

1
let component1 = Vue.component(创建组件所需要的一些配置选项)

注意事项:
[React中区分原生元素和自定义组件，原生：div(小写)，自定义组件Div(首字母必须大写)
Vue中，必须小写。
Vue：注册时：驼峰MyComponent。使用：my-component。Vue在遇到的时候也会自动解析成驼峰式的MyComponent去在注册的组件中寻找。]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>

    <div id="app">
        <h1>这是vue</h1>
        <hr />
        <my-component></my-component>
        <my-component></my-component>
        <!--注意转换规则:驼峰变串-->
    </div>

    <script src="js/vue.js"></script>

    <script>

        Vue.component('MyComponent', {//注意转换规则:驼峰变串
            template: `
                <div>MyComponent</div>
            `
        });

        let app = new Vue({
            el: '#app'
        });

    </script>

</body>

组件配置选项：https://cn.vuejs.org/v2/api/

组件内容渲染

渲染一个组件的内容可以通过两种方式来进行

  • template 选项
  • render 选项（函数）
template

type : string

组件的模板结构（HTML），模板内容会被 vue 进行渲染，生成最终的 HTML 内容，并替换占位（挂载）元素

el

type : string | Element

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，

该选择只对 new 创建的实例有效
如果提供 el ，但是没有提供 template ，则 el 的内容讲作为 template

render

type : (createElement: () => VNode) => VNode

发挥 JavaScript 最大的编程能力，直接创建 VNode （虚拟dom对象），优先级高于 el 和 template

https://cn.vuejs.org/v2/guide/render-function.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 /**
 * vue:  template -> vNode -> HTML
 * react:   JSX -> VDOM -> HTML
 */
let app = new Vue({
    el: '#app', // 挂载点不能是html、body元素
    template: `<div>开课吧</div>`,
    render(createElement) {
        // render优先级高于其他视图处理
        // return `<div>开课吧</div>`;

        let vNode = createElement(
            'div',
            '开课吧123'
        );
        // console.log(vNode);

        /**
         * vNode 类似原生中的 元素对象
         */
        // let div = document.createElement('div');
        // let text = document.createTextNode('开课吧');
        // div.appendChild(text);
        // console.dir(div);

        return vNode;

    }
});

使用 $mount 方法延迟 Vue 实例的挂载

当 Vue 实例没有 el 选项的时候，它会处于一种 未挂载 的状态，我们可以通过组件 Vue 实例对象的 $mount 方法来手动挂载，通过该方式，我们也可以达到延迟 Vue 实例的挂载的目的

渲染的3个注意事项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 *  // 挂载点不能是html、body元素
 */
let app = new Vue({
    el: 'body',
    template: `<div>开课吧</div>`
});

/**
 * 每一个组件有且只能有一个顶级元素
 */
let app = new Vue({
    el: '#app',
    template: `<div>开课吧</div><div>开课吧</div>`
});

/**
 * 如果一个组件没有template也没有render，那么el（挂载点）的outerHTML就作为模板
 */
let app = new Vue({
    el: '#app'
});

组件中的数据（状态）

data
组件内部使用的数据，data 是一个对象，data 中的值可以中模板中直接访问

Vue 实例组件（根组件）的 data 是一个对象

可复用功能组件的 data 必须是一个函数，且该函数必须返回一个对象（因为复用性，避免多个组件实例引用同一个对象。换句话说，组件中使用的数据必须是一个对象，但是可复用组件的这个数据对象必须通过函数返回

data 的访问

data 数据可以直接通过组件实例对象访问，也可以通过实例对象下的 $data 属性进行访问

组件实例对象下有很多的以 $ 开头的属性，这些都是实例对象内置的一些属性和方法，vue 为了区分数据与内置属性方法，内置的属性和方法默认都是以 $ 开始的，所以我们中数据中应该避免使用 $ 开头的数据

模板语法

vue 使用了基于 html 的模板语法，使用声明式的方式把实例中的数据（data）与 DOM 进行绑定，data 中的数据在模板中可以直接使用

  1. 1. 组件
    1. 1.1. 根组件的创建
    2. 1.2. 可复用的功能组件
    3. 1.3. 组件内容渲染
      1. 1.3.1. template
      2. 1.3.2. el
      3. 1.3.3. render
  2. 2. 使用 $mount 方法延迟 Vue 实例的挂载
  3. 3. 渲染的3个注意事项
  4. 4. 组件中的数据（状态）
  5. 5. Vue 实例组件（根组件）的 data 是一个对象
    1. 5.1. data 的访问
  6. 6. 模板语法