抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

这个东西还真是浪费了不少时间,网上一些文章写的吧 不知道是原来版本那么做 还是以讹传讹 反正都不太好用
只能大致参考下 好了 进入整体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--  注意这里 lay-filter 是监听时 或者其他操作时用的 选取用的字段 类似jq的 $('#id')-->
<!--  注意这里 lay-verify 是你自定义的验证规则名称 这个是必须 如果是简单验证 就写上预设值 就好了 -->
<select name="city" lay-filter="city" lay-verify="city-verify">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
</select>    

<!-- 可以是submit提交按钮 也可以是普通按钮 但是呢 必须加上 lay-submit lay-filter="*" 其中 lay-submit 也是不可少的  要不就检测不到提交事件-->
<input type="submit" name="submit" lay-submit lay-filter="*" value="提交">

<script>
//第一步 写自定义规则
form.verify({
    cateid: function (value) {
        if (value == "") {
            return "必须选择一级栏目";
        }
    },
    contact: function (value) {
        if (value.length < 4) {
            return '内容请输入至少4个字符';
        }
    },
    phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！'],
    email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});

//第二部 提交监听事件
//只有这样 验证才会执行  submit(*) 就是提交按钮的 lay-filter="*" 这个可以自行更改
//其实回调函数 只是有其他操作要做的时候用的 如果只是验证的话 第二个参数可以不写
form.on('submit(*)', function (data) {
    params = data.field;
    //alert(JSON.stringify(params))
    submit($, params);  //这个是提交按钮 当验证通过后就提交
    return false;
})
//其实可以直接这么用
//form.on('submit(*)');
</script>

今天遇到个奇葩问题,有个js报错 结果出现位置居然在 <!DOCTYPE HTML> 这里. 真是凌乱了.找了半天,把整个页面都删除了,还是报错了. 感觉可能并不是自己的问题. 拿出火狐再看页面就没有错了. 后来发现居然是chrome的错 而且莫名的今天就坏了 前两天都没问题啊 可能他们这个插件更新 然后浏览器 自己就更新吧 总之就是插件的问题 把文件名扔到百度 根本查不出是啥...

今天做表单验证,验证后想要跳到错误位置.原本打算用 focus() 可是用了 layui 根本定位不到这也是 layui 一个很大的弊端. 于是想到根据元素来跳转. 1234567$('html, body').scrollTop(100); //跳到指定位置 前面的参数也可以是id//动画跳转$('html, body').animate(&...

