Vue學習筆記

 

 

 

最近在寫後臺界面，用到了大量的表單提交，學習到了不少知識

vue中的表單提交併不知道是什麼樣子的，可是至少目前我看到了一種特別的方法

<form v-on:submit.prevent="sub">
　　<button>tijiao</button>
</form>

表單提交是有默認事件的，會刷新界面，阻止事件的默認行爲就用到了preventDefault，這裏知識點是，提交的行爲在哪裏觸發，以前都是綁定在一個按鈕上，而後

一個ajax提交數據，不是很難的哈，估計vue的表單提交就是想上面這樣，直接寫在form裏面，惋惜的是如今我還不知道數據請求究竟是咋整的，⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

 

<div class="static" :class="{active:isActive,'text-danger':error}">style || class</div>

上面的text-active必須是用單引號包起來，否則的話，就會報錯，很神奇，與jquery中的class是很類似的，原理是同樣的

 

<div class="static" :class="{active:isActive,textDanger:error}">style || class</div>

若是寫成這樣的話，顯示的仍是textDanger,而不是想jquery那樣，顯示的是text-danger,這就是區別了

 

'text-danger': this.error && this.error.type === 'fatal'　　　　error: null

和vue無關，只是其中的error.type === ‘fatal’  沒法理解，究竟是想表達什麼意思，很糾結啊，難道null的類型還有其餘的？感受本身好像錯過了什麼

 

安裝自動補全前綴插件postcss-loader  

還須要在webpack-config.js中設置

postcss: [
require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })
]

纔會實現自動補全

 

 

安裝sass語法插件node-sass  sass-loader

loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
},

添加上面的參數，可實現sass語法，可是在實際的使用中，<style lang="scss"></style>

這和本身印象中的sass語法是同樣的，不是很難

 

 

 

對於webpack.config.js中的配置，只能是須要啥，再去配置，對webpack徹底沒概念，只能是一點一點的摸索了

上面的配置也不必定是對的，可是對於學習的初期，不要過度的區糾結這些東西，只要能實現本身想要的東西就行了，等本身能作項目了，真正的掌握了，再去研究webpack的配置

 

還有就是好像是須要style-loader，可是我上面沒配置，也沒有安裝依賴，運行也是麼問題的。

 

字符串模板，好像就是傳說中的js模板引擎，以前本身研究過，可是一直沒在實際的項目中使用過，很遺憾

忽然好好看一下這裏的寫法，感受很陌生啊，不是嗎？爲啥一個模板沒有根元素，仍是能夠不報錯？很神奇，難道是本身理解錯了，一直以來本身都是認爲，每個模板都是必須有一個根元素的，如今看來並非這樣的，不是嗎？或許仍是本身學的天少了

 

 

 如今理解了上面的內容究竟是啥意思了，只是本身見到的代碼仍是不多的，因此如今看到不少寫法都我是很懵逼的，

 

同時能夠一點帶面，直接在一個模板中引入了幾個模板，這時就出現了子模板與父模板的概念，不是很難的哈，其實就至關於咋ijs中import另外的模板，只不事後面這種寫法是有一個標籤名，其實原理都我是同樣的，感受組件的獨立實際上是爲了代碼更加的簡潔，可是回過頭來想一想，其實這裏的一切都是能夠組合在一塊兒，也就沒了子組件與父組件的區別，不是嗎？    感受本身慢慢的上道了

 

 

這裏恰好和本身中午遇到的後臺給的接口是同樣的，傳統上，接口都是上面那中形式，可是今天后臺忽然給了我一個下面這種新式的接口，懵逼

 

還有就是對象是在怎麼遍歷的，爲啥會出現他的值，並且相應的鍵就是名稱，index，想不通

 

 

 這個纔是標註的格式，可是仍是不理解

 

第一種格式是接口中最多見的形式，上面這種則是最原始的格式，遍歷一個數組，可是我一直在想像，到底遍歷一個對象的應用場景是什麼樣的？

 

在使用v-model的時候，建立一個初始值，雖然很簡單，可是對於我這個剛學習的人來講，感受仍是很神奇的，這就是所謂的數據綁定吧，如今仍是沒有一點概念，我有一個input唄綁定了，我還想操做input的值，說到最後，仍是要這樣來作的，慢慢積累吧，也算是以個新的知識點了，頗有趣

 

 

js的set方法到底應該傳幾個值，歷來沒使用過，好像應用場景不是很常見

 

這裏的賦值很糾結，爲啥會是一個null呢，實驗證實，‘’  也是能夠的，可是爲啥會是使用一個null呢，很蛋疼，至少本身在賦值的時候一個沒有這樣來作，難道是獲取到的值是一個對象？對比以前的，checkbox當只有一個的時候，綁定的是布爾值，多個的時候綁定的是一個數組，radio綁定的是一個字符串，各有不一樣，可是selected綁定的是一個null，獲得的也是一個字符串，很糾結

感受好像懂了，表單這一塊就是這麼糾結，沒啥技術含量，這幾天作後臺，已經把表單摸的很透了

 

 

以前我所理解的checkbox綁定的都是布爾值，仍是理解錯了，不是嗎，仍是能夠綁定其餘的，這裏就能夠綁定一個控字符串，效果很棒，

這裏的v-bind:true-value   v-bind:false-value也是必定的，改變了的話，就會變成最原始的樣子，學到了不少啊

 

<input v-model.lazy="msg" @change="alert(1111)">

 

下面是個人寫法，可是不懂.lazy究竟是幹啥的，到底有啥用呢

 

官網上說的data的共用究竟是啥意思呢？沒法理解。。。。。。。。。

 

 

官網上的解釋是必需要整成駝峯的形式，可是實際的測試發現並非這樣的哈，這些只是細節，可是你仍是要養成一個習慣，在html中仍是不要使用駝峯的形式

 

 

在實際的測試中，並沒發現其中的區別是啥，可是總感受這裏包含了不少知識，綁定的num爲啥會當作是一個字符串呢？還有把綁定的值當作是字符串究竟是啥意思？總感受本身好像是錯過了什麼。。。。。

 

 

下面的例子就很好的說明了上面的問題，若是數據不是綁定的話，仍是會幫錯的

 

這個報錯很好的說明了上面的問題，不是嗎，只有綁定的時候，纔會將num當作是一個真正的數字，amazing