校驗非空是前端開發中常見的問題。在Vue中，可以通過v-model指令將表單數據綁定到組件的數據模型中。然而，這種方式并不能保證用戶在提交表單時填寫了所有必填字段。為了解決這個問題，在Vue中可以使用過濾器、計算屬性、方法等方式校驗非空。

一種簡單的校驗非空的方式是使用v-if指令結合computed屬性或方法。在模版中，使用v-if指令判斷對應的表單字段是否填寫，若未填寫則顯示提示信息。同時，在數據模型中，使用computed屬性或方法判斷對應的表單字段是否為空。這種方式雖然簡單，但是不夠靈活，需要在模版和數據模型中重復書寫較多的代碼。

Vue.component('form-input', {
props: ['label', 'value', 'required'],
computed: {
isEmpty() {
return this.value === ''
}
},
template: `
{{ label }}:必填
`
})

另一種校驗非空的方式是使用自定義指令。自定義指令實現了全局的校驗邏輯，可以在任何組件中使用。在自定義指令中，可以通過binding參數獲取到對應的元素、表單字段的值等信息。根據這些信息，判斷對應的表單字段是否為空，并在合適的時機顯示提示信息。

Vue.directive('required', {
bind: function(el, binding) {
const inputEl = el.querySelector('input') || el.querySelector('textarea')
const messageEl = document.createElement('span')
messageEl.style.color = 'red'
function validate() {
if (!inputEl.value) {
messageEl.textContent = binding.value || '必填'
el.appendChild(messageEl)
} else {
messageEl && messageEl.remove()
}
}
inputEl.addEventListener('blur', validate)
},
unbind: function(el) {
const inputEl = el.querySelector('input') || el.querySelector('textarea')
inputEl.removeEventListener('blur', validate)
}
})
Vue.component('form-input', {
props: ['label', 'value'],
template: `
{{ label }}:
`
})

除了校驗非空，還可以根據實際需求，在自定義指令中實現其他表單校驗邏輯。例如，校驗手機號、郵箱、密碼強度等。

總體來看，在Vue中校驗非空有多種方式。簡單的方式可以使用計算屬性或方法，靈活的方式可以使用自定義指令。在實際項目中，需要根據需求和復雜度選擇合適的方式。