1.data基礎用法

在data部分宣告的字串，template部分可以以{{}}的形式直接引用

<template>
  <div>
    <div>data:{{msg}}</div>   <!--結果: data:helloworld-->
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:'helloworld'
      }
    }
  }
</script
 
>

2.直接嵌入js程式碼

<template>
  <div>
    <div>{{number + 1}}</div>   <!--結果: 2-->
  </div>
</template>
<script>
  export default {
    data(){
      return{
        number:1
      }
    }
  }
</script>

3.v-html指令

v-html可以提供輸出HTML程式碼的功能

<template
 
>
  <div>
    <div v-html="rawHtml"></div>  
    <!--
    渲染後的程式碼為：
    <div>
        <li>123</li>
    </div>
  --> 
  </div>
</template>
<script>
  export default {
    data(){
      return{
        rawHtml: '<li>123</li>'
      }
    }
  }
 
</script>

4.v-bind指令

v-bind用於繫結HTML屬性

<template>
  <div>
    <div v-bind:class="red">123</div>
    <!-- 同等於<div class="red active">123</div>  -->
  </div>
</template>
<script>
  export default {
    data(){
      return{
        red:'red active'
      }
    }
  }
</script>

4.v-on指令

v-bind用於繫結事件監聽器

<template>
  <div>
    <div v-on:click="say()">點選我</div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
      },
    methods:{
      say(){
        alert('Hi');
      }
    }
    }
  }
</script>

4.監聽器

<template>
  <div>
    <div>{{message | capitalize}}</div>  <!--結果: 123-->
  </div>
</template>
<script>
  export default {
    data(){
      return{
      message: 'message'
      },
    filters:{
      capitalize(){
        return '123'
      }
    }
    }
  }
</script>