20210806のvue.jsに関する記事は5件です。

投稿日：2021-08-06T16:03:54+09:00

【対処法】Vue の CLI が使えない場合

背景 npm install -g @vue/cli vue -V zsh: command not found: vue コマンドが実行できないのは、どうやらPATHが通っていないため、らしい。 .zshrcにPATHを通すよ export PATH=$PATH:/Users/[username]/.npm-global/bin username はご自身の環境に合わせて書き換えてください。これを.zshrcファイルの最後行に書く。ターミナルに戻って source .zshrc これを実行。 vue -V @vue/cli 4.5.13 できました

　 Tweet
Qiitaで続きを読む

投稿日：2021-08-06T14:39:34+09:00

[Vue.js]トランジション

<head> <meta charset="utf-8"> <title>vue</title> <link rel="stylesheet" href="css/styles.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> </head> <body> <script src="https://unpkg.com/vue@2.5.17"></script> <div id="app"> <pull-down-menu></pull-down-menu> </div> <script src="js/main.js"></script> </body> cssは好きに書いてね Vue.js var fff = { data: function () { return { isShown: false, name: 'カーソル', items: [ '1-1', '1-2', '1-3', ] }; }, template: ` <div @mouseleave="isShown = false"> <p @mouseover="isShown = true"><a href="#" class="menu">{{ name }}</a></p> 　　　　//イベントに対するイベントリスナーは <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" > //isShownの時にリストが出現 <ul v-if="isShown"> <li v-for="item in items" :key="item"> <a href="#" class="menu-item">{{ item }}</a> </li> </ul> </transition> </div> `, methods: { //トランジションの対象となるDOM要素:el //初期状態 beforeEnter: function(el) { el.style.height = '0px'; el.style.opacity = '0'; }, enter: function(el,done) { // 3秒かけて、透明度と高さを変更して出現させる　　　　//はじめ anime({ targets: el, opacity: 1, height: el.scrollHeight + 'px', duration: 10000, complete: done }); }, leave: function(el,done) { //終わり anime({ targets: el, opacity: 0, height: '0px', duration: 10000, complete: done }); } }, }; new Vue({ el: '#app', components: { PullDownMenu: fff } });

　 Tweet
Qiitaで続きを読む

投稿日：2021-08-06T11:53:21+09:00

