Vue入門

1、引入vue

方法一：下載vue.js，而後像引用jquery同樣，在HTML中使用script標籤引入

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

方法二：使用架構工具，推薦使用npm安裝後，而後能夠直接用做 AMD 模塊

var Vue = require('Vue');

 

2、聲明式渲染

hello World實例（新建html將以下內容放在body中）

<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>var app = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

除了綁定插入的文本內容，咱們還能夠採用這樣的方式將數據綁定到 DOM 元素的屬性

<div id="app-2">
  <span v-bind:title="message">Hover your mouse over me to see my title!</span>
  <!-- v-bind被稱爲指令，指令帶有前綴 v-，以表示它們是 Vue.js 提供的特殊屬性 v-bind：變量=‘數據’-->
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {message: 'You loaded this page on ' + new Date()}
})

 

3、條件

<div id="app-3"><p v-if="seen">Now you see me</p></div><!-- v-if 條件指令，v-if=‘數據（布爾值）’-->

var app3 = new Vue({
  el: '#app-3',
  data: {seen: true}//設置爲false時，P元素不渲染
})

 

4、循環

<ol id="app-4"><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- v-for 循環指令，v-for=‘列表項 in 數組數據’-->

var app4 = new Vue({
  el: '#app-4',
  data: {todos:[{text: 'Learn JS'},{text:'Learn Vue'},{text: 'Build something awesome'}]}
　//app4.todos.push({text:'New item'})會新增列表項
})

 

5、用戶輸入

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button><!-- v-on綁定事件指令，v-on：事件類型=‘調用函數’ -->
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {message: 'Hello Vue.js!'},
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

 

6、數據綁定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message"><!-- v-model數據綁定指令 v-model=‘綁定的數據’-->
</div>

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

 

7、組件

<ol>
  <todo-item></todo-item><!--自定義組件-->
</ol>

Vue.component('todo-item', {//定義一個組件
  props: ['todo'],//將數據從父做用域傳到子組件
  template: '<li>{{ todo.text }}</li>'
})

如下有數據傳遞的組件

<ol id="app-7">
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  <!--先循環從groceryList數組中分別獲取列表項爲item，將item賦值給todo分別傳遞給子組件-->
</ol>

Vue.component('todo-item', {
  props: ['todo'],//子元素經過props接口實現與父元素的數據傳遞
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {groceryList: [{ text: 'Vegetables' },{ text: 'Cheese' },{ text: 'Whatever' }]}
})