Vuejs介紹(一)

Vuejs是個數據驅動的組件化框架

能大大提高開發效率,維護性

怎麼入門

帶着問題來學習
0 基本邏輯
1 組件怎麼寫,怎麼註冊,怎麼使用
2 組件怎麼獲取數據,渲染數據,監聽數據的變化
3 組件的事件怎麼寫

引入

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

基本邏輯

渲染數據

el 可以理解獲得dom節點
data Vue 實例的數據對象
雙花括號 輸出數據
用過JQuery的朋友一定覺得比JQuery好用,這麼輕易就輸出數據了
html

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

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

條件語句

v-*一般都是vue指令
v-if是條件判斷,這個語句是說如果seen屬性值爲真的話,這個p的dom節點就顯示,否則隱藏
html

<div id="app-3">
  <p v-if="seen">現在你看到我了</p>
</div>

js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

循環語句(常用於列表數據輸出)

html

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

js

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})