VUE 學習筆記

買了課程還是要看一下，
做一下記錄

實例的部分

vue 一個頁面可以有多個 vue 的實例（課程是說應用程式）

一個頁面可以有多個 vue 的實例

<div id="app">
  {{text}}
</div>
<div id="app2">
  {{text}}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      text: '這是一段話'
    }
  })
  var app2 = new Vue({
    el: '#app2',
    data: {
      text: '這是一段話2'
    }
  })
</script>

vue 的實例不能做成巢狀的

vue的實例不能做成巢狀的

<div id="app">
  {{text}}
  <div id="app2">
  {{text}}
  </div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      text: '這是一段話'
    }
  })
  var app2 = new Vue({
    el: '#app2',
    data: {
      text: '這是一段話2'
    }
  })
</script>

資料綁定跟資料呈現的方式

<div id="app">
  <!-- 直接資料輸出 -->
  {{ message }}
  <!-- v-text 把資料輸出到現在的這個 html element 裡面，但是資料內容會是純文字 -->
  <div v-text="message"></div>
  <!-- v-html 把資料輸出到現在的這個 html element 裡面，但是資料內容可以是html -->
  <div v-html="message"></div>
  <input type="text" v-model="message">
</div>

<script>
var app = new Vue({
  el: '#app',
  // 在此建立資料內容

  data: {
    message: '哈囉'
  }
})