Date().getTime();if(instance.group.length<2||current.opts.wheel===!1||(current.opts.wheel==="auto"&&current.type!=="image")){return}e.preventDefault();e.stopPropagation();if(current.$slide.hasClass("fancybox-animated")){return}e=e.originalEvent||e;if(currTime-prevTime<250){return}prevTime=currTime;instance[(-e.deltaY||-e.deltaX||e.wheelDelta||-e.detail)<0?"next":"previous"]()})}})})(document,jQuery);制作メモとか、趣味とか、雑記。Adminの日本語化vue.jsってなんぞ要するにいい感じになるライブラリ。jQueryっぽいやつだと思っておけばいい。ライブラリを読ませておいて組み込んでいく。jQueryと違ってjs的な記述になるんだけど、それでもvue.jsなりの書式はあるのでその辺を理解して触る必要がある。jQueryに手を出してjsをわかったつもりになってる人間には覚えることとか理解することが多いので結構たいへん。IE非対応(極論)vue.jsのバージョンによりIE非対応(2系だとIE8以下NG)であったり、記述を頑張らないとIEでちゃんと動かなかったり、そういうのがある。マコブログVue.jsを使ってプログラムを書いたものの「IE」だと何も表示されず真っ白の画面、他のブラウザで動作するのにIEでは動かない時は以下の問題が考えられます。「原因1:関数定義が省略記法である」「原因2:アロー関数を使用している」「原因3:バッククォートを使用している」macoblog.com後数日でIEのサポートが終了する。待ち遠しいんだけど、多分サポート終わっても継続して使う人はいる。レギュレーションに沿えば度外視していいんだけど、世間的にはどうなんだろう。いえ既にvue.jsは流行ってるわけで、強行突破してもいいんじゃないかと思う。クライアント案件だとここのところの説明をするのめんどくさいなーって。jsは末尾で読ませるvue.jsのライブラリは<head>で読み込んでいいんだけど、各種組み上げた内容はベタ打ちだろうが外部ファイルだろうが対応するhtml上のタグより後に記述する必要がある。jQueryだと全部<head>にぶち込めるので、それで慣れちゃってると躓く。jQueryで慣れきってると応用があんまり効かないので、無理せずに初心者向けの内容を読んで勉強するのがいい。その点、この記事はとても良かった。株式会社ウェブ企画パートナーズwk-partners.co.jpdataを増やす連想配列のアレで増やしていける。}})</script>const単位で分けるconst以外の書き方もあるのでこれに限らないんだけど。constで複数作り込む場合はこんな感じで切り分けてやっていく。}})</script>elの指定先を替えてるのでdataのkeyが被ってても問題ない。出力内容を色々いじりたいならcomputed「関数の戻り値」を使う場合はこうなる。}})</script>当然出力内容には手を入れられる。}所詮はjsであるということjsで処理したものをhtml上に表示してるだけなので、反映されるまでは元のタグが表示される。クリックとかで発火させるならいいんだけど、ページ読み込み時の動作を仕込むのはやっぱりしんどい。cssとかで読み込み時にフェードインを仕込むとかして過程を視覚的に排除するのがいいかも。1}}HTMLへの記述機会が多いここを見ればイメージが付くと思う。Frameworkjp.vuejs.orgjs、jQueryでいうdata属性的なものがvue.jsだと色々ある。良くも悪くもjsの記述だけで完結しないんで覚えることがいっぱい。うん、jQueryは行き当たりばったりでなんとかなるけど、こっちはちゃんとお勉強しておかないとまずい。「ディレクティブ」htmlタグに追加するvue.js独自の素敵なアレ。【Vue.js】主要ディレクティブ一覧。実例ありの使い方まとめ主なディレクティブ一覧ディレクティブ名内容v-bind単方向バインディング。dataオブジェクトの値を反映する。v-if真偽値がfalseの場合要素を非表示にする。v-showと違いDOMごと非表示にするため重い。v-elsev-ifの真偽prograshi.com独自のアレなのでどういうのがあるか知って覚える必要がある。ajaxが強み?axiosやらなんやらがある。ページ遷移をせずに情報のやり取りができるのでなんか素敵な感じのサービスを組みたいってときに活躍しまくれる感じ。普段の制作ではyubinbango.jsとか既存のものを導入するだけなので、自分としてはあんまり関係ない話。なんか良さそうですね。プロジェクト単位で開発ができるgit的なアレ。開発に必要な環境を揃えて組み上げて、WEBサーバーにアップできる形に書き出すとかそんなやつ。CLI」が用意されています。CLIは、Vue.jsのアプリケーションを開発するための前準備支援してくれるツールになりまjohobase.comコンソールの操作はあまり好きじゃないのでアレだけど、「やってる感」は出るよね。一般的なWEBサイトの構築には要らないかなと思う。ポータルサイトとかの大掛かりななんやかんやを作るときに活躍する感じか。ローカル環境で組んで完成したらサーバーにアップするみたいな。公開非公開の面で考えたらwpでカバーできるよねってことも。やってることはwpにプラグインをぶち込んでるのと大差ないというか。いえ優劣じゃなくて使い分けの話だと思うし、あとは好き好きとか長短とかのあれで開発速度も変わるし、選んでやっていこうねって感じですかね。HTML要素を自作できる自作と言い切ると語弊があるけど。独自の要素を作って、それを指定して操作できる。'#test'})</script>独自要素は以下の書き方でもOK。いうかまあ、用途に応じてって感じ。<test-component></test-component>名称は好きに付けられるし既存に被ることはないだろうけど、ハイフンを使ったりして確実なユニークに持っていくのが無難。出力するとこんな感じになる。<p>あああああ!</p></div>要するに置換。wpでいうショートコードみたいな。この方法だとjsが反映する前に表示されるものは何もないので、ページ読み込み時に自動挿入するタイプを仕込みたいならオススメか。検証で見ると反映後が表示されて、ソースを見ると反映前の独自要素が表示される。この程度で何だって話でもあるけど、ちょっとした秘匿テクニックとして使えるかもしれない。そんな感じで、いい感じに組み上げたものにElementというものがある。的桌面端组件库element.eleme.io詳しくはこの記事とか。綺麗に死ぬITエンジニアJavaScriptのフレームワークである「Vue.js」、皆さんは使ってますでしょうか。学習コストの低さ、小規模案件での導入のしやすさ、大規模案件にも対応できる拡張性の高さから、最近はVue.jsばかりいじっています。今回は、そんなVue.js上で、すぐに高機能なU...s8a.jpしっかり理解できるまでは環境準備もUIで操作したほうがいいと思うとだけ。プロジェクト管理ができるVue.jsでプロジェクトを作ってWEBサイトを構築、そのままだとブラウザで閲覧できないので動く形に書き出してWEBサーバーにアップロード、って段取りでやっていくことができる。それぞれビルド、デプロイ、リリースっていうのが一般的みたい。Qiita個人的にあいまいなところがあるので、まとめてみました。Weblio辞書によると...ビルド【英】buildビルドとは、コンピュータやソフトウェア関連の用語としては、ソースコードとしてコーディングされたソフトウェアを、...qiita.com旧バージョンに戻すことをロールバック。触ったほうがイメージが付きやすい。分かりやすい記事があったので、それに沿ってやっていくのがいい。シンプルに過不足なくスタートするはじめに可能なかぎり、この通りやればできるようにシンプルで過不足なくコマンドをまとめていきます。my-project」で以下のエラーが出た。読み込むことができません。UnauthorizedAccesspowershellのセキュリティに引っかかって拒否ってるからで、緩和すれば解決する。Qiitaはじめにvueコマンドを実行したら以下のエラーが起きたときの自分ができた解決方法を記載します。このシステムではスクリプトの実行が無効になって...qiita.compowershellを起動するたびにエラーになるので覚えておいた方がいい。my-projectプロジェクト作成にあたってY/Nとか選択とかあるけどYで通せばいい。serveローカルに鯖立てして「http://localhost:8080/」で閲覧ができる。当然ながらソースコードを表示させてるんで、編集するなら一旦停止させる必要がある。停止したいときは「Ctrl+C」、終了確認のメッセージが出るので「Y」を入れてEnter。WEBサーバーにVue関連が入ってればこれをそのまま持っていけば表示されるんだろうけどそういうわけにもいかないので、ビルド・デプロイをやっていく必要がある。build実行して生成される「./dist」の中身は通常のwebサイトと同じ構成なので、これをWEBサーバーにアップすれば表示される。されるんだけど、各ファイルへのリンクが「src=”/」みたいになってるのでドメイン直下じゃないとリンクが死ぬ。「src=”./」に置換して相対パスにしておくのが無難。これはお試しだからいいけど、本番環境だといちいち置換するのは手間を通り越してリスクなので調整が必要なら設定でそうなるようにしとくのがいい。削除する場合はプロジェクトのディレクトリを削除するのが手っ取り早い。npmとかで色々インストールしたものはこのディレクトリに入ってるだけでwindowsのProgramfilesとかとは無関係。アンインストーラーを使ってどうのこうのってことにはならない。Admin活用はすっ飛ばしてとりあえずブラウザで見れるまで持っていく。admin...github.comcloneでもDLでもいいからGithubから引っ張ってくる。DLした場合は「vue-element-admin-master.zip」を解凍して、中身を作業用ディレクトリに入れる。ディレクトリパスインストールする。install起動する。devブラウザが勝手に立ち上がる。IDPWはもともと入ってるのでそのままログイン。readmeに書いてあるけど、現行バージョンではi18nに対応してない。英語と中国語が入り混じったものを使うことになる。しても日本語にしたければ旧版を使う。i18ngithub.comインストール方法は同じ、自動で日本語表示になる。カスタマイズ前提で考えたら日本語で書いてるから何なんですかっていう気もする。ui部分は現行版でも日本語化できる。日本語ファイルが同梱されてるので呼び出し部分を書き換えたらいい。uiの領域はそんなにないので、変更した実感はほぼない。計測とかの話WEB[wp]カスタムフィールドでスライドショーを管理する方法ひらめいた。WEB[slick.js]PC/スマホで画像を切り替えるスライドショーを作る正攻法というか実用面で強そうなのを羅列。WEB[jQuery]マウスのドラッグでスクロールさせる方法ほぼパクリ。パクリだけど忘れちゃ詰むから記事にする。WEB[js]submit時に再確認のポップアップを設置するユーザーに優しくないけど、自衛のためのちょっとテクいことをする。コメントをキャンセルメールアドレスが公開されることはありません。※サイトΔホームWEBスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。transaction")},s.open("GET",d,!0),s.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),s.send()}}タイトルとURLをコピーしました。