实训笔记
NI_computer
这个作者很懒,什么都没留下…
展开
-
node.js (二)内置http模块,从req.url中获取请求参数
httpNode内置的http模块功能使得它非常适合用来开发Web程序。与apache不同,apache为静态服务器,用于将浏览器端请求的静态资源返回。而http模块可以开发动态接口,用于处理前端业务,比如登录,注册,查询资讯信息等。使用流程:引入http模块创建服务对象在创建的服务对象中编写需要执行的操作代码打开服务并对创建的服务对象进行监听或者其他操作创建:http.Serverhttp.createServer()表示创建一个服务,该函数的返回值为http.Server的实例。v原创 2020-10-29 19:55:26 · 2701 阅读 · 3 评论 -
Vue,简单的子组件向父组件传值。
子组件通过发射事件$.emit给父组件,通知父组件数据改变,父组件通过@xxx监听例子:注册一个全局组件,和一个局部组件,将全局组件作为局部组件的子组件,并将全局组件中的值传给局部组件。全局子组件代码:父组件:测试代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2020-10-22 19:39:07 · 713 阅读 · 0 评论 -
VUE,父页面向子页面传值。
在父页面中,我们使用了自定义的子页面,这时候我们需要将父页面的id传输给子页面。可以自定义一个绑定事件在子组件上,例如:父页面: <basicMsg :id="id" ></basicMsg>basicMsg为我的自定义子组件名称,引号内为需要传输的值。这里我传输的id为data内定义的id。子页面:使用props来接收父组件传输的数据,props定义在与data同级。这里也可以给接收的数据进行一个简单的数据类型判断。例如:str为string类型,str1为obje原创 2020-10-20 20:00:33 · 4100 阅读 · 0 评论 -
Vue,element-ui中使用tabs,载入子页面并优化。
在element-ui组件中有一个tabs标签页,可以在单页面中注入多页面。但是例子中的页面只是一行文字,在实际应用开发中我们需要写入的代码很多,如果都写在该页面就会非常不美观,所以这里我使用了子页面,并自定义组件载入到单页面中。1.在页面中写入element-ui组件中的代码。直接把官网上的东西复制下来就行,根据自己需要增加和删除页面。2.定义子页面创建一个文件夹存放子页面,将子页面文件创建出来。3.主页面引入子页面4.注册子组件,在data同级下写components5.在tabs原创 2020-10-20 19:45:11 · 6581 阅读 · 2 评论 -
VUE,webpack打包(自动配置)
生成一个基于vue+webpack的项目1.在终端中进入需要创建项目的文件夹,安装vue/cli-initcnpm install @vue/cli-init -g2.创建项目模板-webpackvue init webpack app01(你的项目名字)vue init webpack app01选择需要的配置然后“y”生成的过程比较漫长可以慢慢等,大概需要十分钟。完成后可以看到多了一个文件夹。3.安装依赖cnpm install4.运行项目npm run dev5.编原创 2020-10-15 19:48:04 · 292 阅读 · 0 评论 -
VUE,webpack简单使用脚本打包(手动配置)
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader的转换,任何形式的资源都可以视作模块,比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。webpack官网地址webpack的简单使用:使用前提:已经安装了node.js最近版本1.初始化项目进入项目中npm init 一直原创 2020-10-14 20:13:15 · 864 阅读 · 0 评论 -
Vue,在vue-cli上进行组件页面切换
进行组件切换的两种方法:一.动态组件1.在components内自定义两个子组件并载入到根组件上student.vue:<template> <div id="student"> <h3>student list</h3> <ul> <li v-for="(item, index) in students" :key="index"> {{ item }} </l原创 2020-10-13 16:09:38 · 855 阅读 · 0 评论 -
VUE,vue-cli项目结构,以及在vue-cli脚手架原始项目框架引入模块
一、项目结构:初始化一个vue-cli之后,我们可以在目录中看到以下结构。app.vuesrc下的app.vue是项目的根组件,可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。main.jsmian.js是vue应用的入口文件,可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。二、添加引入新模块1.在components文件夹下新建一个vue文件模块内基本组件:templ原创 2020-10-12 20:07:58 · 266 阅读 · 0 评论 -
js计算100-1000内的水仙花数
水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI)、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数(Armstrong number),水仙花数是指一个 3 位数,它的每个位上的数字的 3次幂之和等于它本身(例如:1^3 + 5^3+ 3^3 = 153)。计算100-1000内的水仙花数:function test() { var count = 0; for (var i = 100; i &l原创 2020-10-11 14:37:26 · 1309 阅读 · 0 评论 -
js使用1,2,3,4组成不重复的三位数,打印并计算出有多少个
function test() { var count = 0; for (i = 1; i <= 4; i++) { for (j = 1; j <= 4; j++) { for (k = 1; k <= 4; k++) { if (i != j && j != k && i != k) { console.log(i, j, k原创 2020-10-11 14:35:22 · 868 阅读 · 0 评论 -
js计算九九乘法表
四个代码任选1,四个乘法表表现出的形式都不一样//正常模式function test() { for (var i = 1; i < 10; i++) { var str = ''; for (j = 1; j <= i; j++) { str += j + '*' + i + '=' + (i * j) + '\t'; } console.log(str); }}test()//原创 2020-10-11 14:33:22 · 209 阅读 · 0 评论 -
vue router路由机制 别名,重定向,动态路由匹配
别名/a的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/a,就像用户访问/a一样使用alias设置别名{ path: '/teacher', name: 'teacher-a', //给路由命名方便跳转 component: teacher, alias: '/student' }, 此时访问teacher和student都是在访问teacher重原创 2020-10-09 10:40:09 · 561 阅读 · 0 评论 -
Vue router的传值,params和query的区别
在Vue router中可以使用params和query来传递值。相当于get和post的区别。query相当于get请求,传递的值会放在地址栏中展示,而params相当于post请求,传递的值不会显示在地址栏中。其中,query传值的方法路由可以没有名字,但是params传值必须要有名字。 <div id="app"> <h1>点击链接跳转界面</h1> <router-link :to="student">跳转到学生&l原创 2020-10-09 09:53:25 · 232 阅读 · 0 评论 -
vue-router 的安装和基本应用(1)
vue-router是vue的一个插件,用来提供路由功能。通过路由的改变可以动态加载组件,达到开发单页面程序的目的。安装可以使用cdn在线导入在线资源,也可以使用npm模块的方式安装vue-router,现阶段我们入门学习的使用cdn。。<scriptsrc="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax原创 2020-10-08 20:04:52 · 80 阅读 · 0 评论 -
基于vue,element组件制作可输入表格备忘录
制作一个可以输入添加的备忘录,内容以表格形式呈现。按下回车可添加,点击删除可根据id删除。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>备忘录</title>原创 2020-10-07 11:11:15 · 623 阅读 · 0 评论 -
js,制作一个全屏运动粒子。
本代码可制作一个全屏漂浮的粒子,点击可停下,再次点击移动效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子</title> <style&原创 2020-10-07 11:02:47 · 191 阅读 · 0 评论 -
H5,保姆级别小白CSS基础动画笔记,附小动画例子。
CSS动画-Animations由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何JavaScript技术即可完成动画的制作。制作CSS动画步骤:1.声明动画:我们可以在CSS样式中使原创 2020-08-09 17:30:06 · 323 阅读 · 0 评论 -
H5,CSS选择器
CSS选择器在CSS选择器中,基本常用选择器有标签选择器、类选择器、ID选择器、普通选择器,还有层次选择器、伪类选择器和属性选择器。前面部分的选择器较为简单,不做笔记,本文章仅记录关于层次选择器、伪类选择器和属性选择器的笔记。**层次选择器:**1.后代选择器:使用空格隔开两个选择器,表示选择第一个元素中后代里的元素,后代元素可以是子元素也可以是孙元素。例如:CSS:.one span { color: blueviolet; }html:<div class="one">原创 2020-08-06 20:01:41 · 218 阅读 · 0 评论