vue.jsの使い方の基礎＃５【v-onの使い方】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（イベントハンドラの部分）公式ドキュメントとやっていることは基本的に同じです。 Vue.js基礎知識に関する記事を随時更新しています一覧はこちら。もしよければ参考にしてください。 v-onの基本的な使い方 v-onディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。  <div> <button @click="counter += 1">+1</button> <p>ボタン押下数： {{ counter }}</p> </div> ---　以下略　--- メソッドを呼びたいとき先ほどの例では、１づつ加算していく簡単な処理なのでいいですが、押下したらデータ登録する～などの処理を書いていたら良くないですよね。 v-onでは呼び出したいメソッド名を指定することができます。メソッドを呼ぶときは()をつける必要があります。 <template> <div> <button @click="addCounter()">+1</button>　---クリックされたらaddCounter()メソッドを呼ぶ <p>ボタン押下数： {{ counter }}</p> </div> </template> <script> export default { data() { return { counter: 0 } }, methods: { addCounter() { this.counter ++ } } } </script> メソッドに引数に渡す引数を指定することもできます <template> <div> <button @click="addCounter(1)">+1</button> <button @click="addCounter(2)">+2</button> <p>ボタン押下数： {{ counter }}</p> </div> </template> --- 略 --- <script> methods: { addCounter(num) { this.counter += num } } </script> 複数のメソッドを呼びたいとき以下のようにカンマで区切ることで、複数のメソッドが設定できます。以下の例では、ボタン押下するとone()とtwo()が実行されます。 <template> <div> <button @click="one(), two()">ボタン</button> </div> </template> --- 以下略 --- イベント修飾子イベントハンドラ内でのevent.preventDefault()またはevent.stopPropagation()の呼び出しがしたいとき、イベント修飾子（event modifiers）が使用できます。 jsは正直そんなにやっていなかったのでevent.preventDefault()ってなんやねんってなりました。フォームさんは優秀なので、デフォルトでフォーム内容送信などやってくれるのですが、この動作をキャンセルする目的で使うらしい。この辺の記事がわかりやすかったです。 JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識【JavaScript】event.preventDefault()が何をするのか修飾子一覧修飾子は、ドット(.)で表記されます。修飾子内容 .stop event.stopPropagation()を呼ぶ .prevent event.preventDefault()を呼ぶ .capture ルート要素から順番にイベント実行 .self event.target が要素自身のときだけハンドラ呼び出し（子要素の場合は呼ばれない） .once 最大１回までハンドラを呼び出す .passive event.preventDefault()を呼び出さない（event.preventDefault()を含んでいたとしても）書き方以下公式の引用です。  <a @click.stop="doThis"></a>  <form @submit.prevent="onSubmit"></form>   <div @click.capture="doThis">...</div>   <div @click.self="doThat">...</div>  <a @click.once="doThis"></a>    <div @scroll.passive="onScroll">...</div> 補足以下のような書き方もできます。こちらも公式引用  <a @click.stop.prevent="doThat"></a>  <form @submit.prevent></form> また、修飾子を使用するとき、関連するコードが同じ順序で生成されます。 @click.prevent.selfを使用すると全てのクリックイベントを防ぐことはできますが、@click.self.preventは要素自身におけるクリックイベントを防ぐだけです。複数使用する場合は順序もしっかり考えましょう。以下の注意もありました。 .passive と .prevent を一緒に使わないでください。.prevent は無視され、ブラウザにはおそらく警告が表示されます。.passive はイベントのデフォルトの挙動を妨げないことをブラウザに伝達することを思い出してください。個人的にこの辺は理解が難しいのでjsをもう少し勉強してから学びなおそう。。。キー修飾子いろいろなイベントがある中で、特定のキーのチェック（enterを押下など）が必要な時にキー修飾子をつけることができます。  <input @keyup.enter="submit" /> キー修飾子一覧先ほどはkeyupを使用しましたが、キーボードイベントには以下があります。修飾子内容 keypress タイプしたとき keydown 押されたとき keyup 押し終わったとき最も一般的に使用されるキーコードのエイリアスを提供してくれています修飾子内容 .enter enterキー .tab tabキー .delete delete と backspace キーの両方 .esc escキー .space スペースキー .up 方向キー上 .down 方向キー下 .left 方向キー左 .right 方向キー右 KeyboardEvent.keyで公開されている任意のキー名は、ケバブケースに変換することで修飾子として直接使用できるそうです。大体のイベントは使用できそうですね。私はキャメル > スネーク > ケバブの順で好きです（いらない情報）以下の例では、keyがPageDownのときにonPageDown()が呼ばれます。 <input @keyup.page-down="onPageDown" /> システム修飾子キー次の修飾子を使用すると、対応するキーが押されたときにのみマウスもしくはキーボードのイベントリスナをトリガできます。つまり、同じイベントでも異なったイベントとして扱うことができるようになる修飾子です。例えば、 enterを押下した時と、ctrl + enterを押したときで違う処理ができるわけです。以下公式から引用  <input @keyup.alt.enter="clear" />  <div @click.ctrl="doSomething">Do something</div> システム修飾子キー一覧修飾子内容 .shift shiftキー .ctrl ctrlキー .alt altキー .meta Mac:コマンドキー（⌘） windows:ウィンドウキー（⊞） .exact 修飾子のパターンを制限 .left マウス左クリック .right マウス右クリック .middle マウス真ん中（スクロールするところ）クリック .exactの書き方。以下公式引用です。  <button @click.ctrl="onClick">A</button>  <button @click.ctrl.exact="onCtrlClick">A</button>  <button @click.exact="onClick">A</button> 公式わかりやすいので今回引用多めでした。日本語で見れるのありがたい。 vueの記事ちょこちょこあげてるのでよかったらコメントなどいただけるととてもうれしいです。最後まで読んでいただきありがとうございます！

　 Tweet
Qiitaで続きを読む

投稿日：2021-08-06T10:39:39+09:00

パスワードレス認証サービスGAZEPASSを使ってみた

