网络广告一般是怎么收费,广州seo网站推广公司,蜜雪冰城品牌策划方案,wordpress 编辑器推荐目录
一、Vue路由
1.1 简介
( 1 ) 特点
( 2 ) 作用
1.2 实例
( 1 ) 引入
( 2 ) 组件
( 3 ) 关系
( 4 ) 路由
( 5 ) 事件
( 6 ) 锚点
二、nodeJS
2.1 下载
2.2 安装
2.3 环境搭建
新增
添加
测试
配置
运行 一、Vue路由
1.1 简介 Vue路由是Vue.…目录
一、Vue路由
1.1 简介
( 1 ) 特点
( 2 ) 作用
1.2 实例
( 1 ) 引入
( 2 ) 组件
( 3 ) 关系
( 4 ) 路由
( 5 ) 事件
( 6 ) 锚点
二、nodeJS
2.1 下载
2.2 安装
2.3 环境搭建
新增
添加
测试
配置
运行 一、Vue路由
1.1 简介 Vue路由是Vue.js框架中用于管理页面导航的插件。它允许开发者通过定义路由规则将不同的组件映射到不同的URL上实现页面之间的切换和导航。 Vue路由的核心是路由器Router它负责监听URL的变化并根据配置的路由规则来匹配相应的组件进行渲染。在Vue中我们可以通过Vue Router插件来创建和配置路由器。 ( 1 ) 特点 声明式路由Vue路由使用声明式的方式来配置路由规则开发者只需要在配置文件中定义好路由规则就可以实现页面之间的切换和导航。 嵌套路由Vue路由支持嵌套路由可以将多个组件组合成一个整体并通过父子关系来管理路由。 动态路由Vue路由支持动态路由可以根据不同的参数来动态生成路由规则实现更灵活的页面导航。 路由懒加载Vue路由支持路由懒加载可以将页面组件按需加载提高页面加载速度和用户体验。 导航守卫Vue路由提供了导航守卫的功能可以在路由切换前后执行一些额外的逻辑例如权限验证、页面切换动画等。 总的来说Vue路由提供了一套完善的路由系统可以帮助开发者更好地管理页面导航提供良好的用户体验并支持嵌套路由、动态路由、路由懒加载、导航守卫等功能使得开发者可以更灵活地控制页面的展示和交互。 ( 2 ) 作用 Vue路由有以下几个主要的作用 1. 实现页面之间的切换和导航Vue路由可以根据URL的变化动态地加载和渲染不同的组件实现页面之间的切换和导航。2. 提供良好的用户体验通过使用Vue路由可以实现单页应用SPA的效果页面切换时不需要重新加载整个页面只需要更新组件部分提高了用户的交互体验。3. 管理页面状态Vue路由可以根据URL的变化动态地管理页面的状态。例如在URL中添加参数可以实现页面的筛选、排序等功能。4. 支持嵌套路由Vue路由支持嵌套路由可以将多个组件组合成一个整体并通过父子关系来管理路由。这样可以更好地组织和管理页面结构。5. 支持动态路由和路由参数Vue路由支持动态路由可以根据不同的参数来动态生成路由规则实现更灵活的页面导航。同时也可以通过路由参数传递数据实现组件之间的通信。6. 提供导航守卫Vue路由提供了导航守卫的功能可以在路由切换前后执行一些额外的逻辑例如权限验证、页面切换动画等。 总的来说Vue路由可以帮助开发者更好地管理页面导航提供良好的用户体验并且支持动态路由和导航守卫等功能使得开发者可以更灵活地控制页面的展示和交互。 1.2 实例
( 1 ) 引入 创建 HTML 文件在该文件中进行引入js依赖 !-- 1.引入vue的js依赖 --
script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script
!-- 1.引入路由的js依赖 --
script srchttps://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js/script
( 2 ) 组件 在 script 标签中定义组件 // 2.定义组件
const Home Vue.extend({template: divp言情小说网/pdiv本网站首页内容/div/div
});
const Abort Vue.extend({template: divp永远不掉落女人的陷阱/pdiv本站意义做西格玛男人/div/div
});
( 3 ) 关系 在 script 标签中定义组件与路径的对应关系 //3.定义组件与路径的对应关系let routes [{path: /Home,component: Home},{path: /Abort,component: Abort}];
( 4 ) 路由 在 script 标签中定义路由 // 4.定义路由const router new VueRouter({routes});new Vue({el: #app,router})
( 5 ) 事件 在Vue边界中定义触发路由事件的按钮 !-- 5.触发路由事件的按钮 --router-link to/Home首页/router-linkrouter-link to/Abort变强/router-link
( 6 ) 锚点 在Vue边界中定义锚点(路由内容) !-- 6.定义锚点(路由内容) --router-view/router-view
整合
!DOCTYPE html
htmlheadmeta charsetutf-8 /!-- 1.引入vue的js依赖 --script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script!-- 1.引入路由的js依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js/scripttitle路由/title/headbodydiv idapp!-- 5.触发路由事件的按钮 --router-link to/Home首页/router-linkrouter-link to/Abort变强/router-link!-- 6.定义锚点(路由内容) --router-view/router-view/divscript typetext/javascript// 2.定义组件const Home Vue.extend({template: divp言情小说网/pdiv本网站首页内容/div/div});const Abort Vue.extend({template: divp永远不掉落女人的陷阱/pdiv本站意义做西格玛男人/div/div});//3.定义组件与路径的对应关系let routes [{path: /Home,component: Home},{path: /Abort,component: Abort}];// 4.定义路由const router new VueRouter({routes});new Vue({el: #app,router})/script/body
/html执行效果 二、nodeJS Node.js是一个基于Chrome V8引擎的JavaScript运行时环境用于构建高性能、可扩展的网络应用程序。它允许开发者使用JavaScript语言来编写服务器端的应用程序并提供了丰富的库和模块方便开发者进行网络通信、文件操作、数据库访问等操作。 Node.js采用事件驱动、非阻塞I/O模型使得它能够处理大量并发连接具有出色的性能表现。它还拥有一个强大的包管理器npm可以方便地安装、管理和共享代码库。
2.1 下载 下载 nodeJS 资源包 : 下载 | Node.js 注1Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本 2.2 安装 将文件解压到指定位置并在解压后的目录下建立node_global和node_cache这两个目录 node_globalnpm全局安装位置 node_cachenpm缓存路径
如图 : 2.3 环境搭建
新增 打开设置 - 系统 - 系统信息 - 高级系统设置 - 环境变量 - 在系统变量中点击新建 新增一个环境变量 变量名 : NODE_HOME 变量值 : 下载后解压的指定目录 如( D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 ) 操作如图 : 添加 在系统变量中找到名为 : PATH 变量名的变量选中后添加以下两个环境变量 需要添加的变量值 : %NODE_HOME% %NODE_HOME%\node_global 注 : 根据自己的电脑看是否在变量值后面增加分号来间隔变量值。 如 : %NODE_HOME%; %NODE_HOME%\node_global; 操作如图 : 测试 测试安装是否成功及环境变量是否配置完成 WinR输入cmd打开cmd窗口输出如下命令配置环境变量的查看 echo %node_home% echo %path% 操作如图 : WinR输入cmd打开cmd窗口输出如下命令测试安装是否成功 node -v npm -v 操作如图 : 配置 配置npm全局模块路径和cache默认安装位置 WinR输入cmd打开cmd窗口分开执行如下命令 npm config set cache D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache npm config set prefix D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global 注 以上的路径是下载node的本地路径再进入到增加新建的两个文件目录里面 其中的双引号不能少 如果执行命令卡死可以删除C:\Users\用户名\.npmrc 后重新执行。用户名为当前电脑的用户名 ( node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 ) 操作如图 : 设置淘宝源 修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry 推荐设置 --registry) WinR输入cmd打开cmd窗口输入指令: npm config set registry https://registry.npm.taobao.org/ 注 : 可以根据一下命令查看所有你设置过的源 npm config get registry 设置如图 : 运行 测试是否可以使用并运行启动Node.js项目 随便全局安装一个模块就可以测评 WinR输入cmd打开cmd窗口输入指令: npm install webpack -g 命令执行完毕后会在node_global路径下面生成node_modules\webpack文件 如果在自己的本地路径中进行项目测试。 随便在自己的电脑上找一个项目看是否可以进行添加Node.js依赖 在项目的跟目录中打开cmd窗口 执行如图 : 依赖添加后启动项目。 继续执行以下命令启动项目: npm run dev 启动执行后项目开启说明完成; 以上是我启动项目的界面:
