집 > 기사 > 웹 프론트엔드 > Vue.js 다운로드 방법 및 사용단계 분석

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

php中世界最好的语言원래의: 2018-05-22 11:01:473376검색

이번에는 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"></script>

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

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </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 id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

Vus.js 템플릿 구문

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

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

{{ msg }}

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

Directives

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

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Vue.js 기능

간단함: HTML 템플릿 + JSON 데이터, 그런 다음 Vue 인스턴스를 생성하면 매우 간단합니다.
데이터 기반: 종속 템플릿 표현식과 계산된 속성을 자동으로 추적합니다.
구성요소화: 분리되고 재사용 가능한 구성요소를 사용하여 인터페이스를 구성합니다.
경량: ~24kb min+gzip, 종속성 없음.
빠름: 정확하고 효율적인 비동기 일괄 DOM 업데이트.
모듈 친화적: NPM 또는 Bower를 통해 설치하고 작업 흐름에 원활하게 통합됩니다.

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