探索Vue.jscomponent內容實現

現在來系統地學習一下Vue（參考vue.js官方文檔）:

Vue.js是一個建構資料驅動的web介面的函式庫，其目標是實現回應的資料綁定和組合的試圖元件。

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  // 数据流
})

通常我們會把Model寫在Vue實例當中，下面寫法與上面寫法效果一樣：

<!-- 这是我们的 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!'。

下面來看看指令(Directives)：
指令是特殊的帶有前綴v- 的特性，指令的值限定為綁定表達式，例如一個if的指令：

hello!

還有綁定指令，即將某些屬性值與一些值相綁定，例如：

這裡省略了“v-bind”，使得input的屬性值賦值具有“計算”的效果。

計算屬性

這裡介紹一下$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>

以上代碼的意思是遍歷demo實例中的items數組，將裡面的每一個數組元素（'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>

在methods中經常使用到「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>

最後講講this.$els:一個對象，包含註冊有v-el的DOM元素

<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>

上面的程式碼是不完整的，但是可以看到，v-el把該控制項掛載在一個名字為"item-title"的實體中，我們可以透過this.$els.itemTitle將其提取出來

要使用該控制項的屬性值（輸入值），可以這樣：

this.$els.itemTitle.value

以上就是本文的全部內容，希望對大家的學習有幫助，也希望大家多多支持PHP中文網。

更多探索Vue.jscomponent內容實作相關文章請關注PHP中文網！