前言
本文是平时遇到的技术问题和学习到的新知识，还未有时间归类整理，放在该文章中记录。
都是比较重要的知识点！！！
i18国际化
一个Vue.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
|
npm install vue-i18n --save
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
en: {
message: {
hello: 'hello world'
}
},
cn: {
message: {
hello: '你好，世界'
}
}
}
const i18n = new VueI18n({
locale: 'en',
messages,
})
new Vue({
el: '#app',
router: router,
i18n: i18n,
render: h => h(App)
});
<template>
<div class="index">
<p>{{ $t("message.hello") }}</p>
</div>
</template>
|
git拉去分支代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| git clone
git branch
git branch -a
git checkout -b 本地分支 origin/远程分支
git pull origin dev
git push -u origin dev
|
vue-admin的node-sass安装失败
1
2
3
4
5
6
7
8
9
10
11
|
npm install --registry=https:
npm uninstall node-sass
cnpm install
npm i node-sass --sass_binary_site=https:
npm install --registry=https:
|
export导入导出一体
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
export let a = 1
export let b = 2
export {a as c, b} from './a.js'
<script type="module">
import {c, b} from './b.js'
console.log(c, b)
</script>
export { default as a } from './a'
|
单点登录
使用弹力盒子是多个flex布局时会出现宽度不自适应
1
2
3
4
5
6
| max-width: 1000px;
width: 100%;
// 或者
max-width: 100%;
width: 1000px;
|
npm 和 yarn配置镜像源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
npm config set registry=https:
npm config set sass_binary_site=https:
npm config set phantomjs_cdnurl=https:
npm config set electron_mirror=https:
yarn config set registry https:
yarn config set disturl https:
yarn config set sass_binary_site https:
yarn config set electron_mirror https:
yarn config set puppeteer_download_host https:
yarn config set chromedriver_cdnurl https:
yarn config set operadriver_cdnurl https:
yarn config set phantomjs_cdnurl https:
yarn config set selenium_cdnurl https:
yarn config set node_inspector_cdnurl https:
|
yarn和npm命令对比
| npm |
yarn |
npm install |
yarn |
npm install react --save |
yarn add react |
npm uninstall react --save |
yarn remove react |
npm install react --save-dev |
yarn add react --dev |
npm update --save |
yarn upgrade |
npm install -g @vue/cli |
yarn global add @vue/cli |
vue的$set
原生的match方法
1
2
3
4
5
6
7
8
9
10
11
12
|
var str="Hello world!"
console.log(str.match("world"))
console.log(str.match("worlld"))
var books = ['vue','JavaScript']
books = books.filter(function (item) {
return item.match(/JavaScript/);
});
console.log(books)
|
vuecli使用webstorm中@快捷跳转不了
- 要将node_modules文件接触排除
- 设置先禁用webpack，（
webstorm -> preference -> language & frameworks -> javascript -> webpack）再次打开重启后在下方事件日志会弹出信任webpack的选项点击确认
- 手动选择webpack配置文件，选择
（node_modules -> @vue -> cli-service -> webpack.config.js）
- 注意可能是没有配置@别名，在vue.config.js（但是新版不用，不是主要原因）
组件的双向绑定
1.父子组件的自定义双向v-model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<template>
<h1>{{ msg }}</h1>
</template>
model:{
prop:'msg',
event:'parent-event'
},
props:{
msg:String
},
mounted(){
let newMsg = '新值'
this.$emit('parent-event', newMsg);
}
}
<children v-model="parentMsg"></children>
|
2.父子组件的自定义多个双向值.sync
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template><h1>{{ msg }}</h1></template>
props:{
msg:String
},
mounted(){
let newMsg = '新值'
this.$emit('update:msg', newMsg);
}
<children :msg.sync="parentMsg"></children>
|
package.js介绍
参考：https://juejin.cn/post/6987179395714646024
package.json文件是一个JSON对象
| 写法 |
版本说明 |
| 固定版本（1.1.1） |
只安装指定版本 |
| 波浪号（~1.1.1） |
安装1.1.x最新版本 |
| 插入号（ˆ1.1.1） |
安装1.x.x的最新版本 |
注意：当大版本号为0时，插入号的行为与波浪号相同
处于开发阶段，次要版本号变动可能带来程序的不兼容。
1
2
3
4
5
|
npm install -g npm-check-updates
ncu
ncu -u
ncu -a
|
node中的path的方法
1
2
3
4
5
6
7
|
path.join(__dirname,'src')
path.resolve(__dirname, "/src")
|
props数据验证
采用对象写法数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。
type也可以是一个自定义构造器，使用instanceof检测。
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
| Vue.component('my-component', {
props: {
propA: Number,
propB: [String, Number],
propC: {
type: Boolean,
default: true
},
propD: {
type: Number,
required: true
},
propE: {
type: Array,
default: function () {
return [];
}
},
propF: {
validator: function (value) {
return value > 10;
}
}
}
});
|
jquery的jsonp的使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $.ajax({
url: "http://xxx.com?id=xxx"
type: "GET",
data: { name: 'moxie'},
dataType: "jsonp",
jsonpCallback: 'globalCallback',
success: function (data) {
var result = JSON.stringify(data)
console.log(result);
},
error: function (err) {
console.log(err)
},
complete: function (data) {
console.log(data)
}
});
function globalCallback(result) {
console.log(result)
}
|
具名插槽和作用域插槽一起使用
1
2
3
4
5
6
7
8
9
10
| <!-- 子组件的插槽中: msg是要传递给父组件的值 name是该插槽的名字-->
<slot :msg="message" name="child">默认要显示的内容</slot>
<!-- 父组件child组件标签的template标签上: -->
<child>
<template v-slot:child="{ msg }">
<h2>{{ msg }}</h2>
</template>
</child>
|
表格的相关样式
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
| table {
width: 100%;
text-align: center;
border-spacing: 0;
border-collapse: collapse;
color: #5a5a5a;
table-layout: fixed;
}
table thead { background-color: #d9edf7; }
table td,table th {
border:1px solid #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<table>
<caption>我是表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>姓名</th>
</tr>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>测试</td>
</tr>
</tbody>
</table>
|
禁止生成package-lock.json文件
1
2
| npm config set package-lock false
npm config set package-lock true
|
element ui的表格格式化
1
2
3
4
5
6
7
8
| <!--封装列时的格式化数据（formatter）-->
<el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
formatter(row, column) {
if(column.property==='address'){
return '处理后的值'
}
}
|
作用域插槽案例
作用：复用模板替换已渲染元素。
如：列表组件中，允许组件自定义应该如何渲染列表每一项。
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
| <div id="app">
<my-list :data="books">
<template v-slot:book="props">
<li>{{ props.bookName }}</li>
</template>
</my-list>
</div>
<script>
Vue.component('my-list', {
props: {
data: {
type: Array,
default: function () {
return [];
}
}
},
template: '<ul><slot name="book" v-for="book in books" :book-name="book.name"></slot></ul>'
});
var app = new Vue({
el: '#app',
data: {
books: [
{ name: '《Vue.js实战》' },
{ name: '《JavaScript高级程序设计》' }
]
}
})
</script>
|
递归组件
组件在它的模板内可以递归地调用自己，只要给组件设置name的选项就可以了。
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
|
<template>
<div id="app">
<Child :count="0"/>
</template>
<script>
import Child from '@/views/Child'
export default {
name: 'App',
components: { Child },
</script>
<template>
<div class="child">
<div>{{ count }}</div>
<Child v-if="count<3" :count="count+1"/>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
count: {
type: Number,
default: 0
}
},
}
</script>
|
内联模板（vue3移除）
缺点：作用域比较难理解，建议不要轻易使用内联模板。
组件标签使用inline-template特性，组件就会把它的内容当作模板。
父组件里面写内容可以读取到父组件与子组件的数据（如果同名，优先使用子组件的数据）
vue项目的断点调试
使用浏览器devtool中的Sources下，左侧的webpack://目录中，可以找到对应的代码。
重要：在js代码中直接输入debugger浏览器则会直接运行到这里进行断点。
webstorm快捷键
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 下面是Webstorm的一些常用快捷键：
单行代码注释：Ctrl+/
多行注释：Ctrl+Shift+/
格式化代码：Ctrl+Alt+L
复制行：Ctrl+D
删除行：Ctrl+Y
替换文本：Ctrl+R
查找文本：Ctrl+F
代码折叠：Ctrl + 或者Ctrl Shift +
代码展开：Ctrl - 或者 Ctrl Shift -
代码右移：Tab键（快捷生成代码）
代码左移：Shift+TAB键
代码上移：Shift+Alt+方向键上
代码下移：Shift+Alt+方向键下
长按Alt+鼠标点击不同处再放掉Alt，可以同时编辑多处
|
正则表达式中
1
2
3
4
5
6
|
const check1 = /.js$/
const check2 = /\.js$/
const str = 'ajs'
console.log(check1.test(str))
console.log(check2.test(str))
|
vue的Render函数
掘金Render
Virtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
Vue的Render函数和React的一样，也就是jsx，Render函数创建HTML，通过createElement参数来创建Virtual Dom，结构精简。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div id="app">
<anchored-heading :level="1">Hello world!</anchored-heading>
</div>
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
})
var app = new Vue({
el: '#app'
})
|
createElement参数
第1个参数: { String | Object | Function }—-（示例如下）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Vue.component('custom-element', {
render(createElement) {
return createElement('div', 'hello world!')
}
})
Vue.component('custom-element', {
render(createElement) {
return createElement({
template: `<div>hello world!</div>`
})
}
})
Vue.component('custom-element', {
render(createElement) {
const elFn = () => ({ template: `<div>hello world!</div>` })
return createElement(elFn())
}
})
|
vue插件
注册插件需要install方法，第一个参数是Vue构造器，第二个参数是一个可选的选项对象。
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
| MyPlugin.install = function (Vue, options) {
Vue.component('component-name', {
})
Vue.prototype.$Notice = function () {
}
Vue.globalMethod = function () {
}
Vue.mixin({
mounted: function () {
}
})
}
Vue.use(MyPlugin)
Vue.use(MyPlugin, {
})
|
vue中央处理事件
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
const install = function (Vue) {
const Bus = new Vue({
methods: {
emit (event, ...args) {
this.$emit(event, ...args);
},
on (event, callback) {
this.$on(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
}
});
Vue.prototype.$bus = Bus;
};
export default {install};
import VueBus from './vue-bus';
Vue.use(VueBus);
<template>
<div>
{{ number }}
<button @click="handleAddRandom">随机增加</button>
</div>
</template>
methods: {
handleAddRandom () {
const num = Math.floor(Math.random () * 100 + 1);
this.$bus.emit('add', num);
}
}
<template>
<div>随机增加：
<Counter :number="number"></Counter>
</div>
</template>
import Counter from './counter.vue';
export default {
components: {
Counter
},
methods: {
handleAddRandom(num) {
this.number += num;
}
},
data() {
return {
number: 0
}
},
created() {
this.$bus.on('add', this.handleAddRandom);
},
beforeDestroy() {
this.$bus.off('add', this.handleAddRandom);
}
}
|
