vue 基本文法

1.文本雙向綁定：

文法：{{ var}}

執行個體：

文本插值

<divid="app"><p>{{ message }}</p></div>
 
<script>
new Vue({ el: '#app', data: { 
message: '<h1>菜鳥教程</h1>' 
} })
</script>      

2.input 輸入綁定：

文法: v-model="object"

執行個體：

<divid="app">
<p>{{ message }}</p>
<inputv-model="message">
</div>
<script>
new Vue({ el: '#app', 
data: {message:'Runoob!' 
} })
</script>      

表單例子v-mdoel：

<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>使用者名: </span>
    <input type="text" v-model="username"><br>

    <span>密碼: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">

  </form>
</div>

<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',      

　　

3.v-for:循環數組或者對象:

例子：數組取值

<div id="app">
  <ol>
    <li v-for="vlaue in sites">
      {{ value.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>      

　　

對象循環：

v-for 可以通過一個對象的屬性來疊代資料：

兩個參數：

 三個參數 value,key,index

v-if-else:

v-bind簡寫 也可為   ：

例子：