네이티브 자바스크립트만 사용한 사람을 위한 vue.js 초입문
세 번의 밥보다 JavaScript(대 거짓말).
아무래도 뭔가입니다.
이번에는 자바 스크립트에 대해 이야기합니다.
※ 재료 요소 마시마시이므로 위가 기대기 쉬운 분은 조심하십시오.
읽고 싶은 사람
"Vue.js"는 누구입니까? 친척이었던 것처럼...
Vue.js는 사람이 아닙니다.
자바 스크립트 라이브러리, 프레임 워크입니다.
jQuery라든지 네이티브의 JavaScript에서는 상당히 번거로움이 걸리는 것도 비교적 간단하게 해 줍니다.
Vue.js는 주로 프런트 엔드 개발에 사용되며,
「DOM」이라고 불리는 프로그램으로부터 HTML을 조종하는 녀석을 자동적으로 실시해 준다고 합니다.
뭔가 대단하네요. (모른다)
어떻게 하면 사용할 수 있나요?
HTML head 태그에,
index.html <head>
<!-- 省略 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
라고 씁니다.
이것으로 설교는 완료입니다.
주제입니다.
이번에는 <input type="text">의 내용이 HTML에 즉시 업데이트되는 것을 만들어 갑니다.
그럼 소스 코드입니다.
index.html <div id="app">
<h2>最優秀賞
<p>{{ message }}</p>
</h2>
<p>（{{ name }}）</p>
<input v-model="message">
<input v-model="name">
</div>
script.jsvar app = new Vue({
el: '#app',
data: {
message: '赤信号は止まらないと ダメよ〜 ダメダメ',
name: 'ゆでたまご小学校 6年 エレキテル太郎くん'
}
})
이것만으로 그 움직임을 할 수 있게 됩니다! 대단하잖아!
(내용이 츳코미는 커다란 가득하지만 용서해주세요)
덧붙여서, 이 동작의 키모가 되는 것은 <input v-model="name"> 입니다.
"v-model"이 실시간으로 다시 쓰는 동작을 해줍니다.
그리고 {{ message }} 라는 것이 Vue.js에 의해 다시 쓰여지는 부분입니다.
다시 쓰여지는 데이터는 script.js data:{}에 기록되어 있습니다.
Vue의 처음 3단계
<head>
<!-- 省略 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
이번에는
<input type="text">의 내용이 HTML에 즉시 업데이트되는 것을 만들어 갑니다.그럼 소스 코드입니다.
index.html
<div id="app">
<h2>最優秀賞
<p>{{ message }}</p>
</h2>
<p>（{{ name }}）</p>
<input v-model="message">
<input v-model="name">
</div>
script.js
var app = new Vue({
el: '#app',
data: {
message: '赤信号は止まらないと ダメよ〜 ダメダメ',
name: 'ゆでたまご小学校 6年 エレキテル太郎くん'
}
})
이것만으로 그 움직임을 할 수 있게 됩니다! 대단하잖아!
(내용이 츳코미는 커다란 가득하지만 용서해주세요)
덧붙여서, 이 동작의 키모가 되는 것은
<input v-model="name"> 입니다."v-model"이 실시간으로 다시 쓰는 동작을 해줍니다.
그리고
{{ message }} 라는 것이 Vue.js에 의해 다시 쓰여지는 부분입니다.다시 쓰여지는 데이터는 script.js
data:{}에 기록되어 있습니다.Vue의 처음 3단계
{{ message }} 에서 장소 만들기! el: 'id,class名'에서 선택! data:{ message:"書き換えたい文字"}로 바꾸기! 이것으로 오케이입니다!
여러분도 즐거운 Vue.js 라이프를 즐기세요!
Reference
이 문제에 관하여(네이티브 자바스크립트만 사용한 사람을 위한 vue.js 초입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakano1120/items/d7a0145924896141baf3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
