1. vue-cli로 프로젝트를 생성하는 방법은 무엇인가요? 프로젝트 디렉토리 구조는 무엇입니까?
vue create 데모 node_modules
에서 다운로드한 모든 프로젝트는
src 프로젝트 소스 코드 에 따라 달라집니다
. 공통 정적 리소스 구성
요소 재사용 가능한 소형 구성 요소
라우터 라우팅
저장소 vuex(전역 상태)
보기 페이지 수준 대형 구성 요소
main.js 항목 기능
gitignore git 구성 파일(업로드 시 파일 무시) 코드)
package.json 프로젝트 구성 파일
둘.
메소드와 속성 계산을 각각 사용하고 속성 모니터링을 사용하여 덧셈 계산기를 구현합니다.
<body>
<div id='app'>
<input type="text" v-model='firstname'>+
<input type="text" v-model="lastname"> <button @click="getname" >=</button>
<input type="text" v-model="name">
</div>
<script>
const vm = new Vue({ el: '#app', data: { 이름: "", 성: "", // 이름: '' }, 메소드: { getname() { this.name = this .firstname + this.lastname } }, //属性监听 // watch: { // "firstname": function (newvalue,oldvalue) { // // console.log(newvalue); // // console.log( 이전 값);
// this.name = this.firstname + this.lastname
// },
// "lastname": function (newvalue,oldvalue) { // this.name = this.firstname + this.lastname // } // }, 메소드 메소드:{ getResult(){ return{ Number( this.input1) + Number( this.input2);} }, // 속성 계산은 데이터의 데이터와 충돌할 수 없습니다 . // 계산된 속성이 변경에 따라 달라지는 모든 데이터 속성 그 후에 이 계산된 속성의 재계산이 다시 트리거되어 fullName 계산 값이 업데이트됩니다 .{ // name:function(){
// return this.firstname + '-' + this.lastname
// }
// 2
name:{ get:function(){ return this.firstname + '-' + this.lastname }, // 자체를 수정하는 경우에만 Trigger 설정:함수(값){ console.log(값);
this.firstname = value.split("-")[0]
this.lastname = value.split("-")[1]
}
}
}
})
</script>
3. 날짜 형식을 구현하고 연도, 월, 일, 시, 분, 초를 표시하기 위해 YYYY-MM-DD hh-mm:ss를 전달하는 전역 필터를 정의하는 필기 구현?
전역 필터 정의
Vue.filter('formatTime', function (date, format) { // 여기에 있는 데이터는 처리되지 않은 원본 데이터이며 형식이 전달됩니다. var year = date.getFullYear(); var Month = (date. getMonth () + 1).toString().padStart(2,0); var day = (date.getDate()).toString().padStart(2,0); var hour = (date.getHours()) . toString().padStart(2,0); var 분 = (date.getMinutes()).toString().padStart(2,0); var 초 = (date.getSeconds()).toString().padStart ( 2,0); 반환 형식.replace("YYYY",연도).replace("MM",월).replace("DD",일).replace("hh",시간).replace("mm" , 분).
使用{
{날짜 | formatTime("YYYY-MM-DD hh:mm:ss") }}
4.
경로 리디렉션을 수행하는 방법과 코드 지침을 사용하여 경로 중첩을 설정하는 방법은 무엇입니까?
경로: [
{ 경로: "/userInfo", 구성 요소: userInfo }, { 경로: "/login/:userid/:name", 구성 요소: 로그인, 이름: "namelogin" }, { 경로: "/home", 구성 요소 : home, children: [{ //경로 중첩 경로: "son", 구성요소: son }] },
리디렉션: "/홈"
}
],
다섯.
$router와 $route의 차이점은 무엇인가요?
$router: VueRouter의 객체입니다. 라우터의 인스턴스 객체는 Vue.use(VueRouter) 및 VueRouter 생성자를 통해 얻습니다. 전역 객체입니다. 모든 경로와 많은 주요 객체 및 속성을 포함합니다. $route는 점프 경로입니다
. 각 경로에는 로컬 개체인 경로 개체가 있습니다. 해당 이름, 경로, 매개변수, 쿼리 등을 얻을 수 있습니다. vue devtools에서 각 경로 개체의 차이점을 확인할 수 있습니다.