Vue.js 다운로드 방법 및 사용단계 분석

이번에는 Vue.js를 다운로드하고 사용하는 방법에 대한 분석을 가져오겠습니다. Vue.js를 다운로드하고 사용하는 방법을 분석할 때 주의사항은 무엇입니까?

vue.js 란 무엇인가요?

Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다.

지침 및 다운로드

Vue.js 사용 문서는 매우 완전하고 상세하게 작성되었습니다. 다음 주소에서 볼 수 있습니다: https://cn.vuejs.org/v2/guide/

vue .js를 라이브러리로 사용하는 경우, 다음 주소에서 다운로드 가능합니다: https://cn.vuejs.org/v2/guide/installation.html

Vue.js기본 개념

다운받았습니다. vue.js 이후 페이지의 script 태그를 통해 vue.js를 도입해야 합니다. 개발 중에는 개발 버전인 vue.js를 사용하고, 제품이 출시되면 vue.min.js로 대체하면 됩니다. 온라인.

script type="text/javascript" src="js/vue.min.js">

Vue 코드 인스턴스(생성됨)

nbsp;html>

  <meta>
  <title></title>


  <p>{{ message }}</p>

<script></script>
<script>
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:&#39;#app&#39;,
    data : {message:&#39;好湿呀&#39;}
  });
  </script>

데이터 및 메서드

Vue 인스턴스가 생성되면 Vue의 반응 시스템에 해당 데이터 객체 All 속성에 있는 데이터가 추가됩니다. 이러한 속성의 값이 변경되면 뷰는 새 값을 일치시켜 "응답"합니다. Vue 인스턴스에서 메소드를 정의하고 해당 메소드를 사용하여 인스턴스의 데이터 객체에 있는 데이터를 변경할 수도 있습니다. 데이터가 변경되면 뷰의 데이터도 변경됩니다.

Vue 인스턴스 코드(메소드)

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p>
</p><p>{{ message }}</p>
<button>改变数据和视图</button>

Vus.js 템플릿 구문

템플릿 구문은 데이터를 HTML에 넣는 방법을 의미합니다

데이터 바인딩가장 일반적인 형식은 다음을 사용하는 텍스트 보간입니다. "콧수염" 구문(이중 중괄호), 예:

{{ msg }}

삽입된 값 사이에 표현식을 작성할 수도 있습니다.

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a>链接文字</a>

Directives

지시문에는 "v -" 접두사가 붙은 특수 속성이 있습니다. 지시문 속성의 값은 단일 JavaScript 표현식이 될 것으로 예상됩니다. 지시문의 역할은 표현식 값이 변경될 때 관련 효과를 DOM에 적용하는 것입니다. 일반적인 명령에는 v-bind, v-if 및 v-on이 포함됩니다.

<p>是否显示这一段

<button>按钮</button></p>

Vue.js 기능

• 간단함: HTML 템플릿 + JSON 데이터, 그런 다음 Vue 인스턴스를 생성하면 매우 간단합니다.

• 데이터 기반: 종속 템플릿 표현식과 계산된 속성을 자동으로 추적합니다.

• 구성요소화: 분리되고 재사용 가능한 구성요소를 사용하여 인터페이스를 구성합니다.

• 경량: ~24kb min+gzip, 종속성 없음.

• 빠름: 정확하고 효율적인 비동기 일괄 DOM 업데이트.

• 모듈 친화적: NPM 또는 Bower를 통해 설치하고 작업 흐름에 원활하게 통합됩니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.js로 HTTP 파일 서버를 생성하는 단계에 대한 자세한 설명

Node.js와 함께 Jade 템플릿 엔진을 사용하는 단계에 대한 자세한 설명

위 내용은 Vue.js 다운로드 방법 및 사용단계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!