vue组件的注册和挂载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件的创建与注册</title>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 挂载点:根组件 -->
<div id="app">
<child-component></child-component>
</div>
<script>
//组件本质上就是一组自定义标签,可以在html文档中出现
//1.创建组件
const childComponent=Vue.extend({
template:`<h2>"hello world"</h2>`,
})
//2.注册组件
Vue.component("child-component",childComponent);
//1,2两种二合一
Vue.component("child-component",{
template:`<h2>"hello vue.js"</h2>`,
});
//3挂载组件
new Vue({
el:"#app",
});
</script>
</body>
</html>
vue点赞案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue点赞案例</title>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><button-inc></button-inc></div>
<div id="app1"><button-inc></button-inc></div>
<script>
//全局组件:声明在vue实例的外部,全局可见
Vue.component("button-inc",{
template:`<div>
<button @click="count">点赞:{{count}}</buuton>
</div>`,
data(){
return {
count:0,
};
},
});
new Vue({
el:"#app",
});
// 在创建一个vue实例,这个实例接管的是第一个#app的挂载点,可以同时访问实现同一个效果
new Vue({
el:"#app1",
});
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document局部组件</title>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 挂载点 -->
<div id="app"><hello></hello></div>
<script>
//局部组件必须声明在vue实例中
new Vue({
el:"#app",
component:{
//可以同时声明多个局部组件
//hello:组件名称,它的值是一个对象。
hello:{
template:`<p>hello {{site}}</p>`,
data(){
return{
site:"php中文网",
};
},
},
//当属性变量与属性名相同时,并且在同一个作用域中则可以省去值变量名称。
hello:hello,
},
});//结束的用分号,没有结束的用逗号
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现局部组件的另外一个方法</title>
<!-- 导入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<template id="hello">
<p>hello{{site}}</p>
</template>
<script>
const hello={
//可以将大段的html字符串写到html文档中的template标签中,并且用id进行关联
template:"#hello",
data(){
return{
site:"php中文网",
};
},
};
</script>
</body>
</html>
传参:父组件向子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传参:父组件向子组件</title>
<!-- 导入vue-->
</head>
<body>
<div id="app">
<btn-inc :my-name="username" :my-coun="count"></btn-inc>
</div>
<script>
const vm=new Vue({
el: document.querySelector("#app"),
data(){
return {
username:"为中国女足合成",
count:0,
};
},
//局部组件
components:{
"btn-inc":{
props:['myName','myCount'],
template:`
<div>
<button @click="num++">点赞: {{num}}</button>
<span>{{myName}}</span>
</div>
`,
data(){
return{
num:this.myCount,
};
},
},
},
});
</script>
</body>
</html>
子组件向父组件传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传参:子组件向父组件</title>
<!-- 导入vue-->
</head>
<body>
<div id="app">
<btn-inc :my-name="username" :my-count="count" @click-count="handle"></btn-inc>
</div>
<script>
const vm=new Vue({
el:document.querySelector('#app'),
data(){
return{
username:"为中国女足喝彩",
count:0,
};
},
//局部组件
component:{
"btn-inc":{
props:['myName','myCount'],
template:`
<div>
//从1开始点赞累加。
<button @click="$emit('click-count',1)">点赞:{{myCount}}</button>
<span>{{myName}}</span>
</div>`,
data(){
return{
num:this.myCount,
};
},
},
},
methods:{
handle(value){
console.log(value);
this.count+=value;
this.username="dnfnd";
},
},
});
</script>
</body>
</html>
总结:
- 父组件向子组件传参:自定义属性:name,:count
- 子组件向父组件传参:自定义事件方法
- 子组件:$emit(‘父组件中的自定义的方法’,’附加参数值’)
- 父组件:@父组件中的自定义方法=”事件方法”
路由实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>路由实现选项卡功能</title>
<style>
.container{
width:30em;
display: flex;
flex-flow: column nowrap;
}
nav{
height:2em;
line-height: 2em;
padding: 0 2em;
background-color: aqua;
display: flex;
}
nav a{
padding: 0 0.5em;
}
nav a:hover{
background-color: red;
color: green;
}
.route-view{
background-color: blanchedalmond;
}
.route-view ul li{
line-height:1.5em;
}
.route-view ul li a:hover{
color:cornflowerblue;
}
</style>
</head>
<body>
<!-- 选项卡 -->
<div class="container">
<!-- 导航 -->
<nav>
<a href="#/list1">国际新闻</a>
<a href="#/list2">国内新闻</a>
</nav>
<!-- 路由显示与导航对应的内容 -->
<div class="route-view"></div>
</div>
<script>
let list1=`
<ul>
<li><a href="">国际新闻</a></li>
<li><a href="">国际新闻</a></li>
<li><a href="">国际新闻</a></li>
</ul>
`;
let list2=`
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国内新闻</a></li>
<li><a href="">国内新闻</a></li>
</ul>
`;
const routeView=document.querySelector(".route-view");
//console.log(window.location.href);//url信息
//hashchang:监听url中的瞄点的变化
window.addEventListener("hashchange",show);
//window.addEventListener("load",show),
//推荐DOMContentLoaded代替load,因为只要创建好dom就可以触发了。
window.addEventListener("DOMContentLoaded",show);
function show(){
console.log("location.hash");
switch(location.hash){
case "#/list1":
routeView.innerHTML="list1";
return;
case "#/list2":
routeView.innerHTML="list2";
return;
default:
routeView.innerHTML="list1";
break;
}
}
</script>
</body>
</html>