vue의 포인팅 문제에 대해(자세한 튜토리얼)

최근 vue+axios 사용법을 배우고 있는데, 사용 중에 문제점을 발견했습니다. 이번 글에서는 Vue가 axios를 사용할 때 발생하는 포인팅 문제에 대한 관련 정보를 주로 소개합니다. 샘플 코드를 통해 매우 자세하게 설명되어 있어 도움이 필요한 친구들이 참조할 수 있습니다.

머리말

우리 모두 알고 있듯이 axios는 vue-resource 다음에 나타나는 데이터를 요청하는 Vue용 플러그인입니다. vue가 2.0으로 업데이트된 후 작성자 Youda는 더 이상 vue-resource를 업데이트하지 않고 axios를 권장한다고 발표했습니다. 더 자세한 소개는 여기를 참조하세요: //www.jb51.net/article/109444.htm

이 글은 주로 Vue가 axios를 사용할 때 발생하는 포인팅 문제를 소개합니다. 아래에서는 많이 언급하지 않겠습니다. 자세히 소개해보자.

1. 솔루션

vue에서 네트워크 요청을 하기 위해 axios를 사용할 때, 이는 vue를 가리키지 않고 정의되지 않은 문제를 해결하기 위해 "=>"를 사용할 수 있습니다. 문제.

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 })
  .then(function(response){
  console.log(this); //这里 this = undefined
  })
  .catch((error)=> {
  console.log(error); //箭头函数"=>"使this指向vue
  });

 });
 }
}

2. 이유

ES6 내부의 화살표 함수 "=>"는 컨텍스트에 따라 결정되는 어휘 범위입니다(즉, 외부 호출자 vue에 의해 결정됩니다).

3. 주제에서 벗어남

"=>" 기능을 사용하면 이전 두 가지 작성 방법에 작별을 고할 수 있습니다.

bind(this) 익명 함수 포인터 bind(this)来改变匿名函数的this指向

hack写法 var _this= this;

Hack 작성 방법 var _this= this;:

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //这里 _this 指向vue
 })
 });
 }

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

How to Implement Random 레이아웃 Waterfall Flow in ionic3

How to Implement the back to Top effect in JS

How toimplementing element 스크롤 막대 루프 to add content in JavaScript

nginx에 vue 프로젝트 배포(자세한 튜토리얼)

js에서 타임스탬프 형식을 변환하는 방법

vue에서 dom 요소를 얻는 방법

vue에서 구현하는 방법 전체 텍스트 읽기

에서 webpack vue 프로젝트 구축 방법

nodejs에서 OAuth2.0 인증 서비스 인증 구현 방법

🎜

위 내용은 vue의 포인팅 문제에 대해(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!