Vuejs使用

關於class與style綁定的問題

說明：對於須要連字符的字段須要加上引號，否則vue沒法識別，

例如：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

此處的text-danger是vuejs須要識別的變量，因此必須加上引號，否則不起做用（至於前面的active不加引號是由於沒有連字符，vuejs識別，因此能夠）

 

組件中的字面量語法與動態語法

說明：父組件給子組件傳值的時候若是是字面量，子組件接收到的都是字符串，沒有其餘形式；可是若是用動態語法傳遞變量則是javascript對象。

例如：

<!-- 傳遞了一個字符串"1" -->
<comp some-prop="1"></comp>
<!-- 傳遞實際的數字 -->
<comp :some-prop="1"></comp>

第一行傳給子組件的就是字符串，而第二行則傳給子組件的是數字

 

vue-devtools使用

• 下載vue-devtools插件
• 地址欄輸入chrome://extensions/進入擴展中程序設置，勾上容許訪問文件網址
• 在調用vue的頁面在引入vue.js以後js設置Vue.config.devtools = true;

 

異步執行DOM更新

說明：Vue 是異步執行 DOM 更新的，當更改數據後並不會當即更新dom，而是先進入隊列，然後更新dom，因此想要數據更新後當即操做與dom相關的事情，能夠用nextTick函數

例如：當你設置 vm.someData = 'new value' ，該組件不會當即從新渲染

Vue.nextTick(function () {
  //do something
});
vm.$nextTick(function () {
  //do something
})