<!-- 這是我們的 View -->
<div id="example-1">
   Hello {{ name }}!
</div>
// 這是我們的 Model
var exampleData = {
   name: 'Vue.js'
}
 
// 創(chuàng)建一個(gè) Vue 實(shí)例或 "ViewModel"
// 它連接 View 與 Model
var exampleVM = new Vue({
   el: '#example-1',  // 在一個(gè)id為'example-1'的實(shí)體上掛載
   data: exampleData  // 數(shù)據(jù)流
})

<!-- 這是我們的 View -->
<div id="example-1">
   Hello {{ name }}!  <!--- Vue的數(shù)據(jù)模型用{{datamodel}}包裹起來 --->
</div>
 
// 創(chuàng)建一個(gè) Vue 實(shí)例或 "ViewModel"
// 它連接 View 與 Model<br><script>
var exampleVM = new Vue({
   el: '#example-1',  // 在一個(gè)id為'example-1'的實(shí)體上掛載
   data: {
       name: 'Vue.js'
      } // 數(shù)據(jù)流
})<br></script>

<script><br>var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 }
})<br></script>
 
vm.$watch('firstName', function (val) { // 當(dāng)firstname改變時(shí)，立馬更新vm.fullname
 this.fullName = val + ' ' + this.lastName
})
 
vm.$watch('lastName', function (val) {  // 當(dāng)lastname改變時(shí)，立馬更新vm.fullname
 this.fullName = this.firstName + ' ' + val
})

<!--- bi-direction bound --->
<div id="app">
  <p>{{message}}</p>
  <input v-model="message"> <!--Model，input輸入的數(shù)據(jù)會立即反饋到Vue實(shí)例中--> 
</div>
<script>
  new Vue({
    el: '#app',  // View
    data: {
      message: 'Hello Vue.js'
    }
  })
</script>

<!---    表單控件綁定-單選 --->
<div id="myselect">  // 外面這一層我一開始沒有加，然后就出錯(cuò)了，el好像一般是掛載在<div>構(gòu)件上
<select v-model="selected"> // data的數(shù)據(jù)類型是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>

<div v-if="questItem.type === 'textarea'"> // 注意是三個(gè)等號
    <textarea></textarea>
</div>
<div v=else>
    <div></div>
</div>

<ul id="demo">
  <li
    v-for="item in items"
    class="item-{{$index}}">  <!--- $index指的是當(dāng)前數(shù)組元素在數(shù)組中的位置 --->
    {{parentMessage}} - {{$index}} - {{item.message}} <!--一個(gè)view結(jié)構(gòu)-->
  </li>
</ul>
<button id="btn1">點(diǎn)擊我</button>
<script>
  var demo= new Vue({
    el: '#demo',
    data:{
      parentMessage: 'Parent',
      items:[
        {message: 'Foo'},
        {message: 'Bar'}
      ]
    }
  })
</script>

<template>
    <div> </div>
</template>
 
<script>
    export default{
       data(){ ...
       },
       methods:{ // 自定義方法，可對data進(jìn)行處理
          method1(){ ... }
          ...     
       },
       components: { ... }
       vuex: {
          getters:{ // 獲取store的數(shù)據(jù)
            questionnaire: state => state.currentQuestionnaire
          }
          actions: { //用來分發(fā)數(shù)據(jù)容器store中mutations方法
            action1(){ dispatch("SET_QUEST", item) } // dispatch用來調(diào)用父組件store的"SET_QUEST"方法
            action2(){ ... }
       } 
       directives: {
          'my-directive': {
            bind: function(){ //鉤子函數(shù)，只調(diào)用一次，在指令第一次綁定到元素上時(shí)調(diào)用 }
            update: function(newValue, oldValue) { //鉤子函數(shù)，在bind之后以初始值為參數(shù)第一次調(diào)用，之后每當(dāng)綁定至變化時(shí)調(diào)用 }
            unbind: function(){ //鉤子函數(shù)，只調(diào)用一次，在指令從元素上解綁時(shí)調(diào)用 }
          }
       }  
　　　　　　　　　　// 自定義指令，在<template>中以<div v-my-directives = ""> 方式調(diào)用    
     }
</script>
 
<style>  </style>

<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() === 'span') { // 當(dāng)點(diǎn)擊了選擇的按鈕后
                this.showMask = true  // 顯示彈出框
                this.questItem.type = target.dataset.type  // 設(shè)置問題的類型
             }
      }
   }
</script>

<div class = "promt-header">
  <div>
     <label> 問題名稱： </label>
     <input type = "text", placeholder = "請輸入標(biāo)題" 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() !== 'button') {
            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>