Vue新手學習初步(一)

來源為Vue官方,可以直接去參考~

首先先增加他的cdn連結,放置於body裡面最底下

<script src="https://unpkg.com/vue/dist/vue.js"></script>

放入後即可開始寫程式


1.內容放入進標籤內

意思是綁定id是app,定義訊息 ,而html綁定是用 {{}} ,所以資料會去對應名子找到訊息

<div id="app">
  {{ message }}
</div>


<script>
//對內容做更新
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!123'
  }
});
</script>

2.編輯對屬性修改

可以看到有個v-bind,這是vue上面定義的特殊屬性,而我們寫的將會綁定 在span的tilte上  變成 <span title="You loaded‧‧‧‧"></span>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

<script>
//編輯對屬性修改
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
});
</script>

3.條件成立時,顯示或隱藏

當有此資料綁定時候並且為true時候則顯示,如果我們資料條件為false,則會將 p標籤這段隱藏

  <div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

<script>
//條件式顯示與否
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});
</script>

4.For迴圈產生多筆內容(等等可以跟第5點一起看)

對於產生的內容會產生出多筆的<li>內容</li>,是使用v-for 去記錄這個陣列裡面 todo就是我跑的每一筆

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
//for迴圈跑文字
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
});
</script>

5.按鈕設定監聽事件,使我們可以對按鈕做出一些事情(可以跟第四點一起看)

我在 p標籤 產生出一個內容,並且我對button 綁定了一個事件,取名為reverseMessage

而綁定methods就是在vue的底下 加上methods:{} 在裡面寫上你那事件名稱 : function(){}

這邊裡面寫到的是,按下button後將內容顛倒過來,並且我另外自己在加了,就是將我第四點所寫的增加新的ㄧ筆,並且因為我的 i 是全域變數,所以會+1+1上去

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
var i=1;
//對於按鈕做監聽事件,去顯示資料,另外搭配加上可以增加app4東西
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
      app4.todos.push({ text: 'New item'+i });
      i++;
    }
  }
});
</script>

6.雙向綁定

在輸入框內,我div標籤id為app-6裡面的input,透過v-model綁定,也就是我只用了網頁輸入框裡面的內容,我就已經做到我js訊息的榜定,我的 data:{message:'Hello Vue!'} 會跟著一起變動,所以我的p標籤就會跟著一起改變內容

 <div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
//雙向綁定
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

以上內容都是參考官方範例來的