W3C,HTML5,xhtml+css,div+css,ajax代码之美,始终努力坚持写出漂亮高效的代码!

4月10
类似vue中的template
组件没有实际的意义,可以理解为一个用来配合wx:if或者wx:for 渲染一个或多个view的块组件。
1.
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
[codes=javascript]
view1
view2
[/codes]
2.
类似 block wx:if ,也可以将 wx:for 用在 标签上,以渲染一个包含多节点的结构块。例如:
[codes=javascript]
{{index}}:
{{item}}
[/codes]
1.
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个
[codes=javascript]
[/codes]
2.
类似 block wx:if ,也可以将 wx:for 用在
[codes=javascript]
[/codes]
12月13
Vue2中的语法糖.sync:
在父组件中的<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级:
` handleClose() { this.$emit('update:title', newValue) }`
Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /:
针对于有参数的:<div v-model:title="visible" ></div>
等同于:<div :title="visible" @update:title="visible = $event" ></div>
Vue3中还针对于没有参数的v-model:
<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue,类似于:v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数,传入父级也是用modelValuethis.$emit('update:modelValue', newValue)
详情可以看Vue3的官方
12月12
先来看看Vue3的几种组件通信方式:
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法:
1、props
[codes=c#]
父组件
子组件
[/codes]
2、$emit
父组件
[codes=c#]
子组件
[/codes]
3、expose / ref
父组件
[codes=c#]
子组件
[/codes]
4、attrs
父组件
[codes=c#]
子组件
[/codes]
5、v-model
父组件(v-model可省略)
[codes=c#]
子组件
[/codes]
6. provide / inject
父组件
[codes=c#]
子组件
[/codes]
接下来是Vue2.x 组件通信使用方法:
1、 props
父组件
[codes=c#]
子组件
export default {
props:{
msg:{
type:String,
default:'这是默认数据'
}
},
mounted(){
console.log(this.msg)
}
[/codes]
2、.sync
[codes=c#]
父组件
[/codes]
3、v-model
[codes=c#]
父组件
[/codes]
4、ref
[codes=c#]
子组件
export default {
data(){
return {
name:""
}
},
methods:{
someMethod(msg){
console.log(msg)
}
}
}
父组件
[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
data(){
return { msg: "这是发给父组件的信息" }
},
methods: {
handleClick(){
this.$emit("sendMsg",this.msg)
}
},
}
父组件
// 或 简写
export default {
methods:{
getChildMsg(msg){
console.log(msg) // 这是父组件接收到的消息
}
}
}
6、children/parent
[codes=c#]
父组件
export default{
mounted(){
this.$children[0].someMethod() // 调用第一个子组件的方法
this.$children[0].name // 获取第一个子组件中的属性
}
}
子组件
export default{
mounted(){
this.$parent.someMethod() // 调用父组件的方法
this.$parent.name // 获取父组件中的属性
}
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ,然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()
// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex(这个就不举例子了........懂的都懂!)
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法:
1、props
[codes=c#]
父组件
子组件
[/codes]
2、$emit
父组件
[codes=c#]
子组件
[/codes]
3、expose / ref
父组件
[codes=c#]
子组件
[/codes]
4、attrs
父组件
[codes=c#]
子组件
[/codes]
5、v-model
父组件(v-model可省略)
[codes=c#]
子组件
[/codes]
6. provide / inject
父组件
[codes=c#]
子组件
[/codes]
接下来是Vue2.x 组件通信使用方法:
1、 props
父组件
[codes=c#]
子组件
export default {
props:{
msg:{
type:String,
default:'这是默认数据'
}
},
mounted(){
console.log(this.msg)
}
[/codes]
2、.sync
[codes=c#]
父组件
[/codes]
3、v-model
[codes=c#]
父组件
[/codes]
4、ref
[codes=c#]
子组件
export default {
data(){
return {
name:""
}
},
methods:{
someMethod(msg){
console.log(msg)
}
}
}
父组件
[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
data(){
return { msg: "这是发给父组件的信息" }
},
methods: {
handleClick(){
this.$emit("sendMsg",this.msg)
}
},
}
父组件
// 或 简写
export default {
methods:{
getChildMsg(msg){
console.log(msg) // 这是父组件接收到的消息
}
}
}
6、children/parent
[codes=c#]
父组件
export default{
mounted(){
this.$children[0].someMethod() // 调用第一个子组件的方法
this.$children[0].name // 获取第一个子组件中的属性
}
}
子组件
export default{
mounted(){
this.$parent.someMethod() // 调用父组件的方法
this.$parent.name // 获取父组件中的属性
}
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ,然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()
// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex(这个就不举例子了........懂的都懂!)
12月2
[codes=c#]
//testCp
//use testCp
[/codes]
//testCp
//use testCp
[/codes]
12月1
https://github.com/midwayjs/midway
Midway 是一个适用于构建 Serverless 服务,传统应用、微服务,小程序后端的 Node.js 框架。
Midway 可以使用 Koa,Express 或 Egg.js 作为基础 Web 框架。它还提供了独立使用的基本解决方案,例如 Socket.io,GRPC,Dubbo.js 和 RabbitMQ 等。
此外,Midway 也适用于前端/全栈开发人员的 Node.js 无服务器框架。构建下一个十年的应用程序。可在 AWS,阿里云,腾讯云和传统 VM /容器上运行。与 React 和 Vue 轻松集成。
Midway 是一个适用于构建 Serverless 服务,传统应用、微服务,小程序后端的 Node.js 框架。
Midway 可以使用 Koa,Express 或 Egg.js 作为基础 Web 框架。它还提供了独立使用的基本解决方案,例如 Socket.io,GRPC,Dubbo.js 和 RabbitMQ 等。
此外,Midway 也适用于前端/全栈开发人员的 Node.js 无服务器框架。构建下一个十年的应用程序。可在 AWS,阿里云,腾讯云和传统 VM /容器上运行。与 React 和 Vue 轻松集成。
11月26
[codes=c#]
:columns="columns"
:data-source="list"
:rowKey="
(record, index) => {
return index;
}
">
[/codes]
:data-source="list"
:rowKey="
(record, index) => {
return index;
}
">
[/codes]
11月25
[codes=c#]
import { defineAsyncComponent } from "vue"
// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))
// with options
const AsyncFooWithOptions = defineAsyncComponent({
loader: () => import("./demo.vue"),
loadingComponent: LoadingComponent,
errorComponent: ErrorComponent,
delay: 200,
timeout: 3000
})
[/codes]
声明
[codes=c#]
export declare interface AsyncComponentOptions {
loader: AsyncComponentLoader;
loadingComponent?: Component;
errorComponent?: Component;
delay?: number;
timeout?: number;
suspensible?: boolean;
onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
}
[/codes]
import { defineAsyncComponent } from "vue"
// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))
// with options
const AsyncFooWithOptions = defineAsyncComponent({
loader: () => import("./demo.vue"),
loadingComponent: LoadingComponent,
errorComponent: ErrorComponent,
delay: 200,
timeout: 3000
})
[/codes]
声明
[codes=c#]
export declare interface AsyncComponentOptions
loader: AsyncComponentLoader
loadingComponent?: Component;
errorComponent?: Component;
delay?: number;
timeout?: number;
suspensible?: boolean;
onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
}
[/codes]
11月25
package.json
[codes=c#]
"dependencies": {
"@ffmpeg-installer/ffmpeg": "^1.0.13",
"fluent-ffmpeg": "^2.1.2"
}
[/codes]
lib.js
[codes=c#]
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg');
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegInstaller.path);
// console.log(ffmpegInstaller.path, ffmpegInstaller.version);
module.exports = ffmpeg;
[/codes]
app.js
[codes=c#]
const ffmpeg = require('./lib');
// cmd: ffmpeg -stream_loop -1 -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 video.ts
const inputVideo = './video.mp4';
const outputVideo = './demo/video.ts';
var command = ffmpeg(inputVideo)
// set video bitrate
// .videoBitrate(1024)
// set aspect ratio
// .aspect('16:9')
// set size in percent
// .size('50%')
// set fps
// .fps(24)
.videoCodec('mpeg1video')
// set audio bitrate
.audioBitrate('128k')
// set audio codec
.audioCodec('mp2')
// 去掉声音
.noAudio()
// set number of audio channels
// .audioChannels(2)
// set custom option
// .addOption('-vtag', 'DIVX')
// set output format to force
.format('mpegts')
// setup event handlers
.on('end', function() {
console.log('file has been converted succesfully');
})
.on('error', function(err) {
console.log('an error happened: ' + err.message);
})
// save to file
.save(outputVideo);
[/codes]
代码见附件
JAVA版本https://github.com/freedomdebug/ffmpeg
[codes=c#]
"dependencies": {
"@ffmpeg-installer/ffmpeg": "^1.0.13",
"fluent-ffmpeg": "^2.1.2"
}
[/codes]
lib.js
[codes=c#]
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg');
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegInstaller.path);
// console.log(ffmpegInstaller.path, ffmpegInstaller.version);
module.exports = ffmpeg;
[/codes]
app.js
[codes=c#]
const ffmpeg = require('./lib');
// cmd: ffmpeg -stream_loop -1 -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 video.ts
const inputVideo = './video.mp4';
const outputVideo = './demo/video.ts';
var command = ffmpeg(inputVideo)
// set video bitrate
// .videoBitrate(1024)
// set aspect ratio
// .aspect('16:9')
// set size in percent
// .size('50%')
// set fps
// .fps(24)
.videoCodec('mpeg1video')
// set audio bitrate
.audioBitrate('128k')
// set audio codec
.audioCodec('mp2')
// 去掉声音
.noAudio()
// set number of audio channels
// .audioChannels(2)
// set custom option
// .addOption('-vtag', 'DIVX')
// set output format to force
.format('mpegts')
// setup event handlers
.on('end', function() {
console.log('file has been converted succesfully');
})
.on('error', function(err) {
console.log('an error happened: ' + err.message);
})
// save to file
.save(outputVideo);
[/codes]
代码见附件
JAVA版本https://github.com/freedomdebug/ffmpeg
11月23
[codes=c#]
Parsing error: Must use import to load ES Module: F:\project\xxx\node_modules\eslint-scope\lib\definition.js
require() of ES modules is not supported.
require() of F:\project\xxx\node_modules\eslint-scope\lib\definition.js from F:\project\xxx\node_modules\babel-eslint\lib\require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from F:\project\xxx\node_modules\eslint-scope\package.json.eslint
[/codes]
nodejs版本过高??
Parsing error: Must use import to load ES Module: F:\project\xxx\node_modules\eslint-scope\lib\definition.js
require() of ES modules is not supported.
require() of F:\project\xxx\node_modules\eslint-scope\lib\definition.js from F:\project\xxx\node_modules\babel-eslint\lib\require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from F:\project\xxx\node_modules\eslint-scope\package.json.eslint
[/codes]
nodejs版本过高??