Vue 인터뷰에 대한 지식 포인트

이번에는 Vue 인터뷰에 대한 지식 포인트를 알려드리겠습니다. 필요한 친구들은 관심을 갖고 편집자를 따라가서 살펴보세요.

[관련 추천: vue 인터뷰 질문 (2020)]

1. vue 소개

vue는 사용자 인터페이스를 구축하기 위한 프레임워크입니다. 경량의 mvv 프레임워크로, 소위 양방향 데이터 바인딩, 데이터 기반 및 컴포넌트 기반 프런트 엔드 개발을 간단한 API를 통해 구현합니다. 사용하기 쉽고 컴팩트합니다.

2. Chrome에서 vue 디버깅을 용이하게 하기 위해 vue-devtools 플러그인을 설치합니다. 디버깅을 용이하게 하기 위해 vue-devtools가 코드를 확인할 수 있는지 여부를 구성합니다. vue.config.devtools = false;

vue.config.productionTip =false;프로덕션 메시지 시작을 방지합니다.

3. 자주 사용되는 명령.

v-model 양방향 데이터 바인딩, 일반적으로 양식 요소에 사용됩니다.

v-for는 배열이나 객체에 대해 루프 작업을 수행합니다. v-repeat 대신 v-for를 사용합니다.

v-on은 시간을 바인딩하는 데 사용됩니다. 사용법: v-on : time = 'function'

v-show/v-if는 요소를 표시하거나 숨기는 데 사용되며, v-show는 디스플레이를 통해 구현되며, v-if는 각 삭제 후에 생성됩니다.

4 이벤트 및 속성

v-on: click = " 약어 @click=""

$event 이벤트 소스, 시간 유형, 오프셋 등과 같은 이벤트 관련 정보를 포함하는 이벤트 개체.

이벤트 버블링, 기본 js 메서드는 다음에 따라 다름 이벤트 객체, vue 모드는 이벤트 버블링을 방지하기 위해 이벤트 객체인 @click.stop에 의존하지 않습니다.

키보드 이벤트: @keydown.13 또는 keydown.enter

이벤트 수정자 .stop은 event.stopPropagation을 호출합니다. );

v-bind는 속성 바인딩에 사용됩니다. v-bind: attribute="" 예 v-bind:src="" 약어: src=""

5 vue.js는 HTML을 사용합니다. Vue 인스턴스의 데이터 템플릿에 DOM을 바인딩하는 기반 템플릿 구문입니다. {{}}는 데이터를 바인딩하고 페이지에 표시하는 데 사용됩니다.

단일 항목 바인딩 {{}}는 깜박이는 문제를 일으킬 수도 있습니다. v-text v-html

다른 지침 v-once를 사용하여 v-pre가 변경되지 않고 그대로 표시되면 데이터를 바인딩할 수 있습니다.

6. 필터

는

을 표시하기 전에 모델 데이터를 필터링하고 데이터 쌍을 필터링하는 데 사용됩니다. 구문: {{data | filter (parameter) | filter (parameter)}}

내장 필터링 2.0 이후에는 브라우저가 삭제됩니다. 이를 사용하면 lodash data-fns, 날짜 형식, Accounting.js, 통화 형식 및 사용자 정의와 같은 타사 라이브러리를 사용할 수 있습니다. 7. Ajax 요청을 보냅니다.

vue 자체는 vue-resource axios와 같은 플러그인을 사용하여 Ajax 요청 전송을 지원하지 않습니다.

axios는 요청을 보내는 데 사용되는 약속 기반 http 요청 클라이언트입니다.

기본 사용법:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

참고: axios가 기본적으로 데이터를 보낼 때 데이터 형식은 요청 페이로드입니다. 침대 데이터 형식이므로 매개변수는 키-값 개체로 전달되어야 합니다

, 매개변수는 json 형식으로 전달될 수 없습니다

매개변수 전달 방법: 키-값 쌍을 직접 연결하고, 변환 요청을 사용하여 처리합니다. 요청을 보내기 전에 데이터를 요청하십시오. 변환하거나 변환을 위해 qs 모듈을 사용하십시오.

axios는 교차 도메인 요청을 지원하지 않습니다. vue-resource를 사용하여 교차 도메인 요청을 보낼 수 있습니다.

도메인 전체에 걸쳐 요청 보내기: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue 수명 주기

Vue 인스턴스의 생성부터 소멸까지의 과정이 생명주기가 됩니다

9. 계산된 속성

계산된 속성은 데이터를 저장하는 데에도 사용됩니다. 데이터를 논리적으로 처리할 수 있고 계산된 속성의 데이터를 모니터링할 수 있다는 두 가지 특성이 있습니다.

