반응형
!입력하고 자동완성 하면 이렇게 자동완성
<querySelector>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
// 제이쿼리 $('#app');
var div = document.querySelector('#app');
//html의 div태그 저장
console.log(div);
</script>
</body>
</html><innerHTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
// 제이쿼리 $('#app');
var div = document.querySelector('#app');
//html의 div태그 저장
console.log(div);
div.innerHTML = 'hello world'
</script>
</body>
</html>HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것.
일반적인 웹개발은 아래 예시 코드처럼
바뀐 문자를 다시 저장해야지 화면에 마지막 갱신된 값이 출력.
이게 일반적인 웹개발 방식 html,css,javascript였다.
이 일반적인 표현방법을 어떻게 하면 vue.js를 통해서 쉽게 접근할까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
//console.log(div);
var div = document.querySelector('#app');
var string = 'hello world';
div.innerHTML = 'hello world'
string = 'hello world!!!'
//바뀐 문자를 다시 저장해야지 화면에 마지막 갱신된 값이 출력
//이게 일반적인 웹개발 방식 html,css,javascript였다
//이 일반적인 표현방법을 어떻게 하면 vue.js를 통해서 쉽게 접근할까?
div.innerHTML = string;
</script>
</body>
</html>반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 3. Reactivity 코드 라이브러리화 하기 | 즉시실행함수 (0) | 2022.07.04 |
|---|---|
| 2. vue.js의 Reactivity(반응형) 구현 | Object.defineProperty() 객체의 동작을 재정의 하는 API | get: 속성에 접근했을때의 값 정의, set: 속성의 값을 할당했을때의 값 정의 (0) | 2022.07.04 |
| 0. vue.js 개발자 도구 설정방법 | MVVM 모델에서의 Vue (0) | 2022.07.04 |
| 0. VScode 플러그인 다운 9개 (0) | 2022.07.04 |
| 0. vue.js 사용 위한 설치 | 다운로드 (0) | 2022.07.04 |