表單開發肯定是日常開發中必不可少的環節，可是設計圖經常會有表單預設值的設計，例如:
需求方的需求點是#：在沒有輸入值的時候顯示預設值，在輸入值的時候顯示輸入值。
通常就能想到用placeholder來解決這個問題，通常會用v-model來綁定data中的值。然後，data的值再設定預設值為空
//script data(){ return { index:0, name:'' } } //template
以上這種效果是,第一個input的placeholder的值顯示不出，顯示了index的值：0 ，不符合需求
第二種能顯示placeholder的值,需求滿足。
但是一些複雜的需求，例如，讓使用者選擇城市名稱(city)和國家名稱(country)，最後在一個變數(countryAndCity)上顯示，這個時候就要用computed
//template //script data(){ return { city:'', country:'' } }, computed:{ countryAndCity () { let str = '' if(this.city && this.country){ str = `${this.city}+${this.country}` } return str } }
在上面就需要做個判斷，當city和country有值的情況才會顯示結果，否則顯示placeholder的值。
諸如經過設計師設計的單選和多選按鈕
單選按鈕就比較簡單了
//template
上面很簡單，大概看看就懂了，這是單選的情況，那要是多選的情況呢，那就要換個思路了
首先換個數據格式
data(){ return { list:[ {text:'aa',isActive:false}, {text:'bb',isActive:false} {text:'cc',isActive:false}' ] } }, methods:{ select(index){ this.list[index].isActive = !this.list[index].isActive } }
然後template就要變成這樣
動態元件一般很少用到，但是要做動態引入元件的時候真的超級好用。之前做過的組件配置系統核心就是它。我用的是動態元件循環，然後用is取得元件名，用props取得各個元件的自訂props
componentList:[{ name:'index',props:{title:'title'}}]
created和mounted在客戶端渲染時期window物件都是存在的，所以可以直接操作。
但是在服務端渲染時期，它們兩者的window都是不存在的，所以要加一句判斷,在所有邏輯前面
if(typeof window !== 'object') return ;
基於組件化思維，很多時候我們會把一個頁面拆分成幾個組件，然後會提取一些公用的組件，比如dialog彈出窗口組件，他的打開和關閉，都是根據引用組件頁面的data的一個值來決定，
//app.vue data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true } }
但是關閉按鈕通常是寫在dialog元件內部的，也就是說，在引用元件頁面是沒有這個按鈕可以點擊的，
所以，可以在dialog裡面將點擊時間的訊號傳遞出來，引用元件頁面接收到了訊號，再控制關閉
//dialog.vue点击关闭
methods:{ close() { this.$emit('close') } } //app.vue data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true }, closeDialog(){ this.isDialog = false } }
大致的思路就是把真正關閉的操作，放在isDialog的頁面，方便操作。
後續還會出一個不這樣引用，直接在methods的方法中引用的公用元件寫法，敬請期待
vue中的css可以用scoped這個關鍵子來限制css的作用域
這個日常就會用到，因為這樣就不用考慮class的命名會重合，加上使用sass、less、stylus、postcss等css處理器，效果簡直是槓槓的。
但如果你想改動到body這個元素的css樣式，但又不想改動公用layout模板。那你就可以在一個vue檔案寫兩個style標籤
相關推薦：
以上是值得收藏的vue開發技巧實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
