vue note 01

數據綁定方式：

1.普通的文本 可使用 「Mustache」語法 (雙大括號) {{data}} 插在標籤內部eg:<p>{{}}</p>

//js:
data{
   msg:'welcome to vuejs!',
   ok:true,
   number:0
}

//html:
<p>{{msg}}</p>

javascript表達式:每一個綁定都只能包含單個表達式

<p>{{ok?'Yes':'No'}}</p>
<p>{{ number + 1 }}</p>
<p>{{ msg.split('').reverse().join('') }}</p>

2.v-once <p v-once>{{msg}}</p> 只會添加一次msg,當再次修改msg時，不會觸發update 機制

3.v-text 插入文本(較少使用) v-html 插入html(不推薦使用)

data{
       msg:'welcome to vuejs!',
       rawHtml:'<p>pppp</p>'
    }
    <p v-text="msg"></p>
    <p v-html="rawHtml"></p>

4.v-bind <=> ： v-on<=> @

v-bind:id='mask'
      :id='mask'

v-on:click ='showDialog'
    @click ='showDialog'

計算屬性

基於它們的依賴進行緩存的，只有在它的相關依賴發生改變時纔會從新求值。

computed: {
  now: function () {
    return Date.now()
  }
}

計算屬性默認只有 getter ，也能夠自定義setter屬性

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

如今再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也相應地會被更新。

Class 與 Style 綁定。

對象語法：

data{
    isActive:true,
    hasError:false
}

<p :class="{ active:isActive,'text-danger':hasError }" >some message</p>

---

數組語法：

//數組執行分支判斷
<p :class="[isActive?activeClass:'',errorClass]"> some message </p>
//or
//數組語法中使用對象語法
<p :class="[{activeClass:isActive},errorClass]"> some message </p>

條件渲染 v-if & v-show
不能2個一塊兒用在同一個標籤
最可能是 在v-if 條件裏面加一個
如

<p v-if="isActive&&isShow" > some message </p>

列表渲染 v-for

items是源數據 item 是數組元素迭代別名

js:
data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
//html:
<li v-for="item in items">
{{ item[key] }}
</li>

(item, index)中的 index 是索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for on a <template>

<template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
</template>

v-for with v-if

//在循環體內判斷
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

一個組件的v-for,這裏麼的:key是必須的。

<my-component v-for="item in items" :key="item.id"></my-component>

//爲了傳遞迭代數據到組件裏，咱們要用 props
//*不自動注入 item 到組件裏的緣由是，由於這使得組件會與 v-for 的運做緊密耦合。在一些狀況下，明確數據的來源可使組件可重用*
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

! 還有一個要注意的是 當你用 的是ul ol標籤的時候，一般裏面容許放<li>，能夠用 is="todo-item" 指向說明

<ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

當源數據爲json 格式對象時

//js:  
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
//html: (也能夠提供第二個的參數爲鍵名 key）：
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

要修改 vue $data裏面的 源數據 檢查注意事項

??修改數組方法有

#變異方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

vm.items.push({ message: 'Baz' });

---

#替換數組

• filter()
• concat()
• slice()

vm.items = vm.items.filter(function (item) {
  return item.message.match(/Foo/)
})
vm.items = vm.items.concat([~]);
~~

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：
1.直接賦值來設置一個項或者數組長度
如：

vm.items[indexOfItem] = newValue
vm.items.length = newLength

解決方法：
使用vue 對象的set方法 或者 數組內置 方法splice

//設置一個項
// Vue.set 
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

//改變數組的長度
vm.items.splice(newLength)

??修改對象

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 如今是響應式的
vm.b = 2
// `vm.b` 不是響應式的

那麼怎麼解決? 這裏Vue 對象的set方法又能夠幫到咱們
eg: Vue.set(object, key, value)

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

向以上 data中添加一個項 以下：

Vue.set(vm.userProfile, 'age', 27)

你還可使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：
=>

this.$set(this.userProfile, 'age', 27)

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika',
      age:27
    }
  }
})