总结
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。
这里分享一些前端学习笔记：
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
import { Photoshop } from 'vue-color'
new Vue({
components: {
'photoshop-picker': Photoshop
}
})
//用法
var colors = {
hex: '#194d33',
hex8: '#194D33A8',
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1
}
// 或
var colors = '#194d33'
// 或
var colors = '#194D33A8'
// 或
var colors = { h: 150, s: 0.66, v: 0.30 }
// 或
var colors = { r: 255, g: 0, b: 0 }
// 等等...
new Vue({
el: '#app',
components: {
'material-picker': material,
'compact-picker': compact,
'swatches-picker': swatches,
'slider-picker': slider,
'sketch-picker': sketch,
'chrome-picker': chrome,
'photoshop-picker': photoshop
},
data () {
return {
colors
}
}
})
=========================================================================================
//安装
npm install vuejs-datepicker --save
//引入
import Datepicker from 'vuejs-datepicker';
export default {
// ...
components: {
Datepicker
}
// ...
}
//用法
var colors = {
hex: '#194d33',
hex8: '#194D33A8',
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1
}
// 或
var colors = '#194d33'
// 或
var colors = '#194D33A8'
// 或
var colors = { h: 150, s: 0.66, v: 0.30 }
// 或
var colors = { r: 255, g: 0, b: 0 }
// 等等...
new Vue({
el: '#app',
components: {
'material-picker': material,
'compact-picker': compact,
'swatches-picker': swatches,
'slider-picker': slider,
'sketch-picker': sketch,
'chrome-picker': chrome,
'photoshop-picker': photoshop
},
data () {
return {
colors
}
}
})
====================================================================================
//安装
npm install vue-switches --save
//引入
import Switches from 'vue-switches';
new Vue({
components: {
Switches
},
data () {
return {
enabled: false
}
}
};
//使用
| Prop | 描述 |
| --- | --- |
| label | 始终显示打开或关闭的静态标签。 |
| text-enabled | 启用时显示的文本。 |
| text-disabled | 禁用时显示的文本。 |
| theme | 使用哪个主题。 |
| color | 使用哪种颜色。 |
| type-bold | 更大的风格。 |
| emit-on-mount | 默认情况下，当组件挂载时会发出“更改”事件。要禁用此功能，请将其设置为 false。 |
======================================================================================
//安装
npm install vue2-dropzone
//引入使用
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
name: 'app',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
dropzoneOptions: {
url: 'httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 0.5,
headers: { "My-Awesome-Header": "header value" }
}
}
}
}
==========================================================================================
//安装
npm install --save vue-circle-slider
//引入
import Vue from 'vue'
import VueCircleSlider from 'vue-circle-slider'
Vue.use(VueCircleSlider)
//用例
//插件将注册一个带有名称的全局组件
//自定义一些属性：
<circle-slider
v-model="sliderValue"
:side="150"
:min="0"
:max="10000"
:step-size="100"
:circle-width-rel="20"
:progress-width-rel="10"
:knob-radius="10"
用法功能基于 svg 的视图:
通过绑定v-model
定义最小值和最大值
定义步长
动画，同时按圈点击更新为新值
触控设备支持 ( touchmove)
尺寸定制：精确和相对定义
颜色定制
| Props | 类型 | 默认 | 描述 |
| --- | --- | --- | --- |
| side | Number | 100 | svg 正方形边的大小（以 px 为单位） |
| min | Number | 0 | 最小值 |
| max | Number | 100 | 最大值 |
| stepSize | Number | 1 | 值之间的差距 |
| circleColor | String | #334860 | 滑块圆周的颜色 |
| progressColor | String | #00be7e | 进度曲线的颜色 |
| knobColor | String | #00be7e | 旋钮颜色 |
| knobRadius | Number | null | 精确的旋钮半径（以 px 为单位） |
| knobRadiusRel | Number | 7 | 相对旋钮半径。以 px 为单位的半径值将计算为：(side/2) / knobRadiusRel |
| circleWidth | Number | null | 圆的精确宽度（以 px 为单位） |
| circleWidthRel | Number | 20 | 相对圆的宽度。以 px 为单位的宽度值将计算为：(side/2) / circleWidthRel |
| progressWidth | Number | null | 精确的进度曲线宽度（以 px 为单位） |
| progressWidthRel | Number | 10 | 相对进度曲线宽度。以 px 为单位的宽度值将计算为(side/2) / progressWidthRel |
==========================================================================================
//安装
yarn add vue-phone-number-input
//或
npm i --save vue-phone-number-input
//引入
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
Vue.component('vue-phone-number-input', VuePhoneNumberInput);
//用例
Props API：
| Props | Type | 必须 | 默认 |
| --- | --- | --- | --- |
| v-model | String/Int | true | - |
| id | String | false | VuePhoneNumberInput |
| color | String HEX | no | dogderblue |
| valid-color | String HEX | no | yellowgreen |
| error-color | String HEX | no | orangered |
| size | String | no | |
| default-country-code (1) | String | no | null |
| preferred-countries (2) | Array no | null | |
| ignored-countries | Array | no | null |
| only-countries | Array | no | null |
| no-validator-state | Boolean | no | false |
| no-flags | Boolean | no | false |
| disabled | Boolean | no | false |
| dark | Boolean | no | false |
| dark-color | String (hex) | no | #424242 |
| required | Boolean | no | false |
| error | Boolean | no | false |
| clearable | Boolean | no | false |
| loader (3) | Boolean | no | false |
| translations (4) | Object | no | null |
| countries-height (5) | Number | no | 30 |
| no-use-browser-locale (6) | Boolean | no | false |
| fetch-country (7) | Boolean | no | false |
| no-country-selector (8) | Boolean | no | false |
| border-radius | Number | no | 4 |
| show-code-on-list | Boolean | no | false |
| no-example | Boolean | no | false |
======================================================================
npm install react-tagsinput --save
//例子
import TagsInput from 'react-tagsinput'
import 'react-tagsinput/react-tagsinput.css' // If using WebPack and style-loader.
class Example extends React.Component {
constructor() {
super()
this.state = {tags: []}
}
总结
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这里分享一些前端学习笔记：
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
