组件

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 中的数据在模板中可以直接使用