admin

10-vuecli/vueapp/myapptwo/src/App.vue

@@ -2,7 +2,15 @@
   <div id="app">
     <nav>
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/about">About</router-link> | 
+      <!-- router-link 组件是用来实现页面跳转的 -->
+       <!-- 路由链接的to属性指定跳转的路径 这个路径就是在router/index.js中配置path -->
+      <router-link to="/pageone">页面一</router-link>
+
+      <!-- 实现页面跳转分为3步 -->
+       <!-- 第一步创建组件页面 vue文件 -->
+        <!-- 第二步 在router/index.js 注册页面组件 -->
+         <!-- 第三步 在路由组件中添加路由出口 -->
     </nav>
     <router-view/>
   </div>

10-vuecli/vueapp/myapptwo/src/router/index.js

@@ -1,22 +1,45 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+// 预先加载组件
 import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
+    // path: 指定路由的路径 显示在地址栏当中
     path: '/',
+    // name: 路由的名称 
     name: 'home',
+    // component: 指定该路径对应的组件
+    // 预加载模式 预先/提前加载页面组件
+    // 在页面上方提前先加载进来并放到变量中用的时候直接引入即可
+    
+    // 预加载优点是
+    // 提前加载好组件 减少用户等待时间 只要访问这个页面直接就可以看到
+    // 预加载缺点是
+    // 提前加载好所有的组件 会增加网站的体积 影响网站首屏的加载速度
+
+    // 预加载模式 一般使用在首页 或者常用的页面
     component: HomeView
   },
   {
     path: '/about',
     name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    // 使用懒加载模式
+    // 当用户访问到该路径时才加载对应的组件
+    // 懒加载优点是
+    // 只有当用户访问到该路径时才加载对应的组件 减少了首页的加载时间
+    // 懒加载缺点是
+    // 用户访问到该路径时需要等待组件加载完成才能看到页面内容
+    // 适合那些不常用的页面
+    // 懒加载模式 一般使用在一些不常用的页面上
+    component: () => import('../views/AboutView.vue')
+  },{
+    path:'/pageone',
+    name:'pageone',
+    // ../ 表示上一级目录 ./ 表示当前目录
+    component: () => import("../views/PageOne.vue")
   }
 ]
 

10-vuecli/vueapp/myapptwo/src/views/PageOne.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="page-one">
+        <h1>这是我的页面一</h1>
+    </div>
+</template>

8-ES6/12_箭头函数.html

@@ -44,15 +44,28 @@
         // fn(1,"a");
 
         // 箭头函数 没有 this这个对象
-        let oBox = document.querySelector("#box");
+        // let oBox = document.querySelector("#box");
         // oBox.onclick = function(){
         //     console.log(this);
         // }
         // oBox.onclick = () => {
         //     console.log(this);
         // }
-        console.log(this);
+        // console.log(this);
         
+        // let fun = () => {
+        //     console.log("hello world");
+        // }
+        // let fun = () => {
+        //     return "hello";
+        // }
+
+        // 如果箭头函数没有{} 表示直接 rentur 后面第一行代码
+        let fun = () => "hello";
+        
+
+        let str = fun();
+        console.log(str);
     </script>
 </body>
 </html>