VueJS: 새 프로젝트 시작
20913 단어 vuejavascript
VueJS？
VueJs는 경량급이고 배우기 쉬운 프레임워크입니다.웹 페이지를 다시 사용할 수 있는 구성 요소로 분할할 수 있습니다. 모든 구성 요소에는 HTML, CSS, 자바스크립트가 있습니다.Vue는 반응식입니다. 데이터가 변경될 때 Vue는 우리가 사용하는 모든 위치를 업데이트합니다.
Vue는 2014년 2월 Evan You가 만들었습니다.
우리의 첫 번째 프로젝트를 계속 만듭시다!
우선 새 폴더를 만듭시다
mkdir vue-project
cd vue-project
npm install -g @vue/cli
vue create vue-app
프로젝트를 만들면 터미널에 이 명령을 추가해서 프로그램에 들어갈 수 있습니다
cd vue-app
npm run serve
만약 네가 거기에 가면, 너는 너의 첫 번째 Vue 응용 프로그램을 볼 수 있을 것이다.
이 점에서 우리는 정리해야 할 일이 좀 있다.
VSCode의 루트 폴더로 이동하여 HelloWorld를 삭제합니다.src/components에 있는 vue 구성 요소입니다.더 이상 존재하지 않는 구성 요소를 찾고 있기 때문에 응용 프로그램의thinkcope를 바꿔야 합니다.vue.
응용 프로그램으로 넘어가겠습니다.vue, 템플릿의 내용을 삭제하고 추가하자
H1은 Hello World와 함께 "스크립트"에서 구성 요소에서 HelloWorld와 HelloWorld의 가져오기를 삭제합니다
"스타일"에서, 우리는 일부 내용을 삭제하고, 0의 맨 위에 간격을 추가합니다. 그러면 우리는 처음부터 css를 시작할 수 있습니다.그것은 보기에 이렇다.
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
* {
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
</style>
이제 이 구성 요소가 어떻게 작동하는지 설명해 봅시다.
Vue에서, Vue는 코드 라이브러리를 다른 작업과 세 개의 거대한 층으로 나누지 않고, 그것들을 느슨하게 결합된 구성 요소로 나누었다.이 구성 요소에서는 템플릿에서 HML 논리, 스크립트에서 Javascript, 스타일에서 CSS를 실행할 수 있습니다.
Vue 간 차이점은 무엇입니까?js2와 Vue.js 3?
Vuejs 3은 다음 옵션이 아닌 결합 IPA를 도입했습니다.
<script>
export default {
name: "App",
data:
methods:
computed:
};
</script>
<script>
export default {
name: "App",
setup() {
function example() {
// function logic
}
},
return {
example,
};
};
</script>
템플릿으로 이동하여 추가해야 합니다.
<template>
<div>
<form>
<h1>Hello World</h1>
<input />
<button>I am a button</button>
</form>
</div>
</template>
Vue에서이벤트 감청기를 요소에 추가할 수 있습니다.'v-on'이나 단축키'@'를 추가하면 이 폼에 연결된 함수를 제출하고 만들 수 있습니다.
<template>
<div>
<form @submit="addToPage"> // <== binds to addToPage
<h1>Hello World</h1>
<input />
<button>I am a button</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
setup() {
},
};
</script>
그리고 이렇게 함수를 되돌려줍니다.
<script>
export default {
name: "App",
setup() {
function addToPage() {
console.log('click')
}
return {
addToPage,
};
},
};
</script>
<form @submit.prevent="addToPage">
가치를 절약하기 위해서는 Vue에서 무효를 가져와야 합니다.이제 우리는word라고 불리는 데이터를 저장할 수 있습니다.다음과 같이 데이터를 반환하는 것을 잊지 마십시오.
<script>
import { reactive } from "vue";
export default {
name: "App",
setup() {
const data = reactive({
word: "",
});
function addToPage() {
console.log('click')
}
return {
addToPage,
data,
};
},
};
</script>
<template>
<div>
<form @submit.prevent="addToPage">
<h1>Hello World</h1>
<input v-model="data.word" />
<button>I am a button</button>
</form>
</div>
</template>
마지막으로, 입력에 입력한 모든 문자의 배열입니다. 이 배열은 저희 페이지에 표시됩니다.이제 addToPage에 논리를 추가합니다.addToPage는 우리가 입력한 모든 단어를 단어 그룹에 밀어넣습니다.
<script>
import {
reactive
} from "vue";
export default {
name: "App",
setup() {
const data = reactive({
word: "",
words: [],
});
function addToPage() {
data.words.push(data.word);
}
return {
addToPage,
data,
};
},
};
</script>
<template>
<div>
<form @submit.prevent="addToPage">
<h1>Hello World</h1>
<input v-model="state.word" />
<button>I am a button</button>
</form>
<ul>
//syntax for looping in Vue
<li v-for="(w, index) in state.words" :key="index"> // <== we need a key for it to work!
<h1>{{ w }}</h1> // <== displaying our array
</li>
</ul>
</div>
</template>
여기 있습니다!
결론
Vue는 개발자가 새로운 응용 프로그램을 만들 때 더욱 쉽게 작업할 수 있도록 가장 유행하는 자바스크립트 프레임워크 중 하나가 되었다.저는 Vue를 잘 사용한 경험이 있습니다. 여러분을 격려합니다.
Reference
이 문제에 관하여(VueJS: 새 프로젝트 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/josesrodriguez610/vuejs-starting-a-new-project-ke1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
