vue.js/vue.js 2

1. HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것. | console.log ,querySelector, innerHTML

DEV-Front 2022. 7. 4. 21:13
반응형

!입력하고 자동완성 하면 이렇게 자동완성

<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>
반응형