02 Vue3 프로젝트 실행 및 글자 수 세기

프로젝트 실행하기

터미널에 입력!

cd 프로젝트명
npm run serve

cd 프로젝트명 입력 시 폴더까지로 잡혀있던 경로가 프로젝트로 바뀌는 것을 볼 수 있다

이상태에서 서버를 실행해주면

이러한 페이지가 실행된다!

이 페이지 수정을 위해서는 src > App.vue를 수정해주면 된다

 

TextArea 글자 수 세기

textarea에 글자를 작성할 때 마다 글자수를 세보자 

vue를 이용하면 일일히 eventListener를 작성할 필요가 없다

 

Form Input Bindings

공식문서를 확인해보면 v-bind 와 v-on을 합쳐 v-model 을 사용할 수 있다

v-bind : html의 속성인 id, class, style 등에 model의 데이터를 연결할 때 사용 (v-bind:value => :value)

v-on : 이벤트 리스너 (v-on:input => @input)

공식문서 참조

Event Handling | Vue.js

 

그렇다면 textarea의 값이 변할때마다 그 길이를 반환해주면 textarea의 글자 수를 알 수 있을 것이다!

<template>
    <textarea name="" id="" cols="30" rows="10" v-model="text"/>
    <p>{{text.length}}</p>
</template>

<script setup>
import {ref} from 'vue'
const text = ref('')
</script>

<style>

</style>

아 참고로 textarea 하단오른쪽 빗금이 거슬린다면 하단 코드를 추가해주자

textarea {
  resize: none;
}