VueJS 종합 분석

Vue.js란 무엇입니까

Vue.js(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 초점을 맞추고 있으며 다른 라이브러리나 기존 프로젝트와 학습하고 통합하기가 매우 쉽습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리를 사용하여 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.

Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다.

경험이 풍부한 프런트엔드 개발자이고 Vue.js와 다른 라이브러리/프레임워크의 차이점을 알고 싶다면 다른 프레임워크와의 비교를 확인하세요.

1. VueJS 목적:

VueJs의 핵심은 다음을 해결하는 것입니다.

a: 데이터 바인딩 문제를 해결합니다.

b: vue 프레임워크의 주요 목적은 대규모 단일 페이지 애플리케이션을 개발하는 것입니다.

c: 또한 구성 요소화도 지원합니다. 즉, 페이지를 다음으로 캡슐화할 수 있습니다. 여러 구성 요소를 빌딩 블록 스타일로 프로그래밍하면 페이지 재사용성이 극대화됩니다(구성 요소화 지원).

2.VueJS 기능:

I: MVVM 모드(데이터변수(모델)가 변하고 뷰(뷰)도 변하고, 뷰(뷰)도 변하고, 데이터변수도 변한다) (모델)도 변경되었습니다)

MVVM 패턴을 사용하면 여러 가지 이점이 있습니다.

　1. 낮은 결합도. View는 Model과 독립적으로 변경 및 수정될 수 있습니다. ViewModel은 View가 변경되면 Model은 변경되지 않고 그대로 유지될 수 있으며, Model이 변경되면 View도 변경되지 않고 유지될 수 있습니다.

　2. 재사용성. 많은 뷰가 이 뷰 로직을 재사용할 수 있도록 ViewModel에 일부 뷰 로직을 넣을 수 있습니다.

　3. 독자개발. 개발자는 비즈니스 로직 및 데이터(ViewModel) 개발에 집중할 수 있습니다. 디자이너는 인터페이스(View) 디자인에만 집중할 수 있습니다.

　4. 테스트 가능성. ViewModel에 대해 인터페이스(View)를 테스트할 수 있습니다

II: Componentization

III 명령 시스템

IIII: vue2.0에서 가상화 DOM 지원 시작

vue1.0은 가상 돔 대신 실제 돔 요소를 운영합니다.

가상 돔: 페이지 새로 고침 속도를 향상시킬 수 있습니다

가상 DOM에는 장점과 단점이 있습니다.

A: 크기 - 그 중 하나는 기능이 많을수록 코드 패키지에 더 많은 코드 줄이 있다는 것입니다. 다행히 Vue.js 2.0은 아직 상대적으로 작으며(현재 버전 21.4kb)

많은 것들이 제거되고 있습니다.

B: 메모리 - 마찬가지로 가상 DOM은 기존 DOM을 복사하여 메모리에 저장해야 합니다. 이는 DOM 업데이트 속도와 메모리 사용량 간의 균형입니다.

C: 모든 상황에 적용되는 것은 아닙니다. 가상 DOM을 일괄적으로 한 번에 수정할 수 있다면 좋을 것 같습니다. 하지만 자주 업데이트되지 않는 별도의 업데이트는 어떻습니까? 이러한

DOM 업데이트는 가상 DOM의 의미 없는 사전 계산을 초래합니다.

V: 변수 모델 전달

VueJS 표현식:

단계:

1 인용

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

2. 프레임워크에서 관리할 HTML 조각을 선언합니다.

<div id="myapp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

3. vue 매개변수를 입력하고 채웁니다

I. 속성: el은 vuejs가 관리하는 경계 확장을 선언합니다. ng-app은 유사합니다(AngularJS에 있음)

II . 속성: 데이터 데이터(상태 | | 속성), 일부 데이터를 구체적으로 저장하는 속성

<script type="text/javascript">
var vm = new Vue({
el:"#myapp",
data:{hello:"hello word vue app!",
message:"wyx",
result:{name:&#39;xinxin&#39;,password:&#39;123&#39;}
}
});
</script>

4 . 표현식: {{}} 형식을 사용합니다. data의 데이터는

페이지에 표시됩니다. 예:

data:{{message:'xxxxx' }}

보기: {{message}}

<div id="myapp">
<ul>
<li>{{hello}}</li>
<li>{{message}}</li>
<li>{{result.name}}</li>
</ul>
</div>

보기: {{message}}가 다음에 바인딩됩니다. 코드에 키를 입력하고 그 값을 페이지에 표시

data 핵심 기능은 페이지에 표시되는 데이터(모델)를 저장하는 것입니다(구입된 모델과 해당 값 사이에 매핑 관계가 생성됩니다) 즉, 프런트엔드와 백엔드 상호 작용을 구현하면 얻은 데이터가 데이터에 저장되어 있는 한 페이지는 자동으로 바인딩되어 모델에서 데이터 흐름을 실현합니다. ------>보기.

3.VueJS 명령:

명령: 실제로 vue는 v-로 시작하는 사용자 정의 속성을 정의한다는 의미입니다. 각 속성에는 고유한 의미와 기능이 있습니다. >

명령어 사용법: v-instruction 이름 = "표현 판단 또는 모델 속성 또는 이벤트"

v-model:

기능: 일부 수신 사용자가 입력한 데이터를 데이터 속성에 직접 마운트

구문: v-model = "속성 값" {속성 값: 텍스트 값}

데이터에서 처리 : 이 속성 값을 데이터에 정의하는 것이 가장 좋습니다. 그렇지 않으면 처음에 오류가 보고됩니다.

v-if:

기능: 판단을 통해 고정된 내용을 로드합니다. , true이면 로드, false이면 요소 삭제

사용처: 권한 관리, 페이지 모듈 조건부 로딩에 사용

구문: v-if="judgment 표현식" if와 같은 방식으로 사용됩니다

특징: 제어 요소를 삽입하거나 삭제해도 숨기지 않습니다

v -show:

요소는 항상 렌더링되어 DOM에 유지되며 v-show 사용법은 v-if와 동일하지만 v-show가 요소 표시를 설정한다는 점을 제외하면 보안은 v-if만큼 높지 않습니다. 없음으로 설정하면 요소가 직접 제거된다는 의미는 아닙니다.

v-ifVS. v-show

一般来说，v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

v-else

元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:

缩写：：

{{}}表达式绑定数据的时候，可以直接将数据显示在页面中（html）里面，

v-bind img src 属性，

作用：v-bind 给页面中html属性进行绑定

语法：v-bind：图片里面src属性=“data 中的图片地址”

如：

<img
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:&#39;red&#39;,fontSize:&#39;30px&#39;}
}

缩写形式：

<img :src="img" />
<div :style="styles">style</div>

v-bind添加的style样式是添加在内联中的。

v-on：

缩写形式：v-on:click ---- >@click

@+事件

作用：对页面中的事件进行绑定 vue自定义了一套事件机制

angularjs中对pc端支持比较良好，对移动端支持一般，vue主要支持移动端，也支持pc端

事件开发中，事件 v-on: 绑定在页面（view）中，再vue实例里面，在methods中去监听

在页面中 我们做的行为： v-on:click="函数名称"

函数应该写在vue实例的methods属性里面

methods也要写成对象：

methods:{
clickBtn:function(){
}
}

例：点击

methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}

   

在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值

当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)

vue中的事件列表$event