vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统。
每一个新技术的诞生,都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种,全局组件和局部组件。
通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue
创建的 Vue 根实例中,把这个组件作为自定义元素来使用。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="app">
第二步,使用-->
global_component>global_component>
div>
script>
// 第一步,注册
Vue.component("global_component", {
template: `
div>
h2>Hello Vue/h2>
/div>
`
});
new Vue({
el: "#app",
});
script>
body>
html>
因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="app">
第二步,使用-->
global_component>global_component>
div>
script>
// 第一步,注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `button v-on:click="count++">You clicked me {{ count }} times./button>`
});
new Vue({
el: "#app",
});
script>
body>
html>
每个实例维护自己的一份独立的数据。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="app">
第二步,使用-->
global_component>global_component>
global_component>global_component>
global_component>global_component>
div>
script>
// 第一步,注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `button v-on:click="count++">You clicked me {{ count }} times./button>`
});
new Vue({
el: "#app",
});
script>
body>
html>
注意当点击按钮时,每个组件都会各自独立维护它的 count
。因为你每用一次组件,就会有一个它的新实例被创建。
data必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="app">
第二步,使用-->
global_component>global_component>
global_component>global_component>
global_component>global_component>
div>
script>
// 第一步,注册
Vue.component("global_component", {
data(){
return {
count: 0
}
},
template: `button v-on:click="count++">You clicked me {{ count }} times./button>`
});
new Vue({
el: "#app",
});
script>
body>
html>
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局组件始终是存在的,除非程序结束,如果组件越来越大,那么程序所占用的空间和消耗的性能就会更大。
所以我们需要局部组件。不用的时候,被垃圾回收。
局部组件的第一种使用方式
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="component-demo">
最后在根元素当中使用它-->
第一个中使用方式,会把当前div渲染进DOM-->
my-header>my-header>
div>
script>
// 定义一个局部组件,其实就是一个变量,它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
button @click="count++">{{ count }}/button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二部,需要在根实例当中使用它
components: {
'my-header': Header
}
});
script>
body>
html>
局部组件的第二种使用方式
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
head>
body>
div id="component-demo">
div>
script>
// 定义一个局部组件,其实就是一个变量,它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
button @click="count++">{{ count }}/button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式,不会将div渲染进DOM,以template为根元素
template: `my-header>/my-header>`,
// 第二步,需要在根实例当中使用它
components: {
'my-header': Header
}
});
script>
body>
html>
对于 components
对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="../statics/vue.min.js">script>
style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
}
style>
head>
body>
div id="component-demo">
div>
script>
// 定义一个局部组件,其实就是一个变量,它是一个object类型
// 这个对象的属性与全局组件是一样的(除el属性外)
let Fcontent = {
template: `
div>
span>这是头条/span>
/div>
`
};
let Header = {
template: `
div v-bind:class='{box: isBox}'>
button @click="count++">{{ count }}/button>
first-content>/first-content>
/div>
`,
data() {
return {
count: 0,
isBox: true
}
},
components: {
'first-content': Fcontent
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式,不会将div渲染进DOM,以template为根元素
template: `my-header>/my-header>`,
参与评论
手机查看
返回顶部