vue筆記-模板,計算屬性,class與style,data屬性

數據和方法

　　1:只有當實例被創建時 data 中存在的屬性才是響應式的,也可以預定義一些空的屬性,唯一的意外就是Object.freeze(obj),這會阻止修改現有的屬性;也就是說一個數據在放到根實例的data對象之前被Object.freeze操作過，那么就不在動態響應

//存在的屬性是響應式的,預定義空的屬性
//Object.freeze(obj) 不再響應
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  obj:{
     foo: 'bar'  
    }
  error: null
}

注意:Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性（root-level reactive properties）。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上

data:{
  obj:{
      a:1  
    }      
}
//添加了一個響應屬性了
Vue.set(vm.obj,b,2)

 

模板語法

　　1:原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

//rawHtml :是一段html代碼,雙{{}}會把他當做一段文本進行輸出,v-html則會將他當做html代碼

　　2:{{}}的語法不能作用在html標簽的特性上面,通過v-bind指令,可以綁定標簽的特性(特性就是指元素的一些屬性)

　　3:不管是標簽文本的綁定,還是特性的綁定,都是支持表達式的,但是只能包含單個表達式

 

指令:指令特性的值預期是單個 JavaScript 表達式（結果還是個值）(v-for 是例外情況）

<p v-if="seen">現在你看到我了</p>//seen就是表達式

　　1:一些指令可以帶參數和修飾符

//帶參數
//v-bind指令的參數就是標簽的特性
<a v-bind:href="url">...</a>
//v-on指令的參數就是事件名
<a v-on:click="doSomething">...</a>

//帶修飾符
<form v-on:submit.prevent="onSubmit">...</form>

 

計算屬性與偵聽器

　　計算屬性出現的目的:不管是文本,還是標簽的特性,都屬於模板的綁定,而且可以是單個js表達式,但是當表達式的邏輯太復雜就不易維護

　　1:計算屬性vs方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageA() }}"</p>
</div>
//效果是一樣的,一個是計算屬性,一個是方法,除了調用方式不一樣之外,最大的區別就是計算屬性是基於他們的依賴進行緩存的,簡而言之就是message的值不改變,
那么reversedMessage的就不會改變,但是方法不同,每次重新渲染,方法都是執行一次
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },    
  computed: {
    // 計算屬性的 getter
    reversedMessageA: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

 

　　2:計算屬性看似只能被動的根據他所依賴的屬性值改變,那是因為計算屬性默認只有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 = 'pan rui'; 一般情況下沒有效果,但是設置setter以后,就會改變計算屬性的值

　　3:偵聽器watch只有才數據發生改變,執行異步或開銷較大的操作的時候使用

 

 class與style的綁定

　　1:對象語法:作用似乎和addCLass和removeClass作用很像哦,不需要再去調用方法,直接切換布爾值就可以切換標簽的class,

　　結合返回對象的計算屬性方法更加哦,就是將classObject設置為一個計算屬性,返回值是一個對象

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false
}
//{ active: isActive, 'text-danger': hasError } 完全可以由一個對象去代替
<div v-bind:class="classObject"></div>  那么data那里相應的也用classObject

　　2:數組語法:感覺沒什么卵用

<div v-bind:class="[activeClass, errorClass]"></div>
//這里似乎只是為了設置class,那我干脆直接寫calss,不知道有什么用
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　3:style的使用

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="styleObject"></div>
//參照上面的對象語法,並且也可以結合返回對象的計算屬性使用更加