이제 체계적으로 Vue를 배워보겠습니다(vue.js 공식 문서 참조).
Vue.js는 데이터 기반 웹 인터페이스를 구축하기 위한 라이브러리입니다. 그 목표는 응답 데이터 바인딩 및 조합 뷰 구성 요소를 달성하는 것입니다. .
Vue.js는 데이터 중심 뷰 개념을 수용합니다. 즉, 일반 HTML 템플릿에서 특별한 사용법을 사용하여 DOM을 기본 데이터에 "바인딩"할 수 있습니다. 바인딩이 생성되면 DOM은 데이터를 동기화된 상태로 유지합니다.
다음 참조 코드는 위 모델에 해당합니다
<!-- 这是我们的 View --> <div id="example-1"> Hello {{ name }}! </div> // 这是我们的 Model var exampleData = { name: 'Vue.js' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var exampleVM = new Vue({ el: '#example-1', // 在一个id为'example-1'的实体上挂载 data: exampleData // 数据流 })
보통 Vue 인스턴스에 Model을 작성하면 다음과 같은 효과가 있습니다. 위의 작성 방법:
<!-- 这是我们的 View --> <div id="example-1"> Hello {{ name }}! <!--- Vue的数据模型用{{datamodel}}包裹起来 ---> </div> // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model<br><script> var exampleVM = new Vue({ el: '#example-1', // 在一个id为'example-1'的实体上挂载 data: { name: 'Vue.js' } // 数据流 })<br></script>
이러한 프로그램이 실행되면 #example-1 컨트롤에 'Hello Vue.js!'가 표시됩니다.
지시문을 살펴보겠습니다.
지시문은 접두사 v-가 붙는 특수 기능입니다. 지시문의 값은 if 지시문과 같은 바인딩 표현식으로 제한됩니다.
hello!
다음과 같이 특정 속성 값을 특정 값에 바인딩하는 바인딩 지침도 있습니다.
여기에서는 "v-bind"가 생략되어 속성이 입력 값 할당은 "계산" 효과를 갖습니다.
계산된 속성
다른 데이터를 기반으로 데이터를 변경해야 할 때 사용하는 $watch 사용법을 소개합니다.
<script><br>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } })<br></script> vm.$watch('firstName', function (val) { // 当firstname改变时,立马更新vm.fullname this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { // 当lastname改变时,立马更新vm.fullname this.fullName = this.firstName + ' ' + val })
여기 , 모든 데이터 객체는 vm.firstname 등을 통해 액세스할 수 있습니다.
v-model
이름에서 알 수 있듯이 Vue의 데이터 모델입니다. Vue 인스턴스에서 데이터를 바인딩하는 데 사용됩니다.
<!--- bi-direction bound ---> <div id="app"> <p>{{message}}</p> <input v-model="message"> <!--Model,input输入的数据会立即反馈到Vue实例中--> </div> <script> new Vue({ el: '#app', // View data: { message: 'Hello Vue.js' } }) </script>
예를 들면 다음과 같습니다. , 바인드 선택한 값을 표시하는 양식 컨트롤을 정의합니다:
<!--- 表单控件绑定-单选 ---> <div id="myselect"> // 外面这一层我一开始没有加,然后就出错了,el好像一般是挂载在<div>构件上 <select v-model="selected"> // data的数据类型是selected,值是选取的值 <option seleceted>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#myselect', data:{ selected:[] } }) </script>
v-if, v-else
이 명령은 매우 유연하게 사용할 수 있습니다. 예를 들어, 양식에 새 질문을 생성하면 "단일 선택 질문", "객관식 질문", "텍스트 질문"의 세 가지 유형이 있습니다. 그런 다음 다양한 질문에 대해 표시되어야 하는 컨트롤이 다릅니다. 이 경우 다음 구문을 사용할 수 있습니다.
<div v-if="questItem.type === 'textarea'"> // 注意是三个等号 <textarea></textarea> </div> <div v=else> <div></div> </div>
v-for
이 구문은 배열 요소를 순회하는 데 사용됩니다. 예:
<ul id="demo"> <li v-for="item in items" class="item-{{$index}}"> <!--- $index指的是当前数组元素在数组中的位置 ---> {{parentMessage}} - {{$index}} - {{item.message}} <!--一个view结构--> </li> </ul> <button id="btn1">点击我</button> <script> var demo= new Vue({ el: '#demo', data:{ parentMessage: 'Parent', items:[ {message: 'Foo'}, {message: 'Bar'} ] } }) </script>
위 코드는 순회를 의미합니다. 데모 인스턴스의 항목 배열은 각각
전체 항목이 렌더링되는 것을 방지하기 위해 목록에서 자주 사용됩니다. :track-by = "$index"는 현재 배열 요소만 작동한다는 의미입니다.
이제 Vue에 대한 가장 기본적인 내용을 소개했습니다. 더 많은 API 정보가 필요하시면 http://cn.vuejs.org/api/
를 참고하세요. Vue 파일의 구조 및 데이터 흐름 제어
vue 파일에서는 다음 형식을 자주 볼 수 있습니다.
<template> <div> </div> </template> <script> export default{ data(){ ... }, methods:{ // 自定义方法,可对data进行处理 method1(){ ... } ... }, components: { ... } vuex: { getters:{ // 获取store的数据 questionnaire: state => state.currentQuestionnaire } actions: { //用来分发数据容器store中mutations方法 action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法 action2(){ ... } } directives: { 'my-directive': { bind: function(){ //钩子函数,只调用一次,在指令第一次绑定到元素上时调用 } update: function(newValue, oldValue) { //钩子函数,在bind之后以初始值为参数第一次调用,之后每当绑定至变化时调用 } unbind: function(){ //钩子函数,只调用一次,在指令从元素上解绑时调用 } } } // 自定义指令,在<template>中以<div v-my-directives = ""> 方式调用 } </script> <style> </style>
페이지(또는 페이지의 일부)가 소유한 컨트롤에 배치됩니다.