1.计算属性
image.png
image.png
2.组件
创建组件法一：
组件的创建和注册：
①创建组件构造器
②注册组件
③挂载作用域下实例化组件
全局组件：
image.png
image.png
简写：
image.png
局部组件：
image.png
image.png
简写：
image.png
父子组件
image.png
image.png
创建组件法二：
template标签创建全局属性：
image.png
image.png
template标签创建局部属性：
image.png
image.png
创建组件法三：
script标签创建全局组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-date></my-date>
</div>
<!-- 1.创建template标签 -->
<!-- 注意：template标签最外层只能有一个元素标签 -->
<script type="text/template" id="div1">
<div>
<p>我是由script标签构建的组件</p>
</div>
</script>
<script>
//2.注册全局组件
Vue.component('my-date',{
// 指定template内容
template: '#div1'
});
let vm = new Vue({
el: '#app',
data: {
message1: '你好',
message2: 'vue'
},
})
</script>
</body>
</html>
image.png
script标签创建局部组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-date></my-date>
</div>
<!-- 1.创建template标签 -->
<!-- 注意：template标签最外层只能有一个元素标签 -->
<script type="text/template" id="div1">
<div>
<p>我是由script标签构建的局部组件</p>
</div>
</script>
<script>
let vm = new Vue({
el: '#app',
data: {
message1: '你好',
message2: 'vue'
},
//2.注册局部组件
components: {
'my-date': {
template: '#div1'
}
}
})
</script>
</body>
</html>
image.png
3. 组件间的通信
父组件通过prop给子组件传递数据，子组件通过触发$emit()事件来传数据给父组件。
父组件传给子组件：
image.png
多层组件间的通信：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 5.实例化组件 -->
<my-parent :title1="message1" :title2="message2"></my-parent>
</div>
<!-- 1.创建组件1模板 -->
<template id="my_h1">
<h1>{{msg1}}</h1>
</template>
<!-- 1.创建组件2模板 -->
<template id="my_h2">
<h2>{{msg2}}</h2>
</template>
<!-- 3.创建父组件 -->
<template id="parent_div">
<div>
<child1 :msg1='title1'></child1>
<child2 :msg2='title2'></child2>
</div>
</template>
<script src="js/vue.min.js"></script>
<script>
// 2.实例化子组件
let child1 = Vue.extend({
template: '#my_h1',
props: ['msg1']
})
let child2 = Vue.extend({
template: '#my_h2',
props: ['msg2']
})
// 4.注册父组件
Vue.component('my-parent',{
template: '#parent_div',
// props: ['title1','title2'],
components: { //子组件
'child1': child1,
'child2': child2
}
})
//2.注册全局组件
// Vue.component('my-date',{
// template: '#my_div',
// props: ['msg', 'imgsrc','imgalt']
// });
let vm = new Vue({
el: '#app',
data: {
message1: '你好',
message2: 'vue'
},
})
</script>
</body>
</html>
image.png
4. 自定义事件
子组件通过自定义事件把数据传递给父组件。
每个Vue实例都实现了事件接口（Event interface）即：
使用$on(eventName)监听事件,
使用$emit(eventName)触发事件
另外，父组件可以在使用子组件的地方直接使用v-on来监听子组件的触发事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>我总共点击了{{countersTotal}}次</p>
<my-btn @total= "clickTotal"></my-btn>
<my-btn @total= "clickTotal"></my-btn>
<my-btn @total= "clickTotal"></my-btn>
<my-btn @total= "clickTotal"></my-btn>
</div>
<!-- 1.组件模板 -->
<template id="my-btn">
<button @click="clickbtn">点击了{{counter}}次</button>
</template>
<script src="js/vue.min.js"></script>
<script>
//2.注册全局组件
Vue.component('my-btn',{
template: '#my-btn',
data() {
return {
counter: 0
}
},
methods: {
clickbtn: function() {
this.counter += 1;
this.$emit('total');
}
}
});
let vm = new Vue({
el: '#app',
data: {
countersTotal: 0,
},
methods: {
clickTotal: function() {
this.countersTotal += 1;
}
}
})
</script>
</body>
</html>
注意：
$emit()传入的事件名称只能是小写，不能驼峰式。
也可以传参数：
image.png
5.匿名插槽
<slot></slot>
image.png
image.png
6.实名插槽
image.png
image.png
7.路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>路由</h1>
<!-- 使用router-link来导航 -->
<router-link to='/test1'>to test1</router-link>
<router-link to='/test2'>to test2</router-link>
<router-view></router-view>
</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-router.js"></script>
<script>
// 1.创建路由组件
const test1 = { template:
`<div>111111111
<router-link to='/test1/child1'>二级路由test11</router-link>
<router-link to='/test1/child2'>二级路由test22</router-link>
<br>
<router-view></router-view>
</div>` };
const test2 = { template: '<div>2222222222</div>' };
const test11 = { template: '<div>test11</div>'};
const test22 = { template: '<div>test22</div>'};
// 2.定义路由（路径和组件）
const routes = [
{
path: '/test1',
component: test1,
children: [
{path: 'child1', component: test11},
{path: 'child2', component: test22},
{path: '/', redirect: 'child1'}
],
},
{ path: '/test2', component: test2},
{ path: '/', redirect: '/test1'}
]
// 3.创建router实例
const router = new VueRouter({
routes //== routes: routes
})
// 4.创建和挂载根实例（注入路由）
let vm = new Vue({
data: {
message1: '你好',
message2: 'vue'
},
router
}).$mount('#app');
</script>
</body>
</html>
网友评论