VueJS 종합 분석
- 高洛峰원래의
- 2016-12-07 11:32:413369검색
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:'xinxin',password:'123'}
}
});
</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-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:'red',fontSize:'30px'}
}
缩写形式：
<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(){
}
}
例：f8901362721699ea6890ed926129bc8b点击65281c5ac262bf6d81768915a4a77ac0
methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}
在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值
当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)
vue中的事件列表$event