vue 입문 vue 와 react 와 Angular 의 관계 와 차이
vue. js 는 angular. js 와 react 의 장점 을 겸비 하고 그들의 단점 을 제거 했다.
홈 페이지:http://cn.vuejs.org/
매 뉴 얼:http://cn.vuejs.org/v2/api/
뭐 공부 해요?
Vue 는 "MVVM 프레임 워 크 (라 이브 러 리)"로 angular 와 유사 하 며, angular 보다 작고 손 에 넣 기 쉽다.
Vue 는 사용자 인터페이스 점 을 구축 하 는 점진 적 인 프레임 워 크 로 다른 중량급 프레임 워 크 와 달리 vue 는 아래 에서 위로 증 가 된 디자인 을 사용한다.
vue 의 핵심 라 이브 러 리 는 '그림 만 주목 합 니 다', 그리고 '매우 쉽게 배 울 수 있 습 니 다' 로 다른 라 이브 러 리 나 기 존의 프로젝트 와 통합 되 기 쉽 습 니 다. 다른 한편, vue 는 단일 파일 구성 요소 와 vue 생태 시스템 이 지원 하 는 라 이브 러 리 개발 의 복잡 한 단일 페이지 응용 을 구동 할 능력 이 있 습 니 다.
vue 의 목 표 는 가능 한 한 간단 한 API 를 통 해 '응답 하 는 데이터 바 인 딩' 과 '조 합 된 보기 구성 요소' 를 실현 하 는 것 입 니 다.
3. MVC/MVP/MVM 의 차이
복잡 한 소프트웨어 는 반드시 명확 하고 합 리 적 인 구조 가 있어 야 한다. 그렇지 않 으 면 개발 하고 유지 할 수 없다.
MVC, MVP, MVVM 은 인터페이스 디 스 플레이 와 논리 코드 분 리 를 해결 하 는 데 사용 되 는 모델 입 니까?
쉽게 말 하면 대부분의 사람들 이 나타 난 코드 분리 모델 을 개발 하고 유지 하 는 데 편리 하 다 는 것 이다.
과외 확장:http://www.cnblogs.com/lori/p/3501764.html
MVC
보기 (view): 사용자 인터페이스
컨트롤 러 (controller): 비 즈 니스 논리
모델 (Model): 데이터 처리
MVP
MVP 는 전형 적 인 모델 인 MVC 에서 발 전 된 것 으로 그들의 기본 사상 은 서로 통 하 는 부분 이 있다. Controller/Presenter 는 논리 적 인 처 리 를 책임 지고 Model 은 데 이 터 를 제공 하 며 View 는 디 스 플레이 를 책임 진다.새로운 모델 로 서 MVP 와 MVC 는 중대 한 차이 점 을 가진다. MVP 에서 View 는 Model 을 직접 사용 하지 않 고 그들의 통신 은 Presenter (MVC 중의 Controller) 를 통 해 이 루어 진다. 모든 상호작용 은 Presenter 내부 에서 발생 하고 MVC 에서 View 는 Controller 를 통 해 데 이 터 를 직접 연결 하 는 모델 에서 읽 는 것 이 아니 라 Controller 를 통 해 이 루어 진다.
MVVM
MVVM 은 개념 적 으로 페이지 와 데이터 논 리 를 진정 으로 분리 하 는 모델 입 니 다. 개발 방식 에 있어 서 프론트 코드 개발 자 (JS + HTML) 와 백 엔 드 코드 개발 자 를 분리 하 는 모델 (asp, asp. net, phop, jsp) 입 니 다.
양 방향 바 인 딩: view 의 변동 은 view Model 에 자동 으로 반영 되 고 반대로 도 마찬가지 입 니 다.
7. vue 대비 다른 프레임 워 크
1、vue-angular
1) vue 는 디자인 초기 에 angular 의 사상 을 많이 참고 했다.
2) vue 는 angular 보다 더 간단 하 다.
3) vue 는 angular 보다 훨씬 작 아 지고 운행 속도 가 angular 보다 빠르다.
4) vue 와 angular 바 인 딩 은 모두 {{} 을 사용 할 수 있 습 니 다.
5) vue 명령 용 v - xxx, angular 용 ng - xxx
6) vue 에서 데 이 터 를 data 대상 에 넣 고 angular 데 이 터 는 $scope 에 연결 합 니 다.
7) vue 는 구성 요소 화 개념 이 있 고 angular 에는 없다.
2、vue-react
그들 은 모두 있다.
1) react 와 vue 는 모두 가상 DOM 가상 DOM 을 사용한다.
2), React, Vue 는 모두 응답 식 (Reactive) 과 구성 요소 화 (Composable) 의 보기 구성 요 소 를 제공 합 니 다.
3) React 와 vue 는 모두 핵심 라 이브 러 리 에 집중 하고 이에 따라 전체적인 상태 관 리 를 담당 하 는 라 이브 러 리 가 있 습 니 다.
4) 、 React 는 JSX 렌 더 링 페이지 를 사용 하고 Vue 는 간단 한 템 플 릿 을 사용 합 니 다.
5) 、 Vue 가 react 보다 더 빨리 작 동
8. 초기 vuejs
1) vuejs 생산 버 전 다운로드
다운로드 주소:http://cn.vuejs.org/v2/guide/installation.html
2) Vue 대상 을 예화
var vm = new Vue({
//옵션
})
3) 、 페이지 에서 div\# box
4) 、 설정 수정
var vw = new Vue({
el:"#box",//
data:{
//
msg:" Vue",
name："vue"
}
})5), 순환 데이터: 배열, 대상, v - for 를 사용 하여 데 이 터 를 순환 적 으로 옮 겨 다 닙 니 다.
list:[1,2,4]
{item}} list1:[{
name: "장삼",
age:30
},
{
이름: "이사",
age:30
},{
이름: "왕 오",
age:30
}]
for="item in list1">
{
{item.name}}/{
{item.age}}
6) 방법 이벤트
모든 방법 을 methods 옵션 에 설정 합 니 다.
methods:{
// ， data ， this ， v-on , @click
getName:function(){
alert(this.name)
},
run:function(){
alert(" run ");
}
}
getName
run 7) 양 방향 데이터 바 인 딩
{
{name}}8) 、 jquery 를 사용 하여 todolist 구현
a) boottstrap 도입
b) 귀속 이벤트
데이터 추가 append 사용
이벤트 삭제 사용 remove
9) vue 를 사용 하여 todolist 실현
a) boottstrap. css 도입, 편집 인터페이스
b) 예화 vue. js
data:{
info:""//
list:[]// ， v-for， ， (item,key) in list
}，
methods:{
addData:function(){
//
this.list.push(this.info)
console.log(this.info)
},
deleteData:function(key){
this.list.splice(key,1)
}
}
for="(item,key) in list">
{
{item}}
아홉.
1) 텍스트 바 인 딩
v - text 명령 어
angularjs 의 ng - bind 에 해당 합 니 다.
data 에 추가: test: "해석 할 수 있 습 니까?"
{{test}} 을 사용 하면 모든 코드 가 직접 표 시 됩 니 다. 처리 되 지 않 습 니 다.
사용 하면 모든 코드 가 직접 표 시 됩 니 다. 해석 하지 않 습 니 다.
우 리 는 v - html 을 사용 하여 코드 를 분석 할 수 있다.
2) 귀속 속성
data 에 id 추가: "이것 은 id 입 니 다"
속성 추가
여기에 {{} 을 추가 하지 않도록 주의해 야 합 니 다. angular 의 ng - src 등 속성 과 같 습 니 다.
약자 형식
url:"https://www.baidu.com/img/bd_logo1.png"
![]()
3) 사건
복습 todolist
이벤트 대상, $이벤트 전송 방법 에 주의 하 십시오.
requestData:function(event){
console.log(event)
}데이터 가 srcElement 의 dataset 에 있 습 니 다.
4) 표현 식
data:{number:200}
{
{number+200}}
data:{ok:true}
{
{ok:" "：" "}}
data:{msg:" "}
{
{msg.split("").reverse().join("")}}5) 、 계산 속성 -- 입력 알림 --- autocomplete (폼 속성)
computed:{
c:function(){
return this.a + 6;
},
reverseMsg:function(){
return this.message.split("").reverse().join("");
}
}
c={
{c}}
msg={
{reverseMsg}}message 가 바 뀌 면 다시 계산 하고 보 기 를 바 꿉 니 다. 메 시 지 를 'message 가 바 뀌 었 습 니 다' 로 바 꾸 는 단 추 를 누 르 십시오.
케이스
데이터 중
search:"",
searchList:["appale","pear","banner","orange"],
cumputed
{ {item}}
계산 속성 추가
listSearch:function(){
var arr = [];
var that = this;
this.searchList.forEach(function(val){
if(val.indexOf(that.search)!=-1){
arr.push(val);
}
})
return arr;
}순환 조건 변경
{ {item}}
6) 감청 데이터 변화 watch
// vm.$watch(vm) vm.msg vue data
/* data */
data:{
msg:' '
}
vm.$watch('msg',function(newValue,oldValue){
console.log(newValue+'-------'+oldValue);
})
data:{
msg:' '
},
watch:{
msg:function(newValue,oldValue){
console.log(newValue+'-------'+oldValue);
}
}7) 계산 속성 과 방법의 대비
사례: 문자열 뒤 집기 - 여러 번 호출
//계산 속성 은 관련 의존 이 바 뀌 었 을 때 만 값 을 다시 가 져 옵 니 다.이것 은 message 가 변경 되 지 않 으 면 reversedMessage 계산 속성 을 여러 번 방문 하면 이전의 계산 결 과 를 즉시 되 돌려 주 고 함 수 를 다시 실행 하지 않 아 도 된다 는 것 을 의미한다.
//총괄: 계산 속성 이 방법의 효율 보다 높다
8) 계산 속성 과 watch 대비
Vue. js 는 Vue 인 스 턴 스 의 데이터 변동 을 관찰 하 는 방법 $watch 를 제공 합 니 다.일부 데이터 가 다른 데이터 에 따라 변화 해 야 할 때 $watch 는 매우 매력 적 입 니 다. 특히 AngularJS 에서 왔 다 면.그러나 일반적으로 더 좋 은 방법 은 명령 식 $watch 반전 대신 속성 을 계산 하 는 것 입 니 다.다음 예 를 생각해 보 자.
{
{fullName}}
watch: {
firstName:function(val){
this.fullName=val+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+val;
}
}9) 계산 속성 실현
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
10）class
.static{
width: 200px;
height: 200px;
}
.class-a{
width: 200px;
height: 200px;
background: orange;
}
.class-b{
background: blue;
}
v-bind-class111
classObject// v - bind: class 대상 에 게 전송 하여 class 를 동적 으로 전환 할 수 있 습 니 다.v - bind: class 명령 은 일반적인 class 특성 과 공존 할 수 있 습 니 다.
var vm = new Vue({
el: '#demo', //div .class
data: {
isA: true,
isB: false,
classObject: {
active: true,
'class-a': true
}
}
})11) 스타일 문법
//v-bind:style —— CSS， JavaScript 。CSS （camelCase） （kebab-case）
Style
data: {
activeColor: 'red',
fontSize: 30
}12) 스타일 배열
Style
data: {
styleObjectA: {
color: 'red'
},
styleObjectB: {
fontSize: '30px'
}
}13) v - if - dom 조작
v-else
v-show--
if="ok"> h1
h1
if="Math.random()>0.5">
0.5
else>
0.5
data: {
ok:true
}
14. 순환 적 인 사용
다 층 순환
사용 가능 사용 가능
15、 필터
Vue.filter('reverseMsg',function(value){
return value.split('').reverse().join('');
});
Vue.filter('toDou',function(value,n1,n2){
console.log(value+'--'+n1+'--'+n2);
if(n1>n2){
return 123;
}else{
return 456;
}
})
data:{
msg:' ',
num:'123'
}
{
{msg}}
{
{msg | reverseMsg}}
{
{num}}
{
{num | toDou(12,14)}}16), ajax 요청
axios:http://blog.csdn.net/liaoxiaojuan233/article/details/54176798
fetch:https://segmentfault.com/a/1190000003810652
// 1. fetch axios
axios.get(url)
.then(function (response) {
console.log(response.data.result);
_that.list=response.data.result;
})
.catch(function (error) {
console.log(error);
});
//2. https://github.com/pagekit/vue-resource
다음으로 전송:https://www.cnblogs.com/wxtlinlin/p/6541895.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
작은 재료 : 결함 혼입, 테스트 레벨, 공정 책임결함은 후공정에서 적출할수록 비용이 부풀기 때문에 조기에 적출하는 것이 이상적입니다. 그럼에도 불구하고 결함의 종류에 따라 조기에 발견되는 것이나 후공정에서 처음으로 나타나게 되는 것이 있습니다. 예를 들어 컴파일러...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
