<!-- Vue.js demo 
     https://www.runoob.com/vue2/vue-tutorial.html
 -->

<div id="vue_det"> 
    <p>{{ message }}</p>
    <p>{{details()}}</p>
    <!--雙大括號支援js計算 -->
    <p>{{5+5}}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</
 
p><!-- 反轉字串 -->
    <!-- 和雙大括號一樣,可以輸出 -->
    <p v-html="message"></p>
</div>
<script type="text/javascript">
var data = {//繫結的資料
    message: "菜鳥教程" ,
    ok : true
    //可以新增更多繫結資料
}
var vm = new Vue({
    el: '#vue_det',  // Dom物件ID
    data: data,
    methods: {//繫結的方法
 

        details: function() {
            return  this.message + " - 學的不僅是技術，更是夢想！";
        }
    }
})

//注意字首 $
document.write(vm.$data === data) // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

<!----------------------------------------------------->
<!--
 
 https://www.runoob.com/try/try.php?filename=vue2-v-bind
     v-model 繫結 vue 中的 data.use , 複選框選中 use=true , 不選時 use=false
     v-bind  繫結 class , 根據use判斷類class1 用還是不用
 -->

<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
  <!-- v-bind綁定了id , 根據 vue 中的$data.id改變 -->
  <div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
    
<script>
new Vue({
    el: '#app',
    data:{
        use: false ,
        id : 1 
    }
});
</script>

<!----------------------------------------------------->
<!-- 
    指令 :
    v-bind 指令被用來響應地更新 HTML 屬性
    v-if 指令將根據表示式 seen 的值(true 或 false )來決定是否插入 p 元素
    v-show 指令來根據條件展示元素
    v-for 指令實現迴圈
    v-on 指令，它用於監聽 DOM 事件
    v-model 指令來實現雙向資料繫結
        複選框是true,false
        文字框等是文字值
 -->
<div id="app">
    <a v-bind:href="url">菜鳥教程</a>
    <!-- v-bind: 縮寫 : -->
    <a :href="url">菜鳥教程</a>
    
    <p v-if="seen">現在你看到我了</p>
    {{#if ok}} <h1>Yes</h1>{{/if}}    <!-- Handlebars 模板 -->
    <!-- if else ; else if 參考 https://www.runoob.com/try/try.php?filename=vue2-v-else-if-->
    <div v-if="Math.random() > 0.5"> Sorry </div><div v-else> Not sorry </div>
    
    <h1 v-show="ok">Hello!</h1>
    
    <!-- 下面是各種迴圈的例子 -->
    <ol>
      <li v-for="site in sites">{{ site.name }}</li>
    </ol>
    <ul>
      <template v-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template>
    </ul>
    <!-- 下面三個迴圈依次獲取 值 , 鍵值 , 序號和鍵值 -->
    <ul>
      <li v-for="value in object"> {{ value }} </li>
    </ul>
    <ul>
      <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>
    </ul>
    <ul>
      <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li>
    </ul>
    
    <ul> <!-- 迴圈整數 -->
    <li v-for="n in 10"> {{ n }} </li>
    </ul>
  
    <a v-on:click="doSomething">
    <!-- v-on:click縮寫@ -->
    <a @click="doSomething">
    <!-- 英文句號字尾.用於指出一個指令應該以特殊方式繫結。
         例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：表示取消事件的預設動作 -->
    <form v-on:submit.prevent="onSubmit">
        <button v-on:click="reverseMessage">反轉message字串</button>
    </form>
    
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok : true ,
    message: 'Runoob!',
    seen: true ,
    url: 'http://www.runoob.com' ,
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ],
    object: {
      name: '菜鳥教程',
      url: 'http://www.runoob.com',
      slogan: '學的不僅是技術，更是夢想！'
    }
  },
  methods: {
    doSomething : function(){
        //...
    },
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>



<!----------------------------------------------------->
<!-- 
    過濾器
    以下capitalize例項對輸入的字串第一個字母轉為大寫
 -->


<div id="app">
  {{ message | capitalize }}
  <div v-bind:id="rawId | formatId"></div>
  <!-- 過濾器可以串聯 -->
  {{ message | filterA | filterB }}
  <!-- message 是第一個引數，字串 'arg1' 將傳給過濾器作為第二個引數， arg2 表示式的值將被求值然後傳給過濾器作為第三個引數 -->
  {{ message | filterC('arg1', arg2) }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
      //arg2 : 'bbb' ,
      message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    } ,
    filterA : function(value){
        //...
    }
    filterB : function(value){
        //
    },
    filterC : function(value,arg1,arg2){
        //TODO arg2 怎麼獲取呢 , 待驗證
    }
  }
})
</script>