目录
全局组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<!-- 第一种写法 -->
<div id="box"><quanju></quanju></div>
<!-- 第二种写法,写在网页端 -->
<div id="div1"><seccc></seccc></div>
<!-- 第二种写法,自定义内容(第二种推荐写法) -->
<template id="tt3"><h1 @click="fn1()">自定义标签的第二种写法</h1><span></span></template>
<script type="text/javascript">
//全局组件化，格式： component(自定义标签名,标签和内容，但需要注意，根只有一个)
//错误示范： template:"<div></div><div></div>" 必须只有一个大的范围包围，不能并行
//第一种写法,可读性极差
Vue.component("quanju",{template:"<h1>hello world </h1>"});
var vm=new Vue({
el:"#box"
});
//第二种写法，推荐
Vue.component("seccc",
{
template:"#tt3",
//也可以设置属性,但只能在组块内使用
data:function(){
return {mes:"吴师傅",age:18}
},
methods:{
fn1(){
console.log("也可以有方法的哦");
}
}
})
var tm=new Vue({
el:"#div1"
});
</script>
</body>
</html>`带参数传递的全局组件化(props方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.js"></script>
</head>
<body>
<div id="box">
<!-- 由于下面定义的标签名有大写，所以只能写成这样 -->
<my-con message="吴师傅" age="18"></my-con>
<my-con message="李师傅" age="18"></my-con>
<my-con message="陈师傅" age="18"></my-con>
</div>
<!-- 自定义组件内容,直接在template内写{{}}是没用的，必须要用div或者其他网页元素包裹！ -->
<template id="tt"><div> {{message}} {{age}} {{canshu}}</div></template>
<script type="text/javascript">
//全局组件化带参数
Vue.component("myCon",{
//props方式传参
props:["message","age"],
//用标准格式写组建(在html里面定义,对应网页标签的template的id)
template:"#tt",
data:function(){
return {canshu:"这是data里面的参数,不是传参的哦！"}
}
});
var vm=new Vue({
el:"#box"
});
</script>
</body>
</html>
局部组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<div id="box"><text1></text1><text2></text2></div>
<template id="myText"><h1 @click="fn2()">{{msg}}{{age}}</h1></template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{},
//局部组件化写法
components:{
//第一种写法:在template里面直接输入内容
"text1":{
//注意：在组建里面的data和methods只能在组建内容里面使用,不能在外面引用
template:`<div><h1 @click="fn1()">直接写在template里面</h1>{{msg}}{{19}}</div>`,
//自定义组件里面也有自己的方法和属性
data:function(){
return{msg:"吴师傅",age:19}
},
methods:{
fn1:function(){
console.log("局部组建里面的方法");
}
}
},//text1
//第二种写法(推荐用这种，客观性强)
"text2":{
template:"#myText",
//组件里面的data写法比较怪异
data:function(){
return {msg:"吴师傅哈哈",age:30}
},
methods:{
fn2:function(){
console.log("第二种写法的方法");
}
}
}
}//components
});
</script>
</body>
</html>带参数传递的局部组件化(props方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<div id="box">
<!-- 这样引用方法是无效的,组件内的触发方法只能在组件模板内使用,在网页上此标签会被翻译模板内的内容 -->
<biao-qian name="吴师傅" age="18" @click="fn2()"></biao-qian>
</div>
<!-- 自定义组件以及组件内的内容，切记一定要用网页元素包裹起来！！！！方法和参数只能用局部的,不能使用Vue的 -->
<template id="tt"><div @click="fn1()">{{"参数的名字是:"+name}}{{"传参的年龄是:"+age}}</div></template>
<script type="text/javascript">
//局部组件化
var vm=new Vue({
el:"#box",
data:{},
methods:{
fn2(){
console.log("Vue内的方法");
}
},
components:{
//定义一个名biaoQian的网页标签
"biaoQian":{
//传参的参数名,参数名必须用双引号包裹,并且参数名不建议用关键字如name class等
props:["name","age"],
template:"#tt",
//局部组件内的自定义参数
data:{},
//局部组件内的方法
methods:{
fn1(){
console.log("局部组件内的参数只能在局部组件内使用哦")
}
}
}
}
});
</script>
</body>
</html>自定义组件使用注意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<!-- 连续两个大写字母,都要在前面加"-"再小写 -->
<div id="box"><te-t-td></te-t-td></div>
<!-- Vue和组建都有一个mes,在模板里都是用局部的mes，不会用vue的 -->
<template id="myte"><div><h1 @click="fn1()">{{msg}}</h1></div></template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{msg:"李师傅"},
components:{
"teTTd":{
template:"#myte",
data:function(){
return {msg:"吴师傅",age:18}
},
methods:{
fn1(){
console.log("有大写的自定义标签,全部都换成小写，并在大写字母前添加-")
}
}
}
}
});
</script>
</body>
</html>