当只有一个图表的时候很简单只要这么写就搞定了 1window.onresize = orderCharts.myChart.resize; 当多个图表的时候,就会出现只有一个图表能自动缩放,这时就要这么写了. 123456window.onresize = function () { orderCharts.myChart.resize(); //图表自适应窗口大小 ...

必须传入this. 而且在方法内使用时 记住不能用this这样就可以使用$获取当前对象了 ```js今日 function t(obj) { changeGroupBtn(obj); option.xAxis.data = dayArray; option.series[0].data = getDate(getUrl, ‘today’); myChart.setO...

12345678910111213141516function getDate(url) { var result; $.ajax({ type: 'GET', async :false,//取消异步 否则result赋值失败 url: '/index.php/Admin/Page/or...

下面例子是我用到的一些方法,其他的看文档吧 全的很这里主要说下怎么使用中文显示按下面引入 而且顺序不能变 还有就是注意moment引入的js 不是原版那个 12https://cdn.bootcss.com/moment.js/2.20.1/moment-with-locales.min.jshttps://cdn.bootcss.com/moment.js/2.20.1/locale/zh...

xAxis.type string[ default: ‘category’ ]坐标轴类型。可选：‘value’ 数值轴，适用于连续数据。‘category’ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的...

简单描述

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1
2
3
4
Object.assign(target, ...sources)
//target 目标对象
//...sources 源对象
//返回 目标对象

描述:

如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 会跳过那些值为 null 或 undefined 的源对象。

模块定义

1
2
3
4
5
6
7
8
9
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//需要用module.exports暴露出来
module.exports.sayHello = sayHello

模块使用

1
2
3
4
5
6
7
8
9
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

以上是最简单的使用方法.这个方法有个好处就是那个函数知道出自那里.
下面的方法更现代一些,不过有个问题是,方法出自那里不会那么清晰.所以用的时候看着办吧.

名称 说明 ECharts 百度出品,免费且十分强大,各种图表都有,唯一可能造成的问题就是因为支持的太多可能体积大些 sChart.js 简单且易用,基本图表都有了.不过现在好像改名了叫chartjs中文文档,这个可以使用npm方式安装 Highcharts 这个的确很吊,但是呢收费,虽然说个人用户免费,但还不如用百度的Echarts比较安心 EasyReport...

Vue相关网站参考：

　　Vue中文帮助网站：http://cn.vuejs.org/

　　Vue github开源地址：https://github.com/vuejs/vue

　　Vue.js专业中文社区：http://www.vue-js.com/

　　前端开发Vue相关：http://www.opendigg.com/tags/front-vue

　　本文开源地址：https://github.com/yonghu86/awesome-github-vue

　　本文主要是收集与整理Vue相关的开源资料，以供需要的朋友参考。主要包含以下几方面的内容：

　　UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

构建插件

名称 说明
vue-spa-template 构建vue全家桶,Github说明很详细.参考文档:基于 vue 全家桶的 spa 项目脚手架
electron-vue 构建electron时用的
cooking vue特别简单的构建工具,不过东西可能没有上面vue-spa-template那么全. 中文文档
Vue-Element-Starter vue启动页.这个已经有了个后台框架的样子了.基本的东西已经弄好,可以快速开发了
Vue Paper Dashboard 这个真的很漂亮 就是不能用作大型后台
Vue Admin Panel Framework vue和buluma的后台好像是重复两个啊
CoPilot 这个也不错 是AdminLTE模板做的
CoreUI-Free-Bootstrap-Admin-Template 这个也不错 是CoreUI模板做的
Vuestic Admin Dashboard 这个也不错 是 Bootstrap 4.模板做的

名称 说明 two.js 一个渲染器无关的适用于 web 的二维绘图 api 。 paper.js 是矢量图形脚本中的瑞士军刀 —— 使用 HTML5 Canvas 将 Scriptographer 移植到 JavaScript和浏览器 three.js 这没的说了,js里绘制3D的老大,只要技术强可以绘制各种东西,并且能做小游戏

这里总结了一些开发前后端分离,对于开发API的管理.不仅可以在没有后端搭建成的时候mock数据.而且可以管理接口及版本,并生成文档.这为开发及后续整理提供很大的方便. 网站 具有的特色 DOClever 这个平台有很好的介绍用的都是视频真是太贴心了教程.而且可以管理团队,项目分配,模拟数据,测试接口,版本管理.真的是功能十分丰富,这个也可以导入Swagger,只要导出json文件...

主要看这篇文章就行了 Swagger从入门到精通 虽然可能有些地方可能有老了,没讲到不过还是很实用,而且非常细致.

剩下的看编辑器事例就好了,一下子就能看懂了 官方在线编辑器

记录点一:

当请求操作时,有两种方式一种是路径请求,另一种是参数请求.两种表现形式不同.

参数请求

1
2
3
4
5
6
7
8
9
10
// get(请求方式) /persons?pageSize=20&pageNumber=2
      parameters:
       - name: pageSize
         in: query      //就是这里,这里query表示参数请求
         description: Number of persons returned
         type: integer
       - name: pageNumber
         in: query
         description: Page number
         type: integer

路径请求

1
2
3
4
5
6
7
// get(请求方式) /persons/{username}
      parameters:
        - name: username
          in: path          //这里path表示路径请求
          required: true    //这个表示路径参数必须填写,默认为false表示这个路径是可选填的
          description: The person's username
          type: string

json-server通过REST路由操作JSON文件数据库 JSONPlaceholder用于测试和原型的简单假REST API服务器。 fake-api-server跟JSONPlaceholder一样,是用于测试信息的测试服务器 ssr这个和上面的 json-server 异曲同工之妙,这不过这个既可以当作静态网站服务器,也可以提供 本地数据mock 用于测试开发 这个可以配合mock...

简单用法 123456789101112/* 向具有指定ID的用户发出请求 *///其实和jq的ajax差不多 then 是成功返回执行其后任务,catch捕捉错误//其实就是 Promise 可以进行并发操作的 axios.all(iterable) 其实就是 promise.all()axios.get('/user?ID=12345') .then(functio...

聚焦一个焦点,判断键值这么写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/Vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload = function () {
            var vm = new Vue({
                el: '#box',
                data: {},
                methods: {
                    show: function (ev) {
                        if(ev.keyCode==13){
                            alert('你按了回车键！')
                        }
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <input type="text" @keyup="show($event)">    <!-- 这里 @keydown 也是可行的-->
</div>
</body>
</html>

参考文档TimelineMax系列学习文章TimelineMax：Tweening简介GSAP官方参考文档Easing缓动演示

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。“use strict” 的目的是指定代码在严格条件下执行。 会限制一些写法,并且提示一些错误.据说可以加速js的运行速度具体改进了那些内容可以看第二个文章.里面写的特别详细了. 为什么使用”use str...

这个东西用起来简单并且强大,不过现在可能不太流行了.因为这个配合jquery比较多.

直接随机产生数据

1
2
3
4
5
6
7
8
9
10
11
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

这两个说有用也有用,说没用也没用,这是因为必须这个类支持这两个方法才能用,如果不支持是用不了的现在又有个什么Composition 不过这个还没来得及看 mixin 1234var _ = require('lodash');var _db = require('lodash-id');_.mixin(_db); extend 12//_应该是l...

简单说明

想用js开发桌面现在有两个框架可以用 Electron 另外一个是 nwjs.
但感觉还是用 Electron比较好,因为现在一些流行的软件是那这个弄的,比如说我现在用的 Atom ,VSCode 这两个软件都非常好用,而且漂亮.
另外还有个原因是,他有中文文档.这样实在是方便太多了

编写

这里主要编写个 Electron 启动配置文件.是 package.json 里的 main 字段的文件.
注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。
剩下的就是编写自己的程序了就行了.

贴两个配置文件样本.
一 这是官方的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const { app, BrowserWindow } = require('electron')
const path = require('path');
const url = require('url')

// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win

function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({ width: 800, height: 600 })

    // 加载应用的 index.html。
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'dist/index_prod.html'),
        protocol: 'file:',
        slashes: true
    }))
    //win.loadURL('http://localhost:8080')

    // 打开开发者工具。
    win.webContents.openDevTools();

    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在这文件，你可以续写应用剩下主进程代码。
    // 也可以拆分成几个文件，然后用 require 导入。
    if (win === null) {
        createWindow()
    }
})

// 在这文件，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            //执行成功后 执行这个回调
            resolve('随便什么数据');
            //reject是失败
        }, 2000);
    });
    return p;            
}
runAsync().then(function(data){
    console.log(data+'-------');
    //后面可以用传过来的数据做些其他操作
    //......
});

功能相同

1
2
3
4
5
6
7
8
9
10
function runAsync(callback){
    setTimeout(function(){
        console.log('执行完成');
        callback('随便什么数据');
    }, 2000);
}

runAsync(function(data){
    console.log(data);
});

优点:

效果也是一样的，还费劲用Promise干嘛。那么问题来了，有多层回调该怎么办？如果callback也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个callback2，然后给callback传进去吧。而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

这是篇转发,因为原文写的实在是太明白了. http://cnodejs.org/topic/507285c101d0b80148f7c538 开始学习child_process模块的时候以为spawn可以直接运行命令, 后来发现这是一个小陷阱就拿出来和大家分享一下. 先说下我碰到的情况由于在windos下写的所以根据docs上的例子我就写出了这么一句代码:”require(“child_...

vue组件模版编写规则

main.vue 在组件里 所有的样式必须放在一个 <div></div> 标签里 否则会出错.
这个标签可以指定 默认为 class=index 这个看教程时已经知道,只是做的时候又给忘记了

vue组件开始之前执行组件方法的方法.呵呵

  1. Vue.nextTick(function () { })

    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 因为有的插件需要操作DOM 但是DOM还没创建出来时 会出现问题 这个也是如此无法用this 我理解的关于Vue.nextTick()的正确使用

  2. created:function(){}

    这个也可以的 这是钩子程序 但是这个时期 DOM没有创建出来

  3. mounted: function (){}

    这个也是vue生命周期中一个钩子,这个就是加载完组件,生成了DOM的时候,所这个可以用,需要对DOM进行操作的程序可以放在这里执行

1
2
3
4
5
6
7
8
// 记性真是不好上一次还知道怎么用,下一次就又忘了 现在放在这
export default {
    mounted: function () {
        particlesJS('particles-js', particles_config)
    },
    methods: {
    ...
    }

一个例子 自己弄的小方块 粒子波动 参考文档three.js中文文档WebGL入门教程1 - 3D绘图基础知识 学习文章three.js实现的波浪效果WebGL学习笔记-使用3D引擎threeJS实现星空粒子移动 第一篇就画一个球体吧Three.js基础探寻四——立方体、平面与球体

魔幻线条curvejs 这个感觉实用性不强

粒子特效插件particles-自己的文章
JParticles是多个特效的一个整合

shape-shifter 用粒子组成文字
shape-shifter Demo

anime.js 动画库 其实跟上面的不同 但可以用这个做许多特效 而且例子不错

GreenSock-JS 动画库 这个动画的例子真的很棒
GreenSock-JS DEMO
TweenMax的实例
TweenMax的实例2

看来TweenMax用来做菱形这个背景应该是很拿手的 有空可以看一下

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 动画容器 -->
<div id="particles-js"></div>
<!-- 库引入 -->
<script src="particles.js"></script>
<!-- 配置及使用 -->
<script src="app.js"></script>

<style>

/*
这句很关键 如果不设置的话大小总会出现偏移的 不过按照官方的说应该是 #particles-js 也就是容器id 可不知道为啥是canvas类名
还有个问题就是我这个文件不知道从哪里来的,好像跟从官方复制的不一样,把Github上的复制到文件里就报错了
*/
.particles-js-canvas-el {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    /*z-index:-1;*/ /*有的说这句必须加 要不会阻挡前面内容 不过我这次用的时候没出现 反而会多退后一层*/
}
</style>

注意: 如果下次样式还出现偏移,就按原来官方的试试 使用#particles-js 写样式

slice(开始位置,结束位置) //选取元素 //返回选取元素splice(开始位置,要删除个数,替换元素[可选]) //删除一些元素 //不返回,会把原数组改变splice(开始位置,要删除个数,替换元素[可选]) 这个是删除后返回原数组 而slicen()根本不改变原数组 而是将选取赋予一个变量才行 var arr1 = arr.slicen(1,2); 运行结果 参...

打算用vue开发个单机小程序,于是这个数据库选择就是个问题了.看到这个小程序 notepad 他是用的 localStorage 不过这个存储有大小限制 不太适合我的要求.于是,就看到了SqLite与MongoDB, 这两个各有优点,确实不好选. MongoDB: 这个与Node.js联系紧密,速度很快,不过据说特别占空间,而且好像是运行在内存中,如果要保存在硬盘还需要特别操作,没用过所以具...

下面参考文档第一个,有详细的增删改查的方法,因为我暂时还没使用过所以先不写心得了.这里值得一提的是:原始的使用方法很是繁琐,这里有个推荐的插件是 Mongoose,这里安装也很简单,和其他node模块一样. npm install mongoose --save.可以尝试下.更多的mongoose使用看这里 ongoose文档.这篇文章也不错 Mongoose学习参考文档——基础篇 参考文档...

新一代戰神 Yarn 終於在昨天出爐了，Yarn 跟 Npm 一樣都是 JavaScript 套件版本管理工具，但是 Npm 令人詬病的是安裝都是非常的慢，快取機制用起來效果也不是很好，所以 Yarn 的出現解決了這些問題，透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/)，也就是只要安裝過一次，下次砍掉 node_modules 目錄重新安...

vue-markdown-loader vue插件 转换md文件成网页Github地址 TheaterJS 打字输入效果的插件Github地址 cooking 快速简易配置webpa 让你快速开始开发前端官方文档Github地址 Layer layer是一款近年来备受青睐的web弹层组件官方网站 SweetAlert2 强大的纯Js模态消息对话框插件 DEMO展示github地址 ...

第一步：npm config get prefix ，获取输出path C:\Users\jaxGu\AppData\Roaming\npm加上\node_modules用于第二步值 第二步：添加系统环境变量：NODE_PATH:C:\Users\jaxGu\AppData\Roaming\npm\node_modules 第三步：关掉命令行，重新打开。 参考文档『奇葩问题集锦』C...

方法说明：将参数 to 位置的字符解析到一个绝对路径里。 1path.resolve([from ...], to) 简介当使用插件不在标准路径的时候,可以使用这个函数方便的引入. 由于该方法属于path模块，使用前需要引入path模块（var path= require(“path”) ）接收参数：from 源路径to ...

简介Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。 它比 $.animate(...

简介( ′◔ ‸◔`) 以前看过这个,不过时间长了,就记不清了. easing就是模拟物理动作模型.从图片来看就更清楚了.http://www.runoob.com/jqueryui/api-easings.html在这里能看到,每个动作的演示,点击每个图片就能看到了 easing参数可选的值就有以下32种： linear swing easeInQuad easeOutQuad eas...

