Vue基础学习（五）
【摘要】 推荐Vscode编译器、vue官网：https://cn.vuejs.org/v2/guide/installation.html 1.组件化 2.注册组件<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, i...
- 推荐Vscode编译器、vue官网：https://cn.vuejs.org/v2/guide/installation.html
1.组件化
2.注册组件
<!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'>
<!-- //3.使用组件 -->
<my-cpn></my-cpn>
</div>
<script src='../js/vue.js'></script>
<script>
//1.创建组件构造器对象(es6 ` 可以换行不用+)
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈</p>
<p>我是内容，呵呵呵</p>
</div>`
})
//2.注册组件
Vue.component('my-cpn',cpnC)
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>
3.注册组件步骤解析
注：必须在new Vue挂载的实例之下，才被渲染出来
4.全局组件和局部组件
<!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'>
<cpn></cpn>
<cpn></cpn>
</div>
<div id='app2'>
<cpn></cpn>
</div>
<script src='../js/vue.js'></script>
<script>
//1.创建组件构造器对象(es6 ` 可以换行不用+)
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈</p>
<p>我是内容，呵呵呵</p>
</div>`
})
//2.注册组件(全局组件),意味着可以在多个Vue的实例下面使用
//Vue.component('my-cpn',cpnC)
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
},components: {
//局部组件：
// cpn 使用组件时候的标签名
cpn:cpnC
}
});
const app2 = new Vue({
el:'#app2', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>
5.父组件和子组件
<!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'>
<cpn2></cpn2>
</div>
<div id='app2'>
<cpn></cpn>
</div>
<script src='../js/vue.js'></script>
<script>
//1.创建第一个组件
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容，哈哈哈</p>
</div>`
});
//2.创建第二个组件(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容，呵呵呵</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpnC1
}
});
//root组件
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
},components: {
//2.注册：局部组件：
// cpn 使用组件时候的标签名
cpn2:cpnC2
}
});
</script>
</body>
</html>
6.注册组件的语法糖
7.模板的分类写法
- 全局组件分离
<!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'>
<cpn></cpn>
</div>
<!-- 1.第一种 -->
<!-- <script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
</script> -->
<!-- 2.第二种 -->
<template id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
//1.注册一个全局组件
Vue.component('cpn',{
template:`#cpn`
})
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
}
})
</script>
</body>
</html>
- 局部组件分离
<!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'>
<cpn></cpn>
</div>
<!-- 1.第一种 -->
<!-- <script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
</script> -->
<!-- 2.第二种 -->
<template id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
},
components: {
'cpn':{
template:'#cpn'
}
}
})
</script>
</body>
</html>
8.组件数据
注：组件内不能访问data数据，所以Vue组件因该有自己保存数据的地方
- 为什么必须是一个函数？
9.父子间通信
10.父级向子级传递
<!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'>
<cpn :cmovies='movies' :cmessage='message'></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<p> {{cmessage}}</p>
<h2>{{cmovies}}</h2>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
// 父传子:props
//局部组件
const cpn = {
template:'#cpn',
//props: ['cmovies','cmessage']
props:{
//1.类型限制
//cmovies:Array,
//cmessage:String
//2.提供一些默认值
cmessage:{
type:String,
default:"aaaaa",
required:true ///必传
},
//类型是对象或数组的时候，默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
}
}
}
}
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy',
movies: ['海','王者','夏洛特']
},
components: {
'cpn':cpn
}
})
</script>
</body>
</html>
- 数据验证的写法（props对象）
11.props驼峰标识
注：vue不支持直接的驼峰标识，需要进一步的转换，如：childMyMessage，需要在绑定的时候使用:child-my-message
<!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'>
<cpn :cinfo='info' :child-my-message ="message"></cpn>
</div>
<template id="cpn">
<!-- 如果有多个标签，需要外部有个div包起来 -->
<div>
<h2>{{cinfo}}</h2>
<h2>{{childMyMessage}}</h2>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
const cpn = {
template: '#cpn',
props:{
cinfo:{
type : Object,
default(){
return {}
}
},
childMyMessage:{
type : String,
default : ''
}
}
}
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy',
info:{
name: 'why',
age: 18,
height: 1.88
}
},
components: {
'cpn':cpn
}
})
</script>
</body>
</html>
12.子级向父级传递
注：发射事件，自定义事件，子传父；然后父组件监听事件，注意名字不要用驼峰标识。
<!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'>
<cpn v-on:itemclick="cpnClick"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<!-- 如果有多个标签，需要外部有个div包起来 -->
<div>
<button v-for='item in categories' @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
///1.子组件
const cpn = {
template: '#cpn',
data(){
return {
categories:[
{id: 'aaa',name: '热门推荐'},
{id: 'bbb',name: '手机数码'},
{id: 'ccc',name: '家用家电'},
{id: 'ddd',name: '电脑办公'},
]
}
},methods:{
btnClick(item){
//console.log(item);
// 发射事件，自定义事件，子传父
this.$emit('itemclick',item)
}
}
}
//2.父组件
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{ //定义数据
message: '你好啊，李银河！',
name: 'codewhy'
},
components: {
cpn
},methods:{
cpnClick(item){
console.log('cpnClick',item);
}
}
})
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）