
<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>&copy; 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. 数据驱动

22.DIV+ CSS 布局

DIV+CSS 是WEB设计标准，它是一种网页的布局方法

1. 内容和表现分离，css样式可以通过文件导入，代码精简了，适合搜索引擎seo爬取

2. 提高页面浏览速度

3. 易于维护和改版

23. vue 子路由

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

24. iview

25. 箭头函数和 that

箭头函数里面不能用that了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/363674

Vue项目开发中遇到的一些点，记录一下_iview transition

1. @U/ 代指什么

2、组件传值provider/inject