使用 Access-Control-Max-Age 来缓存 CORS 配置使用withCredentials发送跨域请求凭据Access-Control-Allow-Origin与跨域HTTP访问控制(CORS)

前言ECMAScript 6 简单来讲就是一个javascript的标准版本,和现用版本不是很相同.而且由于浏览器支持的不同,很多新写法都不支持.只有等标准化完成后,统一了才能更实用.现在一般的情况是用babel进行转化兼容使用,这个可以用webpace做到,不过最新可以用cooke做了. 参考文档ECMAScript的基础概念ECMAScript 6简介

官方现在已经有了中文,而且文档比较完善了,参考还是看官方吧webpace官方网站 几个问题 webpack-dev-server 不会生成文件到 output 目录里 而是生成到内存里 webpack-dev-server 用命令行比Node.js Api方式简单太多了.Node.js Api方式还需要安装各种插件 webpack-dev-server 各种配置解释参考官方文档 特别全 ...

Velocity.js是一款jquery动画引擎插件，它拥有与jquery中的$.animate()相同的API，还打包了颜色动画，转换，循环，easing效果，类动画、滚动等功能，因此大家可以像使用$.animate()方法一样使用velocity，您可以快速的上手velocity.js。简单点说：Velocity就是实现页面元素中的飞入，飞出，旋转、颜色变换，esaing效果的jquer...

