Vue:1.Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程,实例演示;
1.Vue组件的注册与挂载流程,实例演示
组件本质上就是一组自定义的标签,可以在html文档出现,这个自定义的标签,需要用户自定义的功能,作用,行为
组件一共分为三部:1. 创建组件,2. 注册组件,3. 挂载组件
实例演示·↓
自定义标签
<div class="box">
<username></username>
</div>
①创建组件:Vue.extend
const username = Vue.extend({
template: `<h2> hello 同学们</h2>`,
});
②注册组件:Vue.component
Vue.component("username", username);
③挂载组件:new Vue({})
new Vue({
el: ".box",
});
代码块
<!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>
</head>
<body>
<div class="box">
<username></username>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 组件本质上就是一组自定义的标签,可以在html文档出现
// 这个自定义的标签,需要用户自定义的功能,作用,行为
// 组件是可复用的vue实例,
// 1. 创建组件
const username = Vue.extend({
template: `<h2> hello 同学们</h2>`,
});
// 2. 注册组件
Vue.component("username", username);
// 3. 挂载组件
new Vue({
el: ".box",
});
</script>
</body>
</html>
④全局组件:声明在Vue实例的外部,全局可见
第二个vue实例,共享了全局组件的功能,在多个Vue实例中均有效,所以它是全局的,以后推荐不要用了, 尽可能用:局部组件
代码块
<script>
// 全局组件: 声明在Vue实例的外部,全局可见
// 全局组件: 在多个Vue实例中均有效,所以它是全局的
Vue.component("buttonZdy", {
template: `
<div>
<span >朱老师</span> <button @click='count++'>点赞: {{count}}</button>
</div>
`,
data() {
return {
count: 0,
};
},
});
//第一个vue实例
new Vue({
el: ".box",
});
//第二个vue实例,共享了全局组件的功能
new Vue({
el: ".class",
});
</script>
⑤局部组件:局部组件必须声明在Vue的实例中
局部组件不能共享,系统会报错,
代码块
<script>
//局部组件
new Vue({
el: ".box",
components: {
//components 可以同时声明多个局部组件
username: {
template: `<p style='color:blue'>我是{{text}}组件</p>`,
data() {
return {
text: "局部",
};
},
},
},
});
new Vue({
el: ".item",
});
</script>
⑥传参: 父组件 向 子组件
父组件向子组件传参是通过自定义属性传参,props[]: 子组件接收自定义属性
代码块
<script>
//父组件向子组件传参是通过自定义属性传参
new Vue({
el: "#root",
data() {
return {
username: "日本向大海投向核废水",
count: 0,
};
},
//局部子组件
components: {
btnIon: {
//props 子组件接收自定义属性:username-a :count-a
props: ["usernameA", "countA"],
template: `
<div>
<button @click='num++'>鄙视:{{num}}</button>
<span>{{usernameA}}</span>
</div>
`,
data() {
return {
num: this.countA,
};
},
},
},
});
</script>
⑥传参: 子组件 向 父组件
子组件向父组件传参是通过声明一个”同名事件”来实现,$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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 自定义属性 :username-a :count-a -->
<!-- 自定义方法:click-count 子组件给夫组件传递参数 -->
<btn-ion
:username-a="username"
:count-a="count"
@click-count="data"
></btn-ion>
</div>
<script>
//父组件向子组件传参是通过自定义属性传参
new Vue({
el: "#root",
data() {
return {
username: "日本向大海投向核废水",
count: 0,
};
},
//局部子组件
components: {
btnIon: {
//props 子组件接收自定义属性:username-a :count-a
props: ["usernameA", "countA"],
//$emit 实现对父组件进行呼叫传递参数
template: `
<div>
<button @click="$emit('click-count',1)">鄙视:{{countA}}</button>
<span>{{usernameA}}</span>
</div>
`,
},
},
//methods 创建方法
methods: {
data(value) {
this.count += value;
},
},
});
</script>
</body>
</html>
2. 路由原理与注册流程,实例演示
①路由原理:原生ES6锚点选项卡,实例
代码块:可看注释
<!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>锚点ES6选项卡</title>
<style>
a {
text-decoration: none;
color: #666;
font-weight: bold;
}
a:hover {
color: lightcoral;
font-size: 1.1em;
}
li {
list-style: none;
margin: 10px;
}
li > a {
color: white;
font-weight: bolder;
}
.box {
margin: 40px auto;
background-color: lightseagreen;
height: 400px;
width: 500px;
}
.box > nav {
background-color: lightskyblue;
height: 40px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<!-- 选项卡 -->
<div class="box">
<!-- 选项卡导航区 -->
<nav>
<a href="#/list1">省内新闻</a>
<a href="#/list2">国内新闻</a>
<a href="#/list3">国际新闻</a>
</nav>
<!-- 选项卡内容区 -->
<div class="content">
<!-- <ul>
<li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
<li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
<li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
</ul> -->
</div>
</div>
<script>
//省内新闻
let list1 = `
<ul>
<li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
<li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
<li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
</ul>
`;
//国内新闻
let list2 = `
<ul>
<li><a href="">外交部:敦促日方停止危害海洋环境的危险行径</a></li>
<li><a href="">特斯拉事件女车主:我只想问为什么会刹车失灵</a></li>
<li><a href="">习近平在清华大学考察</a></li>
</ul>
`;
//国际新闻
let list3 = `
<ul>
<li>
<a href="">美国前副总统沃尔特·蒙代尔逝世 外交部:对他的逝世深表哀悼</a>
</li>
<li>
<a href="">外交部:中方愿为印方控制疫情提供必要的支持和帮助</a>
</li>
<li><a href="">联合国秘书长呼吁国际社会共同努力使地球恢复健康</a></li>
</ul>
`;
//拿到内容区域
const Content = document.querySelector(".content");
// hashchange: 监听url中的锚点的变化
window.addEventListener("hashchange", show);
//页面创建好后直接加载
window.addEventListener("DOMContentLoaded", show);
//创建show方法
function show() {
console.log(location.hash);
//hash等于url 中的 锚点
//如果location.hash,锚点等于list变量则添加到页面中去
switch (location.hash) {
case "#/list1":
Content.innerHTML = list1;
return;
case "#/list2":
Content.innerHTML = list2;
return;
case "#/list3":
Content.innerHTML = list3;
return;
default:
Content.innerHTML = list1;
return;
}
}
</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>锚点ES6选项卡</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue-router-dev/dist/vue-router.js"></script>
<style>
a {
text-decoration: none;
color: #666;
font-weight: bold;
}
a:hover {
color: lightcoral;
font-size: 1.1em;
}
li {
list-style: none;
margin: 10px;
}
li > a {
color: white;
font-weight: bolder;
}
.box {
margin: 40px auto;
background-color: lightseagreen;
height: 400px;
width: 500px;
}
.box > nav {
background-color: lightskyblue;
height: 40px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<!-- 选项卡 -->
<div class="box">
<!-- 选项卡导航区 -->
<nav>
<!-- router-link: 就是a标签 -->
<!-- to : a 标签 中 的href -->
<router-link to="/list1">省内新闻</router-link>
<router-link to="/list2">国内新闻</router-link>
<router-link to="/list3">国际新闻</router-link>
<!-- 选项卡内容区 -->
</nav>
<!-- router-view 内容显示标签 -->
<router-view class="text"></router-view>
</div>
<script>
//省内新闻
let list1 = {
template: `
<ul>
<li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
<li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
<li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
</ul>
`,
};
//国内新闻
let list2 = {
template: `
<ul>
<li><a href="">外交部:敦促日方停止危害海洋环境的危险行径</a></li>
<li><a href="">特斯拉事件女车主:我只想问为什么会刹车失灵</a></li>
<li><a href="">习近平在清华大学考察</a></li>
</ul>
`,
};
//国际新闻
let list3 = {
template: `
<ul>
<li>
<a href="">美国前副总统沃尔特·蒙代尔逝世 外交部:对他的逝世深表哀悼</a>
</li>
<li>
<a href="">外交部:中方愿为印方控制疫情提供必要的支持和帮助</a>
</li>
<li><a href="">联合国秘书长呼吁国际社会共同努力使地球恢复健康</a></li>
</ul>
`,
};
//1. VueRouter 创建路由对象
const router = new VueRouter({
//routes 路由配置 必须是这个属性
routes: [
// 每一个路由参数都是一个对象,每一个对象对应着一个路由
{ path: "/list1", component: list1 },
{ path: "/list2", component: list2 },
{ path: "/list3", component: list3 },
],
});
// 2. 注册路由
new Vue({
//挂载点
el: ".box",
// 注册路由
router,
});
</script>
</body>
</html>