GAZEPASSというパスワードレスでログイン認証するシステムを使ってみました。端末にある生体認証機能を使って認証する仕組みです。生体認証が無いデバイスは顔認証することができます。 ※現在はbeta版なので無料で使えますが、今後は有料化になる可能性がありますのでご注意ください。お試し環境下記からどういうものか動かすことができます。 1. API Keysを作成しよう GAZEPASSサイトにアクセスしてアカウントを発行します。 1-1. アカウントを登録する下記URLにアクセスしてログイン処理を行います。 https://gazepass.com/ Passwordless Sign In をクリックしてください。ご自身のメールアドレスで認証するか、Googleアカウントで認証するかお好きな方を選んでください。認証が終わると、顔写真を登録します。これで生体認証が無いデバイスは顔認証でログインすることが可能となります。デバイスを信頼するか確認されるので Yes をクリックします。生体認証があるデバイスだと下記のように指紋認証を求められたり、iPhoneだとFaceIDが表示されます。 1-2. API Keysを作成するログインできたら、 Developer Console ボタンをクリックして、コンソール画面へ遷移します。 Create API Key をクリックして、API Keysを発行します。 API NameとDomainはそれぞれ任意の値を設定してください。発行された API Key と Secret Key をメモしておきます。 2. プログラムについて GitHubにてソースを共有していますので、詳細はそちらをご確認ください。フロントエンドはVue.js、バックエンドはNode.js環境で動かしています。 https://github.com/gaomar/gazepass-handson 2-1. 全体の流れ全体の認証の流れは下記の通りです。詳細は下記プログラムをご確認ください。 https://github.com/gaomar/gazepass-handson/blob/main/frontend/src/views/Home.vue gazepassjsの初期化（API Keyの設定） Home.vue var gazepassjs = require("gazepassjs") var gp = new gazepassjs.default(process.env.VUE_APP_GAZEPASS_API_KEY) getAccessToken()でアクセストークンを取得 Home.vue var access_token = await gp.getAccessToken() 取得したアクセストークンをバックエンドに渡す Home.vue axios.post(`${process.env.VUE_APP_API_URL}/signIn`, { 'access_token': access_token }, { headers: { 'x-api-key': headerName, } }) .then(response => { me.loading = false me.loadingInfo.loading = false me.showSnackbar(`こんにちは！${response.data.user.email}さん ID:${response.data.user.id}`, 'success') }).catch(error => { console.log(error); me.loading = false me.loadingInfo.loading = false me.showSnackbar('ログインに失敗しました', 'error') }); バックエンド側でアクセストークンを認証するバックエンド側はSDKはなく、APIをPOSTして認証するだけです。バックエンドソースファイルは下記からご確認ください。 https://github.com/gaomar/gazepass-handson/blob/main/backend/routes/router.js router.js var resp = await axios.post( "https://api.gazepass.com/user/auth", { "api_key": process.env.VUE_APP_GAZEPASS_API_KEY, "api_secret": process.env.GAZEPASS_API_SECRET, "access_token": req.body.access_token }) res.json(resp.data); 返ってくるレスポンスは下記の形です。 data.user.idで個別のUUIDが確認できます。 email はログイン認証したときのメールアドレスが取得できます。このUUIDをデータベースに登録して個人を識別するということに使えそうです。 { "data": { "user": { "id": "UUIDの値", "email": "認証したメールアドレス" }, "verified": true }, "status": 200, "statusText": "OK", "headers": { "content-length": "104", "content-type": "application/json; charset=utf-8" }, "config": { "url": "http://localhost:9000/api/signIn", "method": "post", "data": "{\"access_token\":\"アクセストークン\"}", "headers": { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json;charset=utf-8", "x-api-key": "gazepass-demo" }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1 }, "request": {} } まとめ短いソースだけで認証処理を埋め込むことができました。パスワードレスで端末の生体認証が使えるのがとても良いと思いました。是非お試しください！システム化のご検討やご相談は弊社までお問い合わせください。 https://i-enter.co.jp/contact/

　 Tweet
Qiitaで続きを読む

投稿日：2021-08-06T10:22:07+09:00

[Vue.js]グローバルフック関数

<div id="app"> <router-link to="/users">USER</router-link> <router-view></router-view> </div> Vue.js var router = new VueRouter({ routes: [ { path: '/users', component: { template: '<h1>ユーザーページです</h1>' } }, { path: '/top', component: { template: '<h1>トップページです</h1>' } }, ] }) router.beforeEach((to, from, next) => { // ユーザー一覧ページへアクセスした時に / topへリダイレクトする例 if (to.path === '/users') { next('/top') } else { // 引数なしでnextを呼び出すと通常通りの遷移が行われる next() } }) var app = new Vue({ router: router }).$mount('#app') これで、usersではなくてtopに遷移される

　 Tweet
Qiitaで続きを読む