1.全局组件定义的是三种方法
<!-- 2、视图层 -->
<div id="app">
<!-- 不要将内置或保留的HTML元素用作组件id:div -->
<!-- 组件名 -->
<login></login>
<register></register>
<account></account>
<mine></mine>
</div>
<div id="app1">
333233
<mine></mine>
</div>
<!-- // 3.将模板字符串,定义到script标签种: -->
<script id="account" type="x-template">
<div>账户</div>
</script>
<!-- 组件模板仅包含一个根元素 -->
<template id="mine">
<div>第四种方式
<div>12223</div>
<div>12245352</div>
</div>
</template>
<script>
// 3、实例化
// 1.使用 Vue.extend 配合 Vue.component 方法:
// 全局声明
var login = Vue.extend({
template:
' <h1>明天放假!!</h1> '
});
// 全局定义
// (自己定义的名字,声明)
Vue.component('login', login)
// 2.直接使用Vue.component方法
Vue.component('register', {
template: "<h1>注册</h1>"
})
// 前两类就是以组件名为标签
// 3.同时,需要使用 Vue.component 来定义组件:
Vue.component('account', {
template: '#account'
})
// 4.
Vue.component('mine', {
template: '#mine'
})
const vm = new Vue({
el: '#app',
data: {},
methods: {}
})
const nvm = new Vue({
el: '#app1',
data: {},
methods: {}
})
</script>
2.私有组件
<div id="app">
<!-- 不要将内置或保留的HTML元素用作组件id:div -->
<!-- 组件名 -->
<!-- <login></login>
<register></register>
<account></account>
<mine></mine> -->
<my-header></my-header>
</div>
<div id="app1">
333233
<!-- <my-header></my-header> -->
</div>
<!-- // 将模板字符串,定义到script标签种: -->
<script id="account" type="x-template">
<div>账户</div>
</script>
<!-- 组件模板仅包含一个根元素 -->
<template id="mine">
<div>第四种方式mine
<div>mine12223</div>
<div>mine12245352</div>
</div>
</template>
<script>
// 3、实例化
Vue.component('mine', {
template: '#mine'
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
'my-header': {
template: '#mine'
}
}
})
const nvm = new Vue({
el: '#app1',
data: {},
methods: {}
})
</script>script
3.组件中显示数据和响应
<!-- 2、视图层 -->
<div id="app">
<!-- 定义在实例 -->
<button @click="flag1">flag1</button>
<!-- model只能应用于组件 -->
<!-- <transition mode="out-in">
<login v-if="flag"></login>
<mine v-else></mine>
</transition> -->
<!-- 使用component标签,来引用组件,并通过:is属性来指定要加载的组件: -->
<component :is="flag?'login':'mine'"></component>
<!-- flag是变量 -->
</div>
<template id="login">
<div>
<!-- 变量定义在组件 -->
<button @click="add(4)">add</button>
登录{{msg}}{{num}}
</div>
</template>
<template id="mine">
<div>
个人中心
</div>
</template>
<script>
Vue.component('mine', {
template: '#mine'
}
)
Vue.component('login', {
template: '#login',
// 为什么组件中的data属性必须定义为一个方法并返回一个对象
// 数据隔离 保证每个login都是自己用
data({ }) {
return {
msg: 'hello',
num: 6
}
},
// 方法
methods: {
add(n) {
this.num += n
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
// 3、实例化
const vm = new Vue({
// 控制区域
el: '#app',
// 存放数据
data: {
flag: true
},
// 方法
methods: {
flag1() {
this.flag = !this.flag
}
},
})
</script>
4.云课堂首页数据
<!-- 2、视图层 -->
<!-- app是父组件,course是子组件 -->
<div id="app">
<h2>免费课程</h2>
<course :type="type" page-size="10" page-num="1"></course>
<h2>精品课程</h2>
<course type="boutique" page-size="5" page-num="1"></course>
<h2>折扣课程</h2>
<course type="discount" page-size="5" page-num="1"></course>
</div>
<template id="course">
<div>
<ul>
<li v-for="(item,index) in courseList" :key="item.couseId">
<img :src="item.coverFileUrl" alt="" srcset="">
<div>{{item.courseTitle}}</div>
<div>共有{{item.learningNum}}人</div>
<div>免费</div>
</li>
</ul>
</div>
</template>
<script>
Vue.component('course', {
template: '#course',
data() {
return {
courseList: []
}
},
props: {
// 自定义参数
type: String,
// 定义多种类型
pageNum: { Number, String },
pageSize: {
type: [String, Number],
// default: 20
default() {
return 20
}
}
},
methods: {
getCourseList(type, pageSize, pageNum) {
let url = new URLSearchParams
url.append('type', type)
url.append('pageSize', pageSize)
url.append('pageNum', pageNum)
return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
}
},
created() {
console.log(this.type);
console.log(this.pageSize);
console.log(this.pageNum);
this.getCourseList(this.type, this.pageSize, this.pageNum).then(res => {
console.log(res);
this.courseList = res.data.rows
})
}
})
// 3、实例化
const vm = new Vue({
// 控制区域
el: '#app',
// 存放数据
data: {
type: 'free'
},
// 方法
methods: {}
})
</script>
5.首页数据 —slot
<!-- 2、视图层 -->
<div id="app">
<course :type="type" size="10" page-num="1">
<h2>免费课程</h2>
<template v-slot:header>
头部
</template>
<template v-slot:footer>
底部
</template>
</course>
<course type="boutique" size="5" page-num="1">
<h2>精品课程</h2>
</course>
<course :type="discount" size="5" page-num="1">
<h2>折扣课程</h2>
</course>
</div>
<template id="course">
<div>
<!-- 默认插槽 -->
<!-- 占位置 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="header"></slot>
<ul>
<li v-for="(item,index) in courseList" :key="item.courseId">
<img :src="item.coverFileUrl" alt="">
<div>{{item.courseTitle}}</div>
<div>共有{{item.learningNum}}人</div>
<div>免费</div>
</li>
</ul>
<slot name="footer"></slot>
</div>
</template>
<script>
Vue.component('course', {
template: '#course',
data() {
return {
courseList: []
}
},
props: {
// 自定义参数
type: String,
// 定义多种类型
pageNum: { Number, String },
pageSize: {
type: [String, Number],
// default: 20
default() {
return 20
}
}
},
methods: {
getCourseList(type, pageSize, pageNum) {
let url = new URLSearchParams
url.append('type', type)
url.append('pageSize', pageSize)
url.append('pageNum', pageNum)
return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
}
},
created() {
console.log(this.type);
console.log(this.pageSize);
console.log(this.pageNum);
this.getCourseList(this.type, this.pageSize, this.pageNum).then(res => {
console.log(res);
this.courseList = res.data.rows
})
}
})
// 3、实例化
const vm = new Vue({
// 控制区域
el: '#app',
// 存放数据
data: {
type: 'free'
},
// 方法
methods: {}
})
</script>
6.事件对象
点击add出现相加
<!-- 2、视图层 -->
<div id="app">
<button @click="add($event,4)">add</button>
{{num}}
</div>
<script>
// 3、实例化
const vm = new Vue({
// 控制区域
el: '#app',
// 存放数据
data: {
num: 22
},
// 方法
methods: {
add(event, n) {
console.log(event);
console.log(n);
this.num += n
}
}
})