Vue.js컴포넌트 콘텐츠 구현 살펴보기

이제 체계적으로 Vue를 배워보겠습니다(vue.js 공식 문서 참조).

Vue.js는 데이터 기반 웹 인터페이스를 구축하기 위한 라이브러리입니다. 그 목표는 응답 데이터 바인딩 및 조합 뷰 구성 요소를 달성하는 것입니다. .

Vue.js는 데이터 중심 뷰 개념을 수용합니다. 즉, 일반 HTML 템플릿에서 특별한 사용법을 사용하여 DOM을 기본 데이터에 "바인딩"할 수 있습니다. 바인딩이 생성되면 DOM은 데이터를 동기화된 상태로 유지합니다.

다음 참조 코드는 위 모델에 해당합니다

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!
</div>
// 这是我们的 Model
var exampleData = {
   name: &#39;Vue.js&#39;
}
  
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
   el: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   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: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   data: {
       name: &#39;Vue.js&#39;
      } // 数据流
})<br></script>

이러한 프로그램이 실행되면 #example-1 컨트롤에 'Hello Vue.js!'가 표시됩니다.

지시문을 살펴보겠습니다.
지시문은 접두사 v-가 붙는 특수 기능입니다. 지시문의 값은 if 지시문과 같은 바인딩 표현식으로 제한됩니다.

hello!

다음과 같이 특정 속성 값을 특정 값에 바인딩하는 바인딩 지침도 있습니다.

여기에서는 "v-bind"가 생략되어 속성이 입력 값 할당은 "계산" 효과를 갖습니다.

계산된 속성

다른 데이터를 기반으로 데이터를 변경해야 할 때 사용하는 $watch 사용법을 소개합니다.

<script><br>var vm = new Vue({
 el: &#39;#demo&#39;,
 data: {
  firstName: &#39;Foo&#39;,
  lastName: &#39;Bar&#39;,
  fullName: &#39;Foo Bar&#39;
 }
})<br></script>
  
vm.$watch(&#39;firstName&#39;, function (val) { // 当firstname改变时，立马更新vm.fullname
 this.fullName = val + &#39; &#39; + this.lastName
})
  
vm.$watch(&#39;lastName&#39;, function (val) {  // 当lastname改变时，立马更新vm.fullname
 this.fullName = this.firstName + &#39; &#39; + 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: &#39;#app&#39;,  // View
    data: {
      message: &#39;Hello Vue.js&#39;
    }
  })
</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: &#39;#myselect&#39;,
    data:{
      selected:[]
    }
  })
</script>

v-if, v-else　

이 명령은 매우 유연하게 사용할 수 있습니다. 예를 들어, 양식에 새 질문을 생성하면 "단일 선택 질문", "객관식 질문", "텍스트 질문"의 세 가지 유형이 있습니다. 그런 다음 다양한 질문에 대해 표시되어야 하는 컨트롤이 다릅니다. 이 경우 다음 구문을 사용할 수 있습니다.

<div v-if="questItem.type === &#39;textarea&#39;"> // 注意是三个等号
    <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: &#39;#demo&#39;,
    data:{
      parentMessage: &#39;Parent&#39;,
      items:[
        {message: &#39;Foo&#39;},
        {message: &#39;Bar&#39;}
      ]
    }
  })
</script>

위 코드는 순회를 의미합니다. 데모 인스턴스의 항목 배열은 각각

태그에 각 배열 요소('Foo', 'Bar')를 표시합니다.

전체 항목이 렌더링되는 것을 방지하기 위해 목록에서 자주 사용됩니다. :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: {
          &#39;my-directive&#39;: {
            bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 }
            update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
            unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
          }
       } 
　　　　　　　　　　// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用   
     }
</script>
  
<style>  </style>

"this" 키워드는 Vue 구성 요소 인스턴스를 가리키는 메소드에서 자주 사용됩니다.

event.target: 이벤트를 발생시키는 특정 컨트롤은 버블링을 발생시키지 않습니다. 누가 이벤트를 발생시켰는지에 대한 컨트롤을 잠글 때 자주 사용됩니다. , 예:

<div @click.stop = "addItem($event)">
   <span data-type = "radio">单选题</span>
   <span data-type = "checkbox">多选题</span>
   <span data-type = "textarea">文本题</span>
</div>
  
<script>
   export default{
      method: {
          addItem(event){
             let target = event.target
             if(target.nodeName.toLowerCase() === &#39;span&#39;) { // 当点击了选择的按钮后
                this.showMask = true  // 显示弹出框
                this.questItem.type = target.dataset.type  // 设置问题的类型
             }
      }
   }
</script>

마지막으로 이에 대해 이야기해 보겠습니다.$els: v-el

<div class = "promt-header">
  <div>
     <label> 问题名称： </label>
     <input type = "text", placeholder = "请输入标题" v-el: item-title/>
  </div>
</div>
<div class = "promt-footer" @click.stop = "handleInput(&event)">
   <button type = "button" data-operation = "confirm"> 确定 </button>
   <button type = "button" data-operation = "cancel"> 取消 </button>
</div>
  
<script>
   methods: {
        handleInput(event) {
          let target = event.target
          if(target.nodeName.toLowerCase() !== &#39;button&#39;) {
            return
          }
          let itemTitle = this.$els.itemTitle
          let itemSelections = this.$els.itemSelections
          if(target.dataset.operation === "confirm") {
            if(this.questItem.type === "textarea") {
              this.addTextarea(itemTitle)
            } else {
              this.addSelections(itemTitle, itemSelections)
            }
          } else {
            this.handleCancel()
          }
        },
   }
</script>

에 등록된 DOM 요소가 포함된 객체 위의 코드는 불완전하지만 v-el은 "item-title"이라는 엔터티에 컨트롤을 마운트합니다. 이를 통해 추출할 수 있습니다.$els.itemTitle

속성 값을 사용하려면 컨트롤(입력 값)은 다음과 같습니다.

this.$els.itemTitle.value

위 내용이 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되고, 모두가 중국어 웹사이트를 지원하기를 바랍니다.

Vue.js컴포넌트 콘텐츠 구현에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!