10.vue 인스턴스 속성 및 메서드

Property vm.$el vm.$data vm.$options vm.$refs

Method vm.$mount() vm.$destroy vm.$ nextTick(콜백) vm.$set(객체,키,vlaue) vm.$delete(객체,키) vm.$watch(data,callback)

11, 사용자 정의 명령

사용자 정의 전역 명령 vue. directive(directive id, 정의 객체)

12. Transition(animation)

vue는 업데이트나 DOM을 삽입할 때 프로세스를 적용하는 다양한 방법을 제공합니다. 핵심은 CSS 애니메이션을 사용하는 것입니다.

기본 사용법은 다음과 같습니다. : 전환 구성 요소를 사용하여 애니메이션할 요소를 수정된 구성 요소에 배치하세요

타사 애니메이션 라이브러리 animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13과 함께 사용하세요. Component

구성 요소는 가장 vue.Component의 강력한 기능은 HTML 요소와 결합하여 코드를 캡슐화하고 재사용할 수 있습니다.

컴포넌트 메소드를 정의하려면 먼저 컴포넌트 생성자를 생성한 다음 컴포넌트 생성자를 사용하여 컴포넌트를 생성합니다. b> 템플릿을 참조하기 위해

을 직접 생성합니다. 구성 요소 콘텐츠는 템플릿 d477f9ce7bf77f53fbcf36bec1b69b7a에서 참조됩니다. 구성 요소 데이터는 vue 인스턴스에 저장된 데이터와 다릅니다. :is="" 구성 요소, 여러 구성 요소 동일한 행 포인트를 사용하고 동적으로 전환합니다.

keep-alive 캐시 구성 요소를 사용하면 다시 생성되지 않아 더 효율적입니다.

7c9485ff8c3cba5ae9343ed63c2dc3f7 사용 방법 95543a64d6150a5d6f46db7704427e2a

