零乱知识点
- css中的margin 或者 padding 值为4个、3个、2个、1个的时候，分别是什么意思？
以margin为例，padding同理；margin为4个时，margin：上 右 下 左；（为顺时针方向）margin为3个时，margin：上 左=右 下；margin为2个时，margin：上=下 左=右；margin为1个时，margin：上=右=下=左； - vue组件定义时必须在
new Vue(){el:"#app"}之前，否则没效果
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var app = new Vue({
el:"#components-demo",
data:{
message:'Vue'
}
})
这种是页面上无任何效果，然后还不给报错
var app = new Vue({
el:"#components-demo",
data:{
message:'Vue'
}
})
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
-
组件的全局注册和局部注册
全局注册的组件注册好了就可以直接使用，并且这些组件也可组成父子关系，缺点是当你使用webpack这样的构建系统时，就算有的组件没有使用，它也会被包含在最终的结果中，造成了用户下载的JavaScript的无谓的增加；局部注册的组件，如果一个组件要作为另一个组件的子组件。那么必须在另一个组件的components里面注册，并且如果这个子组件还想在其他地方使用（不作为其他组件的子组件），那么还需要在根组件中注册（el:“app”）这个里面。 -
定义组件的template时，如果是多个标签，比如有h 有 p那么可以使用``来定义，但必须放在一个
<div></div>里面包裹起来。另外，组件的注册一定是在组件使用之前，也就是注册要写在前面的代码里。 -
子组件的内联样式绑定一定在组件标签里v-bind进行，而不是直接在组件注册时的template里。
<childcomponent v-bind:style="{color:childcolor}" v-bind:moviestar="moviestars"></childcomponent>而且，都是在data里通过键值对的形式定义，用的时候之间用这个属性名而不是直接写
border:childborder
childborder:'1px solid black',
这样写是错误的
v-bind:style="{color:childcolor,border:1px solid black}"
- 通过全局注册的组件，如果要作为另一个组件的子组件，不需要在另一个组件里定义
components:{} - vue很严格的一点 (操蛋，坑我很久以为自己语法错误),子组件向父组件传值的时候，那个发射的事件名称不能是大、小驼峰的形式，全小写或者下划线连接可以。
this.$emit('busevent','我是子组件传到父组件的数据')
这样可以发送
this.$emit('busEvent','我是子组件传到父组件的数据')
这样却不能发送。还不报错，所以以后遇到面试问vue的缺点，我可以说 它语法过于严格
- 局部注册的组件如果是大驼峰、小驼峰，在挂载的时候也不能识别，还不报错，所以最好写成全小写。
- 子组件和子组件如何传值？了解了父组件传子组件和子组件传父组件，那么如和实现子子组件之间的数据传递了？子子组件传值简单的方法是 通过一个空的Vue–eventbus实例实现，这个实例完成
eventbus.$emit('data-a',a)发送数据，同样通过它event.$on()来接收这个事件，注意要用箭头函数this，下面这个实例组件A B C三个组件平等没有父子关系，C来接收A、B传给他的数据；A组件触发发送事件，通过eventbus.$emit('data-a',this.message)将数据发送出去，需要接收的组件C 在自己的mounted()钩子函数里，通过eventbus.$on('data-a',a=>{this.A=a}来接收数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<cpna></cpna>
<cpnb></cpnb>
<cpnc></cpnc>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script type="text/javascript">
//定义一个空的Vue实例
var eventbus = new Vue()
const cpna = {
template:`<div>
<p>我是A组件，传给C组件{{message}}</p>
<button v-on:click="sentToC">发送给C</button>
</div>`,
data:function(){
return {
message:"aaaaaaa"
}
},
methods:{
sentToC:function(){
eventbus.$emit('buseventa',this.message)
}
}
}
const cpnb = {
template:`<div>
<p>我是B组件，传给C组件{{message}}</p>
<button button v-on:click="sentToC">发送给C</button>
</div>`,
data:function(){
return {
message:"bbbbbb"
}
},
methods:{
sentToC:function(){
eventbus.$emit('buseventb',this.message)
}
}
}
const cpnc = {
template:'<p>我是C组件=====接收到：a传的数据{{A}} b传的数据{{B}}</p>',
data:function(){
return {
message:"我是C组件的值---ccc",
A:'',
B:''
}
},
mounted(){
eventbus.$on('buseventa',a =>{
this.A = a
console.log(this.A)
})
eventbus.$on('buseventb',b =>{
this.B = b
console.log(this.B)
})
}
}
var app = new Vue({
el:"#app",
data:{
message:"我是根组件",
},
components:{
cpna,
cpnb,
cpnc
},
})
</script>
</html>
项目中使用element-ui
去官网看。安装element-ui，main.js引入 ele和样式文件，import { Table,Button } from ‘element-ui’;相关的组件，Vue.use（Table,Button）引入代码到自己代码里就行了。
基于Token的身份验证的过程如下:
用户通过用户名和密码发送请求。
服务器端程序验证。
3.服务器端程序返回一个带签名的token 给客户端。
4.客户端储存token,并且每次访问API都携带Token到服务器端的。
5.服务端验证token，校验成功则返回请求数据，校验失败则返回错误码
０.５ｐｘ的border怎么做？
元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);－－默认是在元素中心位置开始缩放，所以是上下往中间挤的
transform-origin: 50% 100%;－－５０％便是元素本身宽度的５０％处，１００％表示元素本身高度的１００％处
}
echarts使用 官方报错 这里附带一个解决办法
vue里npm 安装 -->main.js import echarts from 'echarts'(这里会出现init是undifined错误)–Vue.prototype.$echarts = echarts
.vue里
<template>
<div class="Echarts">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
export default {
name: 'Echarts',
methods:{
myEcharts(){
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
mounted() {
this.myEcharts();
}
}
</script>
<style>
</style>
**出错了 将import echarts from 'echarts改为import * as echarts from 'echarts'即可。**当第一次配置成功后，只需要改变options里的内容，其他不管就会得到提供的任何图。
Eslint一直报错
解决办法
修改build\webpack.base.conf.js这个文件就好啦。
修改为
然后重启项目
省市区 三级联动–官方。博客
这篇可以实现，上面的报错
针对vue项目里，通过Element-ui来实现这个功能
步骤：
1.安装 element-ui 和插件
npm i vue-area-linkage area-data
yarn add vue-area-linkage area-data
2.在main.js里依赖注入
import VueArealinkage from 'vue-area-linkage';
Vue.use(VueArealinkage);
3.在需要的.vue文件了
<template>
<div>
<div class="test">
<div class="area">
<area-select
type="all"
:placeholders="placeholders"
:level="2"
@change="gg"
v-model="selected"
:data="pcaa"
>
</area-select>
</div>
</div>
</div>
</template>
<script>
// 根据需要按需引入数据
import "vue-area-linkage/dist/index.css";
import { AreaSelect } from "vue-area-linkage";
import AreaData from "area-data";
import {pcaa} from "area-data";
export default {
component: {
AreaSelect,
},
data() {
return {
pcaa: pcaa,
placeholders: [" ", " ", " "],
selected: [],
};
},
methods: {
gg() {
console.log(this.selected);
},
},
};
</script>
最终效果
SASS笔记
1.sass变量 通过$定义变量；
$color:red 使用的时候
.div{
color:$color
}
2.嵌套规则
CSS
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
SASS
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
编译结果
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
关于Webpack中热更新的方法特性
在express中，用哪个方法对客户端做出响应
无论是应用层加载的中间件还是框架自带中间件，都支持几个通用的配置项,以下不正确的是哪个？
扫一扫
2503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