chrome调试,必须在配置文件里打开调试的选项.遇到显示手机不显示页面,说明安卓4.4以下系统.白屏是因为必须翻墙 调用入口页面,也就是首页.可使用下面方法.12// 查找应用首页窗口对象var h=plus.webview.getWebviewById( plus.runtime.appid ); 预加载时,id和url都必须的设置.要不真机调试时不会出错.打包后会出现空页面.这次...

这个教程是单独使用,并不是和webpace配合的那种.这个视频讲的非常详细.但是这个视频比较早期了,所以有些东西已经不适用了.比如那个 browser.js 的位置,已经不在那里了.如果想用就用https://cdnjs.com/ 从外在引用好了.但是有个问题是报错了,不知道什么引起的.而且chrome浏览器已经支持一些方法了,根本不需要babel,IE是不行的. 参考教程官方网站

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 12var a = [1,2,3,4];a.push(5); //a 现在是1,2,3,4,5 concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 123456var a = [1,2,3,4];var b = [5,6];var c = a.concat(b);...

vue 和 vue2 在 props 使用上面有些不同,在 vue2 里,模版传递过去的值,必须在 html 标签里,否则不显示.而vue使用时没有这个限制.还有就是 <child message="hello!"></child> 必须用双引号,单引号可能会出现问题.再有就是 这个表示的是传递一个字符串,如果要传vue内data数据,必须绑定 &...