데이터 전송: 상위-하위 구성요소, 상위-하위 구성요소라는 하나의 구성요소 내에 또 다른 구성요소가 정의됩니다.

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  f995f70ae2091cccd4738847b20f1f7b

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3>我是主页</h3>&#39;
}
var News={
template:&#39;<h3>我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：30e8033e360bcffb1ce9b4703e10b64c /* scoped表示该样式只在当前组件中有效 */

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

라우팅 인스턴스 방법:

router.push(); 경로 추가, 기능은 6a078d9a0c4b84a49fc544194c8dfb2b와 동일, 두 점프 페이지 모두

router.replace() 경로 교체, 기능은 다음과 같습니다. 위와 동일하며 기록이 생성되지 않습니다

단일 파일 구성 요소:

.vue 파일은 vue.js의 사용자 정의 파일 형식인 단일 파일 구성 요소라고 하며 캡슐화된 별도의 독 화살표입니다. 파일에

별도의 js css html

.vue 파일은 세 부분으로 구성됩니다. 템플릿 스타일 script

vue-loader 브라우저 자체는 .vue 파일을 인식하지 못하므로 .vue 파일을 로드하고 구문 분석해야 합니다. 이 경우 vue-loaderleisi가 필요합니다. html-loader, css-loader, style-loader 및 babel-loader가 있습니다. vue-loader는 webpack용으로 계획되어 있습니다. 최종 리소스 모듈러 로더 및 패키징 도구

관련 템플릿 설치:

cnpm install vue-template-compiler -D //미리 컴파일된 템플릿

병합: cnpm install -D webpack webpack-dev-server vue-loader vue-html- loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

테스트 실행: npm run dev

15.

vue-cli는 빠르게 구축할 수 있는 vue 스캐폴딩입니다. 프로젝트 구조,

일반적으로 사용되는 프로젝트 템플릿: webpack은 EsLint 코드 사양 확인 및 단위 단위 테스트를 보장하며,

webpack-simple에는 코드 확인이 없습니다. 그리고 단위 테스트

browserify도 더 자주 사용됩니다

browserigy-simple

vue-cli 설치 및 vue 명령 환경 구성

 cnpm install vue-cli -g   vue --version   vue list

초기화 the project and generate the project template

  Syntax: vue init template name project name
생성된 프로젝트 디렉터리 입력, 모듈 패키지 설치
cd vue-cli-demo
cnpm install
Run
npm run dev //테스트 서비스 시작
npm run build //프로젝트를 패키징하고 dist 디렉터리를 출력합니다. 프로젝트가 온라인인 경우 dist 디렉터리를 서버에 복사합니다.
Webpack 템플릿 사용
vue init webpack vue-cli-demo2
ESLint는 코드 사양과 들여쓰기, 공백, 기호 등과 같은 스타일 요구 사항이 비교적 엄격합니다

16. 모듈형 개발


먼저 vue init webpack-simple vue-cli-demo를 사용하여 디렉터리에 프로젝트를 만듭니다.
디렉터리를 입력합니다. vue-cli-demo cmpn install 그런 다음 npm run dev 테스트 실행

cmpn install vue-router -S -S는 프로덕션 종속성을 의미합니다.

main.js 편집 import VueRouter form ''vue-router' vue.use(Vue/ router); 사용 후 전역적으로 사용할 수 있습니다.

app.vue 편집 router.config,js 편집

cnpm install axios -S

axios를 사용하는 두 가지 방법:

a. axios를 사용하는 컴포넌트에는 axios를 도입해야 합니다. axios.get('url').then(resp ->{resp.data});.catch(eorr-> ;){}

b. main.js의 'axios'에서 가져오기 axios를 전역적으로 도입하고 이를 vue 프로토타입 vue.prototype.$http=axios에 추가합니다. 그런 다음 다른 구성 요소는

vue.$http.get()을 수행할 수 있습니다. ; 또는 this.$http.get();

사용자 정의 구성 요소에 대한 이벤트 추가:

예를 들어 버튼 vue 등록을 사용자 정의하면 기본적으로 @click.ntaive=send를 바인딩할 수 없습니다.

17ui library element ui

는 Ele.me에서 제공하는 vue 2.0 기반의 컴포넌트 라이브러리 집합으로, URL을 빠르게 개발하고 효율성을 향상시킬 수 있습니다

element ui pc 측 mintui 모바일 단말기. 공식 홈페이지 element.eleme .io

cnpm install element-ui -S

npm run dev

main.js에 이 컴포넌트를 도입하고 사용하세요 import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default /index.css

vue.use(ElementUI); 이 소개 방법은 모든 구성 요소 내용을 소개하는 것입니다

webpack.confgi.js에 로더 추가 test:/.css$/,loader:'style-loader!css-loader '

cnpm instal style-loader -D 글꼴 글꼴 로더 구성

Webpack 구성 변경을 다시 시작해야 합니다

동적 스타일은 less를 사용하는 것입니다

less를 사용하여 로더를 설치하세요 less less-loader 구성 테스트:/.less$/ ,loader:less-loader 스타일 지정 l ang=less 스타일을 지정해야 함

Custom 전역 구성 요소:

전역 구성 요소: main.js에서 vue.use를 사용하여 전역 소개를 입력한 다음 다음을 사용할 수 있습니다.

다른 구성 요소에서 생성합니다. vue 구성 요소, index.js 파일 만들기 가져오기 './Login.vue'
에서 로그인 내보내기 기본값 {
install:function(Vue){
Vue.comComponent('Login',Login);
}
}

공통 구성 요소: axios

18.vuex 상태 관리 모드와 같이 매번 도입되어야 함

중앙 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리합니다. 데이터는 Flux 프런트엔드 상태 관리 프레임워크를 기반으로 한다는 점에서 Redux와 유사합니다.

기본 사용법: nmp install vuex -S

store.js 파일 생성, vuex 관련 구성. main.js에서 가져오기, 저장소 가져오기 fomr './store.js main.js 저장소 옵션 구성, this.$store

import vue fomr vue import vuex from vuex vue.use(vuex);

vuex core 저장소는 저장소 인스턴스에는 다음 속성과 메서드가 포함됩니다.

getters 속성 가져오기

actions 메서드 정의 프로세스 판단과 같은 작업 비동기 요청 const action={메서드 이름(컨텍스트){})} 컨텍스트 개체에 comit이 있습니다. dispatch state

commit은 데이터를 수정하는 유일한 방법인 제출을 의미합니다. conmit('add)는 add

mutations 정의 변경 사항을 제출합니다.

var state= {count:6} //스토어 객체 생성 const store=new Vuex .Store{{state}}; vargetters ={count)(){return state.count}} 기본 저장소 내보내기;

편집 앱. 계산된 속성으로 js 편집 저장소: 계산:(){return this.$store.state.count};

메서드 1 this.#store 액세스 메소드 2 mapGetters mapActios access

mapGetter Get attribute

mapActions Get method

vuex

computed:mapGetters{('count')}

에서 보조 함수 import {mapGetter} 가져오기

위 내용은 Vue 인터뷰에 대한 지식 포인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!