Vue组件
明明vue已经那么完美了，为什么还要学习Vue呢？
- 这是为了实现高度封装和高度可复用。
一、注册
使用Vue组件需要先进行注册
注册分为三种方式即：全局注册、局部注册和嵌套注册
1、全局：
- 定义全局组件要定义在Vue实例前
定义全局组件的语法格式：
<script>
Vue.component('组件名称', {
template: `封装的html代码`,
});
</script>
- 要调用Vue实例的html的内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ocean></ocean>
</div>
<script>
Vue.component('ocean',{
template:'<h5>lalalalal</h5>'
})
var vue_app = new Vue({
// 绑定
el:'#app'
});
</script>
</body>
</html>
- 想要使用我们自定义的组件只需要在绑定的标签中以标签我的格式输出组件的名称即可
2、局部
局部定义组件和全局定义一样要定义在Vue实例前，它的语法是：
<script>
var 组件名称 = {
template: `封装的html代码`
}
</script>
注意，在局部注册中我们需要在实例中声明components{组件的名称，}
即：
<script>
var vue_app = new Vue({
el: '#app',
components: {
组件名称,
}
})
</script>
在HTML中的调用语法：需要写在Vue的实例的HTML内部
- 在使用局部注册，在实例中声明组件名称时如果在组件名称的下面出现红色的波浪线，这个时候不要慌，请查看自己的配置中是否启用ES6语法，在pycharm中默认是启用javascrtpt的ES5语法。
- 具体路径为：File---->setting----->Languages&Frameworks----->JavaScript
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部注册</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
// 定义一个id为app的div标签
<div id="app">
<ocean></ocean>
</div>
<script>
// var +组件名称={ }
var ocean = {
# 封装的html代码
template:'<h6>请问你是谁</h6>'
};
// 创建的实例对象
var app_ocean = new Vue({
el:"#app",
// 声明组件，在这里写如下代码，即可在div标签中调用名为ocean的标签，输出的内容为注册时封装的html代码
components: {
ocean,
}
});
</script>
</body>
</html>
3、嵌套
- 组件可以进行嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<sea_2></sea_2>
</div>
<script>
// 定义局部
var ocean = {
template:'<h5>局部定义</h5>',
};
Vue.component('sea_2',{
template:'<ocean></ocean>',
// 注意这里的components和定义全局时末尾时多了一个s
components:{
ocean,
//<ocean></ocean>
}
});
var vue_app=new Vue({
el:'#app',
});
</script>
</body>
</html>
二、特殊属性
在vue组件中有几个特殊的属性，像data、props、单根元素以及经常会遇到的事件
1、data
- 在组件中，data是一个函数，而不是我们在js中使用的字典了，并且函数必须返回一个字典
data代码示例：
data:function () {
return {
'数据键':'数据值',
...
}
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ocean></ocean>
</div>
<script>
// 注册全局组件
Vue.component('ocean',{
// template：封装的html代码
template:'<h1>你好啊啊啊啊啊{{title}}</h1>',
// 特殊的data属性
data:function () {
return {
// title:键名 后面是值
title:'组件中data属性'
}
}
});
var vue_app = new Vue({
el:'#app',
});
</script>
</body>
</html>
2、props
在组件中通过props属性可以为组件标签提供属性
props后面是一个列表，里面放着的是一个个的属性名称
props：['属性名称'，......]
props代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ocean abc="vue"></ocean>
</div>
<script>
Vue.component('ocean',{
template:'<h1>嘿{{abc}}</h1>',
// props里面盛放的是一个个的属性名称
props:['abc',]
})
var vue_app = new Vue({
el:'#app',
});
</script>
</body>
</html>
3、单个根元素
组件的template中只能包括一个根元素标签，如果需要写多个标签时，可以使用更高一级的标签将之包裹嵌套起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1_1></h1_1>
</div>
<script>
Vue.component('h1_1', {
// template:'<div><h1>123</h1>' +
// '<h2>456</h2></div>'
template: `
<div>
<h1>123</h1>
<h2>456</h2>
</div>
`
});
var vue_app = new Vue({
el: '#app',
});
</script>
</body>
</html>
在vue中可以使用``来讲多行代码包裹起来，否则就会出现字符串相加的现象如：
Vue.component('h1_1', {
template:"<div><h1>123" +
"</h1><h2>456" +
"</h2></div>"
});
4、事件
调用组件时自定义事件：
<vue_h1 @自定义事件='处理函数'></vue_h1>
在组件中定义系统事件，调用自定义的事件：
this.$emit('自定义事件'，参数)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ocean @say="shijian"></ocean>
</div>
<script>
<!--局部注册组件-->
var ocean = {
// 封装的HTML代码
template:`<div>
<input type="button" value="组件按钮" @click="hey">
</div>`,
// 自定义事件
methods:{
hey:function () {
// $emit('自定义的参数')
this.$emit('say')
// 这里的this指的是这个vue组件的对象，即ocean，可以在浏览器中打断点，通过console控制台打印输出
}
},
};
<!--先创建对象-->
var vue_app = new Vue({
// 绑定标签
el:"#app",
//注册组件
components:{
ocean
},
// 定义弹出事件
methods:{
shijian:function () {
alert('事件弹出成功啊啊啊啊啊啊')
}
}
});
</script>
</body>
</html>
网友评论