1. weex最新版如何將.vue編譯成.js文件
1.components 目錄新建validate.js:
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
我插件定義屬性
2.入口文件jssrc/index.js 加入:
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我user-username.vue 組件驗證:
mounted(){
alert(this.$myName);
},
瀏覽器訪問登錄頁面功彈:
寫圖片描述
4.剛剛我已經插件定義屬性馬何定義:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同使用該:
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
寫圖片描述
我修改user-name.vue 組件實現文本框驗證:
用戶名
用戶合
寫圖片描述
自定義指令
文檔:
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 沒填寫,默認true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 調用
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我自定uname 指令面看何使用
我組件模板使用 v-uname 並且給綁定username數據
我打瀏覽器控制台:
寫圖片描述
說明我定義指令執行:
bind(){
console.log("bind"); // 調用
},
3、面我看update 東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}
2. volar怎麼快速生成vue模板
配置自定義的snippets。
通過vscode的snippets我們可以自己配置自定義的snippets,從而實現快捷生成代碼片段,在VsCode里按F1,輸入snippets->選擇配置用戶代碼片段,選擇後出現選擇配置的界面,這里我們對Vue文件的代碼片段進行配置,然後就完成了。
隨著vscode以及vue的越來越普及,vetur這個名字也越來越被人熟知。vetur是一個vscode插件,用於為.vue單文件組件提供代碼高亮以及語法支持。