Vue组件化开发
- 组件化开发思维
- 组件祖册
- Vue调试工具用法
- 组件间数据交互
- 组件插槽
- 基于组件的案例
组件化的开发思维
编程中的组件化开发思维
一个组件就是一个性能，多个组件组成一个残缺的APP，抽取一个组件并不会影响其它组件的运行。
组件化标准: Web Components
官网：https://developer.mozilla.org…
组件的注册
组件的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的应用</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('button-count', {
data() {
return {
count: '0',
}
},
template: `<button @click='count++'>点击{{count}}次</button>`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
Vue组件注册之注意事项
注意事项
- dta必须是一个函数
- 组件模板内容必须是单个根元素
- 组件模板内容能够是模板字符串（ES6语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的注意事项</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('button-count', {
//data必须是一个函数
data() {
return {
count: '0',
}
},
//组件模板的内容必须是单个根元素 且能够应用模板字符串语法
template: `
<div>
<button @click='count++'>点击{{count}}次</button>
<button>按钮</button>
</div>
`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
组件的命名形式
注意事项
- 驼峰形式的命名能在组件注册的字符串模板中应用，但不能在标签中的模板字符串应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的命名</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<myComponent></myComponent>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('myComponent', {
data() {
return {
msg: 'hello Word'
}
},
template: `<div>{{msg}}</div>`
})
Vue.component('button-count', {
//data必须是一个函数
data() {
return {
count: '0',
}
},
// 采纳驼峰式命名的形式能够在组件定义中的模板字符串应用
template: `
<div>
<button @click='count++'>点击{{count}}次</button>
<button>按钮</button>
<myComponent></myComponent>
</div>
`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
Vue之部分自定义组件
应用components属性能够部分自定义组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<hello-word></hello-word>
<hello-vue></hello-Vue>
</div>
</body>
<script src='../vue.js'></script>
<script>
let helloWord = {
data() {
return {
msg: 'hello Word'
}
},
template: `<div>{{msg}}</div>`
};
let helloVue = {
data() {
return {
msg: 'hello Vue'
}
},
template: `<div>{{msg}}</div>`
};
let vm = new Vue({
el: "#app",
data() {
return {
}
},
// 部分自定义组件
components: {
'hello-word': helloWord,
'hello-vue': helloVue
}
})
</script>
</html>
Vue之调试工具的应用
组件间数据交互
子组件向父组件传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{value}}</div>
<menu-item v-bind:title='title' v-bind:value='value'></menu-item>
</div>
</body>
<script src="../vue.js"></script>
<script>
// 子组件向父组件传值的根本应用
Vue.component('menu-item', {
props: ['title', 'value'],
data() {
return {
msg: "子组件自身的内容"
}
},
template: `<div>{{msg +'---'+title+'---'+value}}</div>`
})
let vm = new Vue({
el: "#app",
data() {
return {
value: "父组件的内容",
title: '动静绑定属性'
}
},
})
</script>
</html>
发表回复