cooking 更易上手的前端构建工具 cooking可以简单的配置一个webpace,而且中文文档很详细,的确是比配置webpace更简单.呵呵,接触构建工具比较晚. 发现一个比一个容易,gulp,webpace,cooking.新东西就是好啊. 简单安装首先确保是在 NPM 3+, Node 4+, Python 2.7+ 环境下运行 第一步：安装 cooking 命令行工具 n...

一些经验自动刷新问题:用 vue-cli 建立的vue项目,配合 webpack 测试时, webpack 可以自动更新浏览器输出结果,但是 vue.js 的数据修改,是不会显示在浏览器中的,必须手动刷新才行.比如下面例子 12345678910111213141516171819<template> <div class="hello"> ...

今天遇到这个 !~id.indexOf('category-detail') 以前没碰到过,不是很理解.后来一查明白了,这是位移运算符. 运算符就是完成操作的一系列符号，它有七类：赋值运算符 =,+=,-=,*=,/=,%=,<<=,>>=,|=,&=、算术运算符 +,-,*,/,++,--,%、比较运算符 >,<,<=,&g...

原因就是chart.js需要Chart.bundle.js支持. 不过 vue-admin 把chart.js设置成不解析依赖的了,所以就会报错.这个配置就在 79 行. webpace.base.conf.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495...

parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果： 123456789JSON.parse(str)Objectage: "23"name: "...

