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>

Vue组件的注册与挂载流程; 路由原理与注册流程 ----0416

1. Vue 组件的注册与挂载流程

2. 路由原理与注册流程

更多相关文章

随机推荐