프런트 엔드 문제의 첫 주 12 월 2019 년 요약

2019년 12월 1일

폭, 브라우저의 높이를 가져옵니다.
```
<div id="outer">
   <div id="inner">
      <div id="dot"></div>
   </div>
</div>
```
```
#outer{
    width: 300px;
    height: 300px;
    background-color: aquamarine;
    margin: 0 auto;
    overflow: hidden;
}
#inner{
    width: 150px;
    height: 150.5px;
    background-color: chartreuse;
    padding: 50px;
    border: 10px solid slateblue;
    margin: 15px;
    font-size: 50px;
    overflow: hidden;
    word-break: break-all;
}
#dot{
    width: 100%;
    height: 100%;
    background-color: tomato;
    overflow: scroll;
}
```
1. clientWidth / clientHeight
표시 소자의 폭, 높이. 패딩 영역의 가장자리 등 스크롤바가 포함되지 않은 텍스트 + 영역은 윈도우의 크기가 변경하여 표시한다. 요소와 인라인 스타일 스타일 CSS의 clientWidth 속성은 0입니다
```
var ele = document.getElementById('inner');
var clientWidth = ele.clientWidth;
var clientHeight = ele.clientHeight;
console.log(clientWidth);  //250
console.log(clientHeight);  //251
```
2.offsetWidth /는 offsetHeight

레이아웃 요소의 폭, 높이. 텍스트 영역 + 패딩 영역은 + 경계 영역은 스크롤 (스크롤)을 포함한다.

속성은 정수로 라운드 (반올림) 일 것이다. 사용 ele.getBoundingClientRect는 () 분수 (소수)를 가져옵니다
```
var offsetWidth = ele.offsetWidth; 
var offsetHeight = ele.offsetHeight;
console.log(offsetWidth);    //270
console.log(offsetHeight);  //271
```
ele.getBoundingClientRect () 메소드는 뷰포트 요소 위치의 상대적인 크기를 반환한다.
```
console.log(ele.getBoundingClientRect());
//DOMRect{bottom: 293.5,height: 270.5,left: 581.5,right: 851.5,top: 23,width:     270,x: 581.5,y: 23}
```
3.scrollWidth / scrollHeight

화면에 보이지 않는 내용 오버 플로우 오버 플로우를 포함하는 콘텐츠 요소의 폭. 여기서 필요한 모든 콘텐츠 / 높이 적합한 뷰포트의 요소에 적합한 수직 / 수평 스크롤 바를 동일한 폭 최소. 텍스트 영역 + 스크롤바와 의사 소자 폭 / 높이 포함 패딩 영역.

요소의 내용은 가로 스크롤 막대, 다음 scrollWidth = clientWidth 필요없이 적합 할 수 있습니다.
```
var scrollWidth = ele.scrollWidth;
var scrollHeight = ele.scrollHeight;
console.log(scrollWidth);  //250
console.log(scrollHeight);  //251
```

2019년 12월 4일

에 대한 프로세스를 선택

<select id="sel">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

설정 기본값

//给option添加selected属性
document.getElementById("sel")[0].selected = true

상기 선택된 값을 취득
```
document.getElementById("sel").value
```

동적 선택 추가

var sel = document.createElement("select")
sel.id = "sel";
document.body.appendChild(sel)

동적으로 추가 옵션

var obj = document.getElementById("sel");
sel.add(new Option("hello",1))

동적 삭제 옵션

//删除选中的option
var obj = document.getElementById("sel");
obj[0].selected = true
// 获取选中的option的index值
var index = obj.selectedIndex
obj.options.remove(index)

//删除所有option
obj.options.length = 0;

옵션의 값을 수정

obj.options[0] = new Option("hello again",2)

삭제 선택
```
obj.parentNode.removeChild(obj);
```

2019년 12월 5일

에 iView을 radioGroup의 기본 값을 설정

//label属性值为string时，可直接绑定
<RadioGroup v-model="status">
  <Radio label="app">app</Radio>
  <Radio label="app2">app2</Radio>
</RadioGroup>

data(){
  return {
      status:"app"
  }
}

//label属性值为number时，应使用:label绑定
<RadioGroup v-model="status">
  <Radio label="0">app</Radio>
  <Radio label="1">app2</Radio>
</RadioGroup>

data(){
  return {
      status:1
  }
}

JS 결정 문자열은 문자열을 포함

/* indexOf(str,index) 返回某个指定的字符串值在字符串中首次出现的位置。
  str 为要检验的字符自串，必填；index为检测开始的位置，选填
  返回值为-1时表示不包含 */
    var str = "hello";
    var res = str.indexOf("l", 2);
    console.log(res);  //2

/* search(str) 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
   str 可以为要检验的字符子串，也可以为检验的RegExp对象。
   如果没有找到任何匹配的子串，则返回 -1。
    search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。*/
    var res2 = "hello".search("o");
    console.log(res2);  4

/* match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。它返回指定的值，而不是字符串的位置。*/
    var res3 = "hello world".match("world")
    console.log(res3);  //...world

/* 正则匹配 */
/* test() 用于检索字符串中指定的值。返回 true 或 false。*/
    var res3 = RegExp(/3$/).test("123")
    console.log(res3);  //true

/* exec() 用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。*/
    var res4 = RegExp(/lo$/).exec("hello")
    console.log(res4);  //...lo

2019년 12월 7일

웹팩 打包运行 VUE 时报错 : VUE 로더가 대응 플러그인없이 사용 하였다. 당신의 웹팩 설정에 VueLoaderPlugin을 포함해야합니다.

에서 VUE 로더 공식 문서 설명

뷰 로더 V15 이제 제대로 작동하려면 플러그인 동반 웹팩이 필요

사용에 웹팩 플러그 (VueLoaderPlugin)와 VUE 로더 V15 요구
```
//wwebpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exporte = {
    ...
    plugins:[
        new VueLoaderPlugin()
    ]
}
```

프런트 엔드 문제의 첫 주 12 월 2019 년 요약

2019년 12월 1일

2019년 12월 4일

2019년 12월 5일

2019년 12월 7일

추천