1. Vue 组件的注册与挂载流程
<!-- 挂载点: 根组件 --><div id="root"> <child-component></child-component></div><script> // 组件本质上就是一组自定义的标签,可以在html文档出现 // 这个自定义的标签,需要用户自定义的功能,作用,行为 // 创建 // const h2 = document.createElement("h2"); // h2.textContent = "hello vue.js"; // 注册 // document.body.append(h2); // 组件是可复用的vue实例, // 1. 创建组件 // const childComponent = Vue.extend({ // template: `<h2> "hello vue.js"</h2> `, // }); // 2. 注册组件 // Vue.component("child-component", childComponent); // 二合一 Vue.component("child-component", { template: `<h2>hello vue.js</h2>`, }); // 3. 挂载组件 new Vue({ el: "#root", }); // 注册(直接将创建合并到注册中) + 挂载</script>
2. 路由原理与注册流程
<!DOCTYPE html><html lang="zh-CN"> <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> <link rel="stylesheet" href="style.css" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 路由模块加载 --> <script src="vue-router-dev/dist/vue-router.js"></script> </head> <body> <!-- 选项卡 --> <div class="container"> <!-- 导航 --> <nav> <!-- router-link: 就是a标签 --> <!-- to : a 标签 中 的href --> <router-link to="/list1">国际新闻</router-link> <router-link to="/list2">国内新闻</router-link> </nav> <!-- 这里显示与导航对应的内容 --> <router-view class="route-view"></router-view> </div> <script> let list1 = { template: ` <ul> <li><a href="">世界最大冰山融化解体 曾经覆盖约6000平方公里</a></li> <li><a href="">为防新冠 东京奥运拟对选手每天实施唾液检测</a></li> <li><a href="">为防新冠 东京奥运拟对选手每天实施唾液检测</a></li> </ul> `, }; let list2 = { template: ` <ul> <li><a href="">31省份已累计报告接种新冠病毒疫苗19502.2万剂次</a></li> <li><a href="">31省份已累计报告接种新冠病毒疫苗19502.2万剂次</a></li> <li><a href="">31省份已累计报告接种新冠病毒疫苗19502.2万剂次</a></li> </ul> `, }; // 1. 创建路由对象 const router = new VueRouter({ // 路由配置 routes: [ // 每一个路由参数都是一个对象,每一个对象对应着一个路由 { path: "/list1", component: list1 }, { path: "/list2", component: list2 }, ], }); // 2. 注册路由 new Vue({ // el: ".container", // 注册路由 router, }).$mount(".container"); </script> </body></html>
