第三十六篇 vue

Posted 2023-04-02 caix-1987 - 个人博客

客户端 vs 服务端路由

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。

官方路由

Vue 很适合用来构建单页面应用。对于大多数此类应用，都推荐使用官方支持的路由库。要了解更多细节，请查看 Vue Router 的文档

从头开始实现一个简单的路由

如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件

示例

<script>
import Home from \'./Home.vue\'
import About from \'./About.vue\'
import NotFound from \'./NotFound.vue\'
const routes = 
  \'/\': Home,
  \'/about\': About

export default 
  data() 
    return 
      currentPath: window.location.hash
    
  ,
  computed: 
    currentView() 
      return routes[this.currentPath.slice(1) || \'/\'] || NotFound
    
  ,
  mounted() 
    window.addEventListener(\'hashchange\', () => 
		  this.currentPath = window.location.hash
		)
  

</script>
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

Egret入门学习日记 --- 第三十六篇（书中 10.7 ~ 10.8 节 内容）

第三十六篇（书中 10.7 ~ 10.8 节 内容）

　　开始 书中 10.7 节内容。

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　书中 10.7 节内容结束。

　　书中重点：

　　　　1、导出素材。

　　　　2、配置粒子库。

　　　　3、播放动画。

　　开始操作：　　

　　　　1、导出素材。

　　　　　　我设置好了雪花的效果。

　　　　　　

　　　　　　接着是导出。

　　　　　　

　　　　　　这是导出后的资源文件。

　　　　　　

　　　　　　导入Egret的预加载资源组中。

　　　　　　

　　　　2、配置粒子库。

　　　　　　下载好官方的粒子库。

　　　　　　https://github.com/egret-labs/egret-game-library

　　　　　　拷贝粒子库到项目外，记住 项目文件夹外！

　　　　　　

　　　　　　配置好 egretProperties.json 文件。

　　　　　　

　　　　　　编译项目后，粒子库就会加入到模块中了。

　　　　　　

　　　　3、播放动画。

 　　　　　　按照书上的代码。

　　　　　　

　　　　　　运行效果是这样的。。。啥都没有，资源也拿到了，就是没效果。

　　　　　　

　　　　　　这就奇怪了，纳闷啊。

　　　　　　明明加入进去了，为什么看不到粒子效果呢。

　　　　　　

　　　　　　我真是罪大恶极啊。。。现在有效果了。

　　　　　　原因是。。。我一开始设置的雪花效果是这样的。

　　　　　　

　　　　　　有没有发现，透明度我设置是0。所以才看不见。

　　　　　　然后我重新改了下透明度。。。

　　　　　　

　　　　　　重新导入。

　　　　　　

　　　　　　就可以了。

　　　　　　

　　至此，10.7 节 内容结束。

 

　　开始 10.8 节 内容。

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　书中 10.8节 内容到这结束。

　　书中重点：

　　　　1、导入素材。

　　　　2、添加播放逻辑。

　　　　3、改善人物动作切换过快。

　　开始操作：

　　　　1、导入素材。

　　　　　　老规矩，导入素材。

　　　　　　

　　　　2、添加播放逻辑。

 　　　　　　写好Terui类。

　　　　　　

　　　　　　实例化。

　　　　　　

　　　　3、改善人物动作切换过快。

　　　　　　其实改动的地方也少。

　　　　　　

　　　　　　实例化。

　　　　　　

　　至此，10.8节 内容结束。

 

　　洗澡。