目录
1. @U/ 代指什么
默认到那个文件下面找 @U代指 src 下的 util文件夹，@U/ajax代指src下的util下的ajax.js文件
2、组件传值provider/inject
provider/inject：简单来说就是在父组件 provide 中提供变量，子组件 inject 中来注入，然后可以在子组件内部使用 provide 的变量.
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
App.vue
<template>
<div id="app">
<div>
<second/>
</div>
</div>
</template>
<script>
import second from './components/Second'
export default {
name: 'app',
components: {
second
},
provide: {
test: 'App 根组件的 provide'
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>Second.vue
<template>
<div>
<p>second: {{ test }}</p>
<third/>
</div>
</template>
<script>
import third from './Third.vue';
export default {
name: 'second',
components: {
third
},
inject: ['test'],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>Third.vue
<template>
<div>
<p>third: {{ test }}</p>
</div>
</template>
<script>
export default {
name: 'third',
components: {},
inject: ['test'],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>3.display: -webkit-box;
流式布局：通常用%来设置,如下例子，流式布局
<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
<style type="text/css">
* {
color: #fff;
text-align: center;
}
body {
width: 90%;
margin: 0 auto;
}
#content {
overflow: auto;
}
#nav, #feature, #footer {
margin: 1%;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
/* border: 0.0625rem solid; */
}
.column3 {
margin-right: 0%;
}
li {
display: inline;
padding: 0.5em;
}
#nav, #footer {
padding: 0.5em 0;
}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1 style="color:#706fd3">软件开发</h1>
<div id="header" style="background-color: #5555ff;">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">服务</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="content" style="background-color: #366092;">
<div id="feature">
<p>功能</p>
</div>
<div class="article column1">
<p>第一列</p>
</div>
<div class="article column2">
<p>第二列</p>
</div>
<div class="article column3">
<p>第三列</p>
</div>
</div>
<div id="footer" style="background-color: #333333;s">
<p>© Copyright 2019</p>
</div>
</body>
</html>流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。
优势
-
页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；
-
如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；
-
即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。
劣势
-
如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；
-
如果用户的窗口非常宽，文本行就会很长，以至于难以阅读；
-
如果用户的窗口非常窄，单词可能会被挤压，导致每行只有几个单词；
-
如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。
由于流体布局可以伸展到浏览器窗口的整个宽度，产生难以阅读的长文本行，所以有些流媒体布局只让页面的一部分伸展和收缩。
在页面的其它部分则限制最大和最小宽度。
不同的浏览器有不同的前缀,这里使用-webkit示例
Mozilla-----------------display:-moz-box
Webkit------------------display:-webkit-box
As specified-----------display:box
提供的关于盒模型的几个属性
| box-orient | 子元素排列 vertical（竖排）orhorizontal（横排） |
|---|---|
| box-flex | 兄弟元素之间比例，仅作一个系数 |
| box-align | box排列 |
| box-direction | Box方向 |
| box-flex-group | 以组为单位的流体系数 |
| box-lines | |
| box-ordinal-group | 以组为单位的子元素排列方向 |
首先,需要了解的是具备的属性
| -webkit- box-flex | 在子元素上设置,属于子元素之间的比例,值为数值即可 | 默认值:1(数值,按比例分配) |
|---|---|---|
| -webkit-box-orient | 在父元素设置,子元素的排列方式 | vertical(垂直)/horizontal(水平)/inline-axis(默认值,横向排列,映射为 horizontal)/block-axis(沿着块轴来排列子元素,映射为 vertical)/inherit(从父元素继承 box-orient 属性的值) |
| -webkit-box-align | 在父元素设置,子元素垂直方向的对齐方式 | start(对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。)/end(对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。)/center(均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下)/baseline(如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐)/stretch(默认值,拉伸子元素以填充包含块) |
| -webkit-box-direction | 在父元素上设置,排列顺序 | normal(默认,以默认方向显示子元素)/reverse(以反方向显示子元素。)/inherit(从子元素继承 box-direction 属性的值) |
| -webkit-box-flex-group | 在子元素上设置,以组为单位的流体系数 | 默认值:1 |
| -webkit-box-ordinal-group | 在子元素上设置,以组为单位的排列方向 | 默认值:1 |
| -webkit-box-pack | 在父元素上设置,子元素水平方向的对齐方式 | center(均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后)/justify(在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）)/start[对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）]/end[对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。] |
| -webkit-box-lines | 子元素是否换行,类似word-wrap和word-break | single(将被放置在单个行或列的所有子元素（元素不适合只会被认为是溢出）)/multiple(box允许扩大到多行，以适应其所有子项) |
4.内边距
5.overflow
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会
如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
所有主流浏览器都支持 overflow 属性。
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
6.transition过渡
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
| 默认值： | all 0 ease 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始 |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
7.json.stringify()
JSON 的常规用途是同 web 服务器进行数据交换。
在向 web 服务器发送数据时，数据必须是字符串。
通过 JSON.stringify() 把 JavaScript 对象转换为字符串
8.input autocomplete
当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，但有时也会暴露用户的隐藏数据，那么如何让input表单输入框不记录输入过信息的方法呢？ 方法一： 在不想使用缓存的input中添加 autocomplete="off" 例如 名字：<input type="text" name="FirstName" value="" autocomplete="off" /> 姓氏：<input type="text" name="LastName" value="" autocomplete="on" /> 方法二： 如果整个表单元素都不使用autocomplete功能的话，在 input 所在的form标签中添加 autocomplete="off" 例如
<form action="#" autocomplete="off">
<input type="text" name="test" />
</form>9.loading加载中
10.路由中的meta
直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了
11.vue监听数据
这样写就可以监听得到了
12.65535
65535是计算机16位二进制最大数
65535一般是内存地址最大值
13.父组件调用子组件方法
<!-- 次要观看条件 -->
<el-form-item>
<secondViewCondition @secondViewRadioChange="secondViewRadioChange" ref="secondVC" :radio="form.radio"></secondViewCondition>
</el-form-item>使用 ref 设置子组件
然后使用 this.$refs.ref属性名.子组件方法名()
// getChangeCondition() 这是子组件内部的方法
let rankSecondary = this.$refs.secondVC.getChangeCondition()14.子组件监听父组件的变量
子组件：
// 获取父组件传过来的值，设置类型 + 默认值
props: {
radio: {
type: String,
default: ''
}
},监听：
// 监听radio的值, 这里面的this指的是vue实例
watch: {
radio: function(newValue, oldValue) {
console.log("监听"+newValue+" "+oldValue)
if(newValue == this.form.radio || newValue == 'none'){
this.form.radio = ''
}
}
},监听里面的 方法 谨慎使用 箭头函数，即：
radio: (newValue,oldValue) => {
console.log(this)
}1.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
2.箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
15.flex布局
目前所有浏览器都兼容。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
//display 设置项目为flex布局
#app {
display: flex;
}//flex 设置项目的排序方向 row水平正向，row-reverse水平反向，column垂直正向，column-reverse垂直反向
{
flex-direction: row| row-reverse|column|column-reverse;
}//flex-wrap 设置项目换行 wrap换行，第一行在上方; wrap-reverse:换行，第一行在下方; nowrap默认不换行
{
flex-wrap: wrap|wrap-reverse|nowrap;
}//justify-content 设置项目主轴（水平）上的对齐方式 flex-start水平左边对齐；flex-end水平右边对齐；center居中对齐；space-between:水平两端对齐；space-around:水平四周对齐
{
justify-content: flex-start|flex-end|center|space-between|space-around;
}//align-items 设置项目交叉轴（垂直）上的对齐方式 flex-start垂直顶端对齐；flex-end垂直底部对齐；center垂直居中对齐；baseline项目的第一行文字基线对齐；stretch(默认)如果项目未设置高度或设为auto，将占满整个容器的高度。
{
align-items: flex-start|flex-end|center|baseline|stretch;
}// align-content 设置多根轴线的对齐方式
{
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
}// flex-flow 是flex-direction和flex-wrap属性的简写
{
flex-flow: row nowrap; // 主轴左边对齐，不换行
}项目的属性
// order 定义项目的排序。数值越小，排序越靠前，默认为0
.item {
order: 1;
}// flex-grow 放大比例 , 默认为0，即如果存在剩余空间，也不放大,所有项目都设为1，则平分剩余空间。
.item {
flex-grow: <number>;/*default 0*/
}// flex-shrink 缩小比例,默认是1，即如果空间不足，项目将等比例缩小。如果为0，则不缩小。
.item {
flex-shrink:<number>;
}// flex-basis 分配空余空间时，项目占据的主轴空间。默认值为auto,即项目的本来大小。
.item {
flex-basis: <length>|auto;
}// flex 是flex-grow,flex-shrink,flex-basis的简写
// none(0 0 auto); 不放大，不缩小，项目占据的主轴空间就是项目大小
.item {
flex: none|[1 1 auto];
}//align-self 可以覆盖align-items属性。默认值是0，表示继承父元素的 align-items属性，如果没有父元素，就等同于stretch
.item {
align-self: auto | flex-start|flex-end|center|baseline|stretch;
}一个div把它放到最中间
<div class="box"></div>
// 父元素 display: flex
.box {
justify-content: center;
aglin-items: center;
}16.具名插槽 slot-scope
17.this.$options.data()
$options是vue 里面的属性
在data里面定义一个form对象，绑定页面表单。
data:{
form: {
id: '',
name: ''
}
}
..............................................
// methods里面使用
this.form = this.$options.data().form;
// 这行代码的意思是： 初始化表单里面的数据，使用vue实例里面的optoins属性拿到 data 从而拿到data里面的form
//相当于 this.form.id = ''; this.form.name = '';new Vue的时候传了一个对象，把该对象记为options，Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.$options，vm.$options.data()中的this指向vm.$options.
data()中若使用了this来访问props或methods，在重置$data时，注意this.$options.data()的this指向，最好使用this.$options.data.call(this).
18.vue事件的派发与接收（触发和监听）
var eventHandle = new Vue();
var vue = new Vue({
el: '#app',
router,
vuet,
template: '<Index/>',
components: {
Index
},
data: {
/* 用于创建页签事件派发
派发事件：this.$root.eventHandle.$emit('事件名','传递的参数')
事件接收:
created:function(){
var self = this;
this.$root.eventHandle.$on('事件名',function(d){
})
}
*/
eventHandle: eventHandle
},
methods: {}
});new一个vue对象，加载到eventHandle上，注册到vue实例上去，这个vue对象会跟整个项目的vue一样有相同的生命周期,这样子就可以使用这个对象去触发vue里面的事件了。
// 事件触发（事件派发）
this.$root.eventHandle.$emit("VIDEO_UPLOAD_LIST_DIALOG")// 事件监听（事件接收）
this.$root.eventHandle.$on('VIDEO_UPLOAD_LIST_DIALOG', () => {
this.showUploadList()
})19. 子组件不要直接更改父组件传过来的值
20. new Date()添加 prototype 方法
给原生的 Date 添加一个 格式 的方法
/** 时间格式
*
* @param {*} fmt 格式字符串 yyyy-MM-dd hh:mm:ss
* @returns 时间字符串
*/
Date.prototype.format = function (fmt = "yyyy-MM-dd hh:mm:ss") {
const o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, String(this.getFullYear()).substr(4 - RegExp.$1.length));
}
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(String(o[k]).length)
);
}
}
return fmt;
};21.mvc 和 mvvm
v - view 视图
m - model - 模板
mvc前端是无法保存 数据的，所有的数据都要通过接口调用存到后台
mvvm 加了 viewModel，vM 有 data可以临时存放一些数据，作为前端视图的控制器；
mvvm是前后端分离的根本原因。
vue历史
1.x版本： 没有虚拟DOM，每个元素对应一个 watch，数据change更新DOM
2.x版本：有虚拟dom，
1. 数据驱动
2.
22.DIV+ CSS 布局
DIV+CSS 是WEB设计标准，它是一种网页的布局方法
1. 内容和表现分离，css样式可以通过文件导入，代码精简了，适合 搜索引擎seo爬取
2. 提高页面浏览速度
3. 易于维护和改版
23. vue 子路由
以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
24. iview
25. 箭头函数 和 that
箭头函数里面 不能用that了
扫一扫
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