大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上console.log

先的简单介绍一下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台
This is a picture without description

前言

这里只总结了一些只针对APP页面开发的框架.像妹子UI,ZUI,semantic-ui等一些既能开发pc端页面,也能开发APP页面的框架,就不在这里记录了. 可以看这里 不错的前台框架 总结 Semantic UI,slicy,Amaze ui 等等

总结介绍

MUI: 这是个新的UI,应该是国产的.而且还有一整套解决方案.而且有个不错的IDE,所以这个以后可以试试.后台用的是自己的 HTML5+替代手机浏览器内核也就是增强版,Native.js为调用手机硬件的js插件

参考文档
MUI网站
官方主网站

Ionic: 这个不光是个UI库 他和 AngularJS 结合特别深.所以可以算是一套APP解决方案.其他的 UI框架都必须用jquery,Zepto.js,React 等js框架才能使用.

参考文档
官方网站
Ionic开发实战
ionic 安装 | 菜鸟教程

framework7: 这个刚开是因为类似IOS原生页面受到瞩目,而且速度很快.现在也支持安卓,不过貌似不是那么特别好.

参考文档
官方网站

Mint UI: 基于 Vue.js 的移动端组件库 这个可以快速开发不过就是太简单了 不够好看
官方网站

安装很简单,全局安装这样就可以使用 apidoc 的命令了npm install apidoc -g 使用 首先必须在项目根目录建立个 apidoc.json 的配置文件.里面大概这么写. 1234567{ "name": "lumen-api-demo", "version": "0.1.0&q...

let 和 var 是一样的用于定义,最主要的是 let 是javascript 严格模式. 主要区别如下: 作用范围不一样, var是全局的, let是局部的. 而且使用严格模式,文件开头一定要声明 ‘use strict’; 否则会报错. 还有必须先声明再使用. 在同一作用域,重复声明会报错. 参考文档深入浅出ES6（十四）：let和const在JavaScript ES6中使用le...

最近一直在高前端,所以难免会在Github上用别人的工具.但是现在好多高前端都用一些高大上的东西,node什么的还好说,前段用gulp,最近又开始流行webpace,真是时代潮流不好追啊.而且有些人文档写的很简略,再加上中国的网络情况,有时你弄下来却是各种的不好使.真是头疼.这里总结下别人的东西怎么用. 先 npm install 把依赖都安装好 最好先用npm install 如果有装不...

箭头函数 这是es6新建的 就是匿名函数的简写,当然还有些区别没有细研究. 第一个参数是本身的形参 123456789101112131415config.map(nav => { if (nav.groups) { nav.groups.map(group => { group.list.map(page => ...

12345678910111213141516171819202122232425262728293031323334353637383940function bb(){ alert('bb');}var b = new bb();function cc(){ return 1;}var dd=function()...

Vue.js教程浅谈Vue.jsvue.js学习笔记1 – 搭建vue.js本地开发框架vuejs-learn

这套教材非常好 非常适合我.
Webpack傻瓜式指南（一）
Webpack傻瓜指南（二）开发和部署技巧
Webpack傻瓜指南（三）和React配合开发

不过有个小问题: 里面的方法不能加括号app.appendChild(sub()); 这个应当这么写 app.appendChild(sub); 这个错误原因可能是他手误了 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//之前
//只需要 sub
//这个是CommonJS风格代码
function generateText(){
	var element = document.createElement('h2');
	element.innerHTML = "Hello hddddaa world";
	return element;
}
module.exports = generateText();

--------------------------------------------------------------------
//后面
// 所以需要sub()
//这个是ES6风格代码
export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}

Vue Start Kit: 一个国内搞的用 Vue+Bulma UI 开发的后台模版.不过我在本地测试时报错 已经没问题了,必须用cnpm 安装node-sass才可以.
Demo地址: http://vue-kit.gismall.com/
This is a picture without description

一些总结吧

  • 父组件和子组件之间通信用广播: vue可以用多种方法实现组件间沟通,比如用一个属性,
    不过这必须用上同步 :test.sync 要不然子组件的状态父组件不知道.
    但是这有个问题就是不利于解耦,捆绑太紧密了不能复用了,所以还是用广播.
    不过还是有个小小的疑问,如果两个同名事件怎么办呢?? 按文档里说是第一个,那可能是父组件加载子组件的顺序吧
    我想可能是这样的,如果存在同名的话,那就得手动调整顺序,我感觉最好不要同名.

  • v-bind:fields=”columns” 绑定解释: 有时用简写就比较懵,简单记忆下: 如果原有属性就是绑定属性到vue属性.如果不是自带属性,那就是组件自定义的.比如 :fields="columns" 这里就是一个. fields 子组件 : columns 父组件. 反正等号后面都是当前组件的.可以看下面例子.

Vue.js: 轻量级js 数据驱动的组件，为现代化的 Web 界面而生.这类js框架都是应用比较大型功能类网站,有点类似webapp.或者单页面程序,比如我现在用的听歌浏览器插件. 他的做法是把某个功能开发成个组件,这个组件包括了模版,css,js,然后打包在一起.通过很多组件的组合,到达一个功能类网站,这样就非常的灵活了.这个主要针对pc端. 参考文档官方网站对比其它框架Vue.js：...

仓库在这里 重要提示: 一定要完整版,因为精简版会把开发部分去掉,所以不支持这个. 只支持chrome,所以去chrome商店去下载吧 安装完成后,必须进入chrome扩展工具选项里,找到vue-devtools把下面的 允许访问文件网址 勾选上 这样用F12打开开发工具栏,最后一项就能看到 vue-devtools的身影了.

前言 现在框架都放弃了IE9以下的浏览器,不过中国的环境大家都知道的,没办法还是尽量满足吧. 简介禁用IE兼容模式 1234<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.....

前言

js的数组和php有些不同,他的定义方法,自定义下标只有一种方法 var arr['a'] = 1,不能像php一样 $arr = ['a'=>1],还有种没有下标的自定义方法 就是下面方法一那种方法

方法一：直接定义并且初始化，这种遇到数量少的情况可以用

1
var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]

前言最近看别人的框架遇到一些别人的写法,虽然很直白,但是以前没遇到过,还是有点懵.不知道这种写法是遵从那那些编写规则,反正记录一下已被后面查找. 简单说明123456789101112131415//其实这个很直白了 因为一般bool值 表示 ture 为 1 false 为 0!0 == true !!0 == false //但是 !0 === true 这是错的 恒等于 是不会转义类型...

前言今天脑袋陷入了打结中,jquery改变样式.遇到一个什么情况,css是个元素样式,不是针对具体的某个类,并且后添加的样式,通过jquery无法找到,所以想改这个样式特别麻烦. 解决与思考 jquery只能选定出现在DOM上的元素来更改他的css样式.为什么这么说呢,css的写法是这样的,一般先是定义一个根类,然后在子类再去分别定义特殊属性.如果这样的话,jquery能选择操作子类的样式...

这里唯一要点是 substr() 是截取字符串,不过和php不同的是 第二个参数不能为负数,也就是不能倒着数.所以只能用字符串长度减去要减掉的长度,得到截取的位置 12var uri = 'F:\phpStudy\WWW\kod\static\js\lib\editormd\css';uri.substr(0,(uri.length-11))

结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。 也就是说 这三个工具是组合各个组件的工具,最后打包成最后代码 CommonJS 规范: 是同步加载模块AMD 规范: AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。 前言 JavaSript...

前言 在修改kod时遇到这个,不太了解作用于是查了下资料,详细看这里 JS魔法堂：从void 0 === undefined说起 简单说下 在js函数里 return void 0 表示此函数无返回. 还有就是 undefined在JavaScript中并不属于保留字/关键字，因此在IE5.5~8中我们可以将其当作变量那样对其赋值（IE9+及其他现代浏览器中赋值给undefined将无...

前言 开发时突然遇到js语句里很多逗号,一下子搞蒙了.才想起来,没有仔细研究过这个东西. 简单说明 直白的说,没有return时,返回最左边结果,有return时返回最右边结果,当return最后一个参数为void 0,将只执行操作无返回 《javascript权威指南(6版)》说逗号运算符（,）：先计算左边的操作数，然后计算右边的操作数，最后返回右操作数的值。比如 var a=(1+1...

前言

现在大部分前端开发,都用npm或者bower.因为这样不仅升级组件方便,而且兼容性也能得到保障.但是对于简单开发来说,过于庞大的组件也是比较麻烦的.所以这个Sea.js还是有一定存在价值的.

我也是在KodExplorer里发现这个插件的.没有太多使用,所以这里就点一下,以便以后记住.如果需要用就看官方吧,里面文档很详细的.