10분에 시작하는 Vue.js(기본 편)
3462 단어 JavaScriptVue.js
개요
예전에 그렸던10분에 시작하는 리액션.js(v.0.14.7)에 이어.js만 만졌기 때문에 도입 부분만 간단하게 요약할 수 있습니다.
Vue.js를 모르는 사람이나 알고 있지만 실제로 접촉한 적이 없는 사람을 대상으로 어쨌든 짧은 시간 안에 어떤 것들을 체험해 보세요.
0.Vue.js 소개
Vue.js는 MVM으로 불리는 디자인 모델을 채택한 프레임
1. 환경 설정
컨디션
Mac 10.11.6(OS X EI Capitan)
이번에는 베입니다.npm에서 js를 설치합니다.그래서 우선 홈brew, nodebrew에 가입해야 합니다.$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install nodebrew
$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary stable
$ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.zshrc
確認
$ node -v
v6.8.0
참조: NodeBrew 설치 페이지
2.Vue.js 설치
노드를 넣은 후 npm Vue를 사용합니다.js를 설치합니다.$ npm install vue@csp
~/node_modules/以下にインストールされる
$ ls ~/node_modules/vue
LICENSE README.md dist/ package.json src/
참조: Vue.js 설치
3. 시료
sample.html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</html>
참조: Vue.시작할 때
4. 확인
브라우저로 탐색합니다.확인)을 참조하십시오.
이것뿐이다
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install nodebrew
$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary stable
$ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.zshrc
確認
$ node -v
v6.8.0
노드를 넣은 후 npm Vue를 사용합니다.js를 설치합니다.
$ npm install vue@csp
~/node_modules/以下にインストールされる
$ ls ~/node_modules/vue
LICENSE README.md dist/ package.json src/
3. 시료
sample.html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</html>
참조: Vue.시작할 때
4. 확인
브라우저로 탐색합니다.확인)을 참조하십시오.
이것뿐이다
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</html>
브라우저로 탐색합니다.확인)을 참조하십시오.
이것뿐이다
Reference
이 문제에 관하여(10분에 시작하는 Vue.js(기본 편)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hikarut/items/a71f065feaa3f5bca5e3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
