weex怎么编译html文件,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);

}