目录
Vue组件的基本概念
Vue组件是一种可复用的Vue实例，用于封装可重用的HTML元素、JavaScript代码和CSS样式。它可以让开发者更好地组织和复用代码，使Web应用程序更加可维护和可扩展
Vue组件通常由三部分组成：模板（template）、数据（data）和方法（methods）。
- 模板：用于定义组件的结构和布局；
- 数据：用于存储组件的状态和属性；
- 方法：用于定义组件的行为和逻辑；
以下是一个简单的Vue组件示例：
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello Vue',
message: 'Welcome to vue!'
}
}
}
</script>
在上面的示例中，我们定义了一个简单的Vue组件，它包含一个标题和一条消息。在模板中，可以使用Vue的双向数据绑定语法（{{ }}）来展示数据。
Vue组件的注册
Vue组件需要先进行注册，才能在Vue.js应用程序中使用。
全局注册
全局注册是将组件注册到应用程序的根Vue实例中，可以在整个应用程序中使用该组件。
以下是一个简单的全局注册示例：
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
Vue.component('my-component', MyComponent)
局部注册
局部注册是将组件注册到应用程序中的特定组件中，只能在该组件及其子组件中使用该组件。
以下是一个简单的局部注册示例：
// 父组件
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
export default {
components: {
'my-component': MyComponent
}
}
// 子组件
<template>
<div>
<my-component></my-component>
</div>
</template>
如何使用Vue组件
要在Vue.js应用程序中使用组件，我们可以使用全局注册或局部注册方式。无论是哪种注册方式，都需要在模板中使用组件标签来渲染组件。
以下是一个简单的组件渲染示例：
Copy code
<template>
<div>
<my-component></my-component>
</div>
</template>
在上面的示例中，我们使用标签来渲染一个组件。如果该组件已经注册到应用程序中，那么它将被渲染为该组件的模板。
需要注意的是，Vue.js应用程序中的组件渲染顺序是按照深度优先遍历算法进行的。也就是说，当渲染一个组件时，如果它包含其他组件，那么它将首先渲染其子组件，然后再渲染自己。
组件之间嵌套
首先，实现一个列表项组件
Vue.component('todo-item', {
props: {
title: String,
del: {
type: Boolean,
default: false,
},
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration: line-through">{{title}}</span>
<button v-show="!del">删除</button>
</li>
`,
data: function() {
return {}
},
methods: {
},
})
然后，在列表组件中嵌套列表项
Vue.component('todo-list', {
template: `
<ul>
<!-- 嵌套组件 -->
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [{
title: '课程1',
del: false
}, {
title: '课程2',
del: true
}],
}
}
})
完整示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 参考 mustache -->
{{message}} {{message+message}}
<div :id="message"></div>
<ul>
<!-- for循环 -->
<li v-for="item in list">
<!-- if判断 -->
<span v-if="!item.del">{{item.title}}</span>
<span v-else style="text-decoration: line-through;">{{item.title}}</span>
<!-- 懒加载 -->
<button v-show="!item.del">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<Script>
var vm=new Vue({
el:"#app",
data:{
message:"Hello World",
list:[
{
title:"课程",
del:false
},
{
title:"课程",
del:true
},
],
}
})
</Script>
</body>
</html>
实现效果：
