Question

weex最新版如何将.vue编译成.js文件

Answer 1

　　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);
　　}