Vue入門レベルチュートリアル
8933 ワード
Vue入門レベルチュートリアル
vueは現在比較的火の先端フレームであり、その優越性は私もあまり言わない.
私が初めて使ったvue-cliでプロジェクトを作ったときも冗談をたくさん言ったのを覚えています.
以下はいくつかの自分の経験の話を提供して、みんなが伝言を評論して共に進歩を学ぶことを歓迎します.
vueの紹介文法これは自分でいくつかの命令とリストのレンダリングを見に行く必要があります
コマンドラインツール(CLI)
コマンドラインパッケージコンパイル
上のは簡単ですが、固定的な思考で冗談を言う人が多いです.今年:私は1家の仮想貨幣の会社(合法でない会社に私は1ヶ月滞在して退職しました)に着いて、プロジェクトは2つの95年の先端が開発したので、vueを使ったことがあるかどうか分からないで、とても組み立てることができて、私はちょうどプロジェクトに熟知していないことを表明して、彼にコードを整理してオンラインにアップロードさせて、結果は私に未コンパイルのvueコードをアップロードして、また私にどうしてアップロードして運行していないことを質問しました.私も酔っ払っていた.
次に、よく使われる、簡単な命令を自分で見ればできると思います.
プラグインの開発
プラグインの例:
新規ファイル:plugin.js
プラグインのパッケージ、ついでにいくつかのよくある関数を提供します
import Cookies from'js-cookie'export default{install(Vue,options){//メールボックス正則判断Vue.prototype.emailRel=function(email){var rel=/^[a-z 0-9]+([.-]*[a-z 0-9])*@([a-z 0-9]+[-a-z 0-9]*[a-z 0-9]*[a-z 0-9]*[a-z 0-9]+.){1,63}[a-z0-9]+$/;if(rel.test(email){return true}else{return false}//パスワード正則判断Vue.prototype.passwordRel=function(psw){//少なくとも6-15文字、少なくとも1つの大文字、1つの小文字、および1つの数字、その他は任意の文字var rel=/^(?=.*[a-z](?=.*[A-Z])(?=.*d)[sS]{6,15}$/if(rel.test(psw){return true}else{return false}//cookie Veeを設定することができる.prototype.setCookie=function (name,value,times) { Cookies.set(name, value, { expires: parseInt(times)/24 });}//クッキーVueを取得する.prototype.getCookie=function(name){return Cookies.get(name)}//cookie Veeを削除する.prototype.removeCookie=function(name){return Cookies.remove(name)}//検証コードのカウントダウンVueを取得する.prototype.cutTime=function (event,time,callback) { var target=event.target,_time=parseInt(time) || 60; var set=setInterval(function () { if(_time>0){ _time--; target.innerHTML=_time;}else{target.innerHTML='携帯電話認証コード取得';clearInterval(set);callback();}},1000)}//文字列変換オブジェクトVue.prototype.toObj=function(str){var arr=str.split('&')、obj=new Object();for(let i in arr){var thisArr=arr[i].split('=');obj[thisArr[0]=thisArr[1]}return obj}//base 64ピクチャアップロード(ie 9と互換性なし)Vue.prototype.uploadImg=function (file,scale) { return new Promise(function (resolve,reject) { let _scale=scale || 1; let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); let img = new window.Image(); let imgType=file.type; img.src = URL.createObjectURL(file); img.οnlοad=function () { cvs.width = img.width*_scale; cvs.height = img.height*_scale; ctx.drawImage(img, 0, 0, cvs.width, cvs.height); resolve(cvs.toDataURL(imgType)); } });}function upload(){var file=this.files[0];uploadImg(file,1).then(function(data){//dataはbase 64戻り値})/ie 9ブラウザVueであるか否かを判断する.prototype.isIE_9=(navigator.userAgent.indexOf("MSIE 9.0")>0);//subtypeデータを公開してデジタルVueにカプセル化する.prototype.enAssembly=function (arr) { var newArr=[],cArr=[]; var sortArr=arr.sort(function (a,b) { return a-b }); for(let i in sortArr){ if(parseInt(sortArr[i])<=9){ newArr.push(sortArr[i]) }else { cArr.push(sortArr[i]) } } var toString=newArr.join()+'0'+cArr.join(); return toString.replace(/\,/g,'');}//ビット演算のようなパッケージVue.prototype.enBitFn=function (arr) { let bitArr=[],bitArrStr; for(let i in arr){ bitArr.push(0) } let choseArr=arr.filter(function (ele,index,arr) { return ele.click===true }); for(let j in choseArr){ bitArr[choseArr[j].subtype-1]=1 } bitArrStr=(bitArr.join()).replace(/\,/g,'');return parseInt(bitArrStr,2)/2進数文字列10進数};//ビット演算復号Vue.prototype.deBitFn=function(num,arr){let toBit=num.toString(2)//10進数変換バイナリ文字列bitArr=toBit.split(')、newArr=[];if(bitArr.length let num=arr.length-bitArr.length;for(let i=0;i Arbit.splice(0,'0')}}for(let i in bitArr){ if(bitArr[i]==='1'){ newArr.push(arr[i]) } } return newArr };//配列脱重Vue.prototype.unique=function(Arr){var isNum=Arr.every(function(value,index,arr){return isNaN(parseFloat)//配列要素が純粋な数字であるか否かを判断するのはtrueを返すのではなく、渋を返すのである}); var arr=[];if(isNum){arr=Arr.sort();//先ソート}else{arr=Arr.sort(function(a,b){return a-b});//}var res=[arr[0]; for(var i = 1; i < arr.length; i++){ if(arr[i] !== res[res.length - 1]){ res.push(arr[i]); } } return res; };//tokenが無効になってホームページVueに戻ります.prototype.isLose=function () { if(!this.getCookie('token')){ this.$router.push({path:"/"}) } } }}
共通プラグインの登録
import Plugin from './assets/js/plugin.js'Vue.use(Plugin);
プラグインの呼び出し
各コンポーネント内でexport default{name:“Header”,data(){return{loginBool:false,tel:this.getCookie('tel'),//cookie}}methods:{//ログインloginOut(){this.removeCookie('token');//cookie this.removeCookie('tel');this.tel='; } } }
以上、いくつかのvueグローバルメソッドのパッケージを提供しただけで、使い方が間違っていることや、より良い使い方があることを発見したら、必ずメッセージを残してください.
vueは現在比較的火の先端フレームであり、その優越性は私もあまり言わない.
私が初めて使ったvue-cliでプロジェクトを作ったときも冗談をたくさん言ったのを覚えています.
以下はいくつかの自分の経験の話を提供して、みんなが伝言を評論して共に進歩を学ぶことを歓迎します.
vueの紹介文法これは自分でいくつかの命令とリストのレンダリングを見に行く必要があります
コマンドラインツール(CLI)
# vue-cli
$ npm install --global vue-cli
# webpack
$ vue init webpack my-project
# ，
$ cd my-project
$ npm run devコマンドラインパッケージコンパイル
#
$ bower install vue上のは簡単ですが、固定的な思考で冗談を言う人が多いです.今年:私は1家の仮想貨幣の会社(合法でない会社に私は1ヶ月滞在して退職しました)に着いて、プロジェクトは2つの95年の先端が開発したので、vueを使ったことがあるかどうか分からないで、とても組み立てることができて、私はちょうどプロジェクトに熟知していないことを表明して、彼にコードを整理してオンラインにアップロードさせて、結果は私に未コンパイルのvueコードをアップロードして、また私にどうしてアップロードして運行していないことを質問しました.私も酔っ払っていた.
次に、よく使われる、簡単な命令を自分で見ればできると思います.
プラグインの開発
：MyPlugin.install = function (Vue, options) {
// 1.
Vue.myGlobalMethod = function () {
// ...
}
// 2.
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// ...
}
...
})
// 3.
Vue.mixin({
created: function () {
// ...
}
...
})
// 4.
Vue.prototype.$myMethod = function (methodOptions) {
// ...
}
}プラグインの例:
新規ファイル:plugin.js
プラグインのパッケージ、ついでにいくつかのよくある関数を提供します
import Cookies from'js-cookie'export default{install(Vue,options){//メールボックス正則判断Vue.prototype.emailRel=function(email){var rel=/^[a-z 0-9]+([.-]*[a-z 0-9])*@([a-z 0-9]+[-a-z 0-9]*[a-z 0-9]*[a-z 0-9]*[a-z 0-9]+.){1,63}[a-z0-9]+$/;if(rel.test(email){return true}else{return false}//パスワード正則判断Vue.prototype.passwordRel=function(psw){//少なくとも6-15文字、少なくとも1つの大文字、1つの小文字、および1つの数字、その他は任意の文字var rel=/^(?=.*[a-z](?=.*[A-Z])(?=.*d)[sS]{6,15}$/if(rel.test(psw){return true}else{return false}//cookie Veeを設定することができる.prototype.setCookie=function (name,value,times) { Cookies.set(name, value, { expires: parseInt(times)/24 });}//クッキーVueを取得する.prototype.getCookie=function(name){return Cookies.get(name)}//cookie Veeを削除する.prototype.removeCookie=function(name){return Cookies.remove(name)}//検証コードのカウントダウンVueを取得する.prototype.cutTime=function (event,time,callback) { var target=event.target,_time=parseInt(time) || 60; var set=setInterval(function () { if(_time>0){ _time--; target.innerHTML=_time;}else{target.innerHTML='携帯電話認証コード取得';clearInterval(set);callback();}},1000)}//文字列変換オブジェクトVue.prototype.toObj=function(str){var arr=str.split('&')、obj=new Object();for(let i in arr){var thisArr=arr[i].split('=');obj[thisArr[0]=thisArr[1]}return obj}//base 64ピクチャアップロード(ie 9と互換性なし)Vue.prototype.uploadImg=function (file,scale) { return new Promise(function (resolve,reject) { let _scale=scale || 1; let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); let img = new window.Image(); let imgType=file.type; img.src = URL.createObjectURL(file); img.οnlοad=function () { cvs.width = img.width*_scale; cvs.height = img.height*_scale; ctx.drawImage(img, 0, 0, cvs.width, cvs.height); resolve(cvs.toDataURL(imgType)); } });}function upload(){var file=this.files[0];uploadImg(file,1).then(function(data){//dataはbase 64戻り値})/ie 9ブラウザVueであるか否かを判断する.prototype.isIE_9=(navigator.userAgent.indexOf("MSIE 9.0")>0);//subtypeデータを公開してデジタルVueにカプセル化する.prototype.enAssembly=function (arr) { var newArr=[],cArr=[]; var sortArr=arr.sort(function (a,b) { return a-b }); for(let i in sortArr){ if(parseInt(sortArr[i])<=9){ newArr.push(sortArr[i]) }else { cArr.push(sortArr[i]) } } var toString=newArr.join()+'0'+cArr.join(); return toString.replace(/\,/g,'');}//ビット演算のようなパッケージVue.prototype.enBitFn=function (arr) { let bitArr=[],bitArrStr; for(let i in arr){ bitArr.push(0) } let choseArr=arr.filter(function (ele,index,arr) { return ele.click===true }); for(let j in choseArr){ bitArr[choseArr[j].subtype-1]=1 } bitArrStr=(bitArr.join()).replace(/\,/g,'');return parseInt(bitArrStr,2)/2進数文字列10進数};//ビット演算復号Vue.prototype.deBitFn=function(num,arr){let toBit=num.toString(2)//10進数変換バイナリ文字列bitArr=toBit.split(')、newArr=[];if(bitArr.length let num=arr.length-bitArr.length;for(let i=0;i Arbit.splice(0,'0')}}for(let i in bitArr){ if(bitArr[i]==='1'){ newArr.push(arr[i]) } } return newArr };//配列脱重Vue.prototype.unique=function(Arr){var isNum=Arr.every(function(value,index,arr){return isNaN(parseFloat)//配列要素が純粋な数字であるか否かを判断するのはtrueを返すのではなく、渋を返すのである}); var arr=[];if(isNum){arr=Arr.sort();//先ソート}else{arr=Arr.sort(function(a,b){return a-b});//}var res=[arr[0]; for(var i = 1; i < arr.length; i++){ if(arr[i] !== res[res.length - 1]){ res.push(arr[i]); } } return res; };//tokenが無効になってホームページVueに戻ります.prototype.isLose=function () { if(!this.getCookie('token')){ this.$router.push({path:"/"}) } } }}
共通プラグインの登録
import Plugin from './assets/js/plugin.js'Vue.use(Plugin);
プラグインの呼び出し
各コンポーネント内でexport default{name:“Header”,data(){return{loginBool:false,tel:this.getCookie('tel'),//cookie}}methods:{//ログインloginOut(){this.removeCookie('token');//cookie this.removeCookie('tel');this.tel='; } } }
以上、いくつかのvueグローバルメソッドのパッケージを提供しただけで、使い方が間違っていることや、より良い使い方があることを発見したら、必ずメッセージを残してください.