Vue.js 다운로드 방법 및 사용단계 분석
- php中世界最好的语言원래의
- 2018-05-22 11:01:473363검색
이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Node.js로 HTTP 파일 서버를 생성하는 단계에 대한 자세한 설명
Node.js와 함께 Jade 템플릿 엔진을 사용하는 단계에 대한 자세한 설명
위 내용은 Vue.js 다운로드 방법 및 사용단계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!