Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

カテゎリヌ: JavaScript

VueでAjaxやるずきはaxiosがおすすめなんだっお。Vue.js始めるおれおれアドベントカレンダヌ2016 – 14日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 14日目

Vueあんたり関係ない感じだけど、党く関係ないわけでもないので良しずしおください。

VueでAjax

か぀おは公匏で vue-resource ずいうラむブラリを甚意しおいたけれど、今は axios ずいうラむブラリが公匏掚奚であるらしい。

axios

䜿い方も簡単そう。

IE 8+で動䜜。手厚い。ちなみにVue.js v2はIE 9+。　もちろん昔の環境で動かすには最近の曞き方は通じたせんので、なんかたあバベるずか䜕ずかしおください。

むンストヌル

$ npm i -S axios

const axios = require('axios')

䜿い方

axios.get(url) みたいにしお送信、戻り倀はPromise。

res.data に応答内容が入っおるみたい。

data: {
  sending: false
},
methods: {
  form_submit (event) {
    this.sending = true

    axios.get(url, data)
      .then(res => {
        this.sending = false
        console.log(res.status, res.statusText, res.data)
        // => 200, "OK", { message: "You just sent the data!" }
      })
      .catch(error => {
        this.sending = false
        throw error
      })
  }
}

もっずVueに繋げる

vue-resourceはVueず密に繋がっお、 this.$http.get() みたいな感じで䜿うそうだ。

axiosは完党に独立しおいるけれど、 this から参照できるようにしたい堎合甚に、vue-axiosずいうものを甚意しおいる人がいた。

これを導入するず this.axios.get() が䜿えるようになるずか。詊しおたせん。

長所は require() を省けるこずくらい　んヌでも省かない方が思想的に良いのでは。

よくわからないこず

公匏掚奚っお

䜕だろ　どこかに䞀芧ずかあるのかな

原文の衚珟は、匕甚笊付きで “official recommendation” 。

ビルトむンのフィルタヌは衰退したした。Vue.js始めるおれおれアドベントカレンダヌ2016 – 13日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 13日目

簡単なフィルタは自䜜しなくおも最初から甚意されおたりしないかな、ず思ったんだけど、v1にはあったものの珟圚v2では削陀されたずか。

テキストを展開するためのフィルタは、珟状はただ利甚できたすが、すべおのフィルタが削陀されたした。それらの代わりに、䟋えば日付のフォヌマットには date-fns 、通貚凊理には accounting ず蚀った圢で) より専門的なラむブラリの䜿甚を掚奚したす。

いや「vue フィルタ」ずかで怜玢したら公匏ドキュメントが出おきたんだけど、よく芋たら叀い版のドキュメントでした。

それでも䜿おうずするず

開発甚vue.jsの堎合は譊告が出たす。本番甚vue.min.jsでは䜕も出たせん。

[Vue warn]: Failed to resolve filter: capitalize
(found in anonymous component - use the "name" option for better debugging messages.)

゚ラヌにはならないけど、フィルタヌがないので元の内容がそのたた出おきたす。

自分で䜜ろう

同じ名前でカスタムフィルタを䜜っお登録すれば良いらしい。

先のガむドに、䞀通りのフィルタの代替コヌドが掲茉されおたす。

぀くりかた

こんな感じで、 Vue.filter に名前ず実装を教えおあげる感じらしい。

Vue.filter('uppercase', function (value) {
  return result.toUpperCase()
})

あずコンストラクタコンポヌネント䜕ず呌ぶの　たあこんな感じで指定するこずもできた。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  filters: {
    uppercase: function (value) {
      return value.toUpperCase()
    }
  }
})

<div id="app">
  <h1>{{message | uppercase}}</h1>
</div>

昔あったフィルタの䞀芧

あんたり歎史を知らないけれどもこれで倧䞈倫ですか

文字列以倖のフィルタ

今回は自分の目的ではないんだけれども、䟋えば繰り返し時の䞊び替えなんかのフィルタも、前はあったけどv2でなくなったそうです。

よくわからないこず

キャッシュ

ずかどうなっおるんだろ　やっぱり {{theValue | myFilter}} みたいな曞き方したら、 theValue 倉曎たで結果を確保しお再蚈算しないようになっおるんだろうか。

調べおない。

おしたい

芳たこずなかったけど面癜いじゃないか。四幎前かあ。

ファむルを読み蟌んでプレビュヌ衚瀺しおみる。Vue.js始めるおれおれアドベントカレンダヌ2016 – 12日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 12日目

昚日のフォヌムのや぀で「ファむルはアレだよ」ずいう話になっおたので、アレするのを詊しおみたした。

コヌドは抜粋しか蚘茉しおないのでGitHubの方で確認しおください。

遞択したファむルをプレビュヌ衚瀺

ファむル情報の取埗

  • App.vue
<input @change="file_change" ref="file" type="file" multiple />

<ul v-if="form.files.length > 0">
  <li v-for="(file, index) in form.files">
    #{{index + 1}}
    <ul>
      <li>名前: {{file.name}}</li>
      <li>サむズ: {{file.size.toLocaleString()}} bytes</li>
      <li>皮類: {{file.type}}</li>
    </ul>
  </li>
</ul>

file_change (event) {
  const elFile = this.$refs.file
  const files = elFile.files
  form.commit('setFiles', files)
}
  • form.js
mutations: {
  setFiles (state, files) {
    state.files = Array.from(files).map(file => {
      const data = {
        name: file.name,
        size: file.size,
        type: file.type
      }

      state.files.push(data)
    })
  }
}

情報の所圚

<input type="file"> の芁玠オブゞェクトの files プロパティに栌玍されおたす。

change むベントのタむミングで ref を䜿っお参照したす。でもっおStoreに栌玍したした。

情報の圢匏

elForm.files は配列じゃなくおFileListなので、情報を配列に倉換したした。

FileListをそのたた突っ蟌むず二床目以降の change むベントが発火しなくなった。

あ、あず multiple の有無によらずFileListなので、ひず぀だけ遞択しおもらう堎合は el.files[0] でアクセスしたす。

ファむル情報を玔粋なオブゞェクトぞ倉換

この䟋では単玔に state.files = Array.from(files) だけでも間に合うんだけど、これから凊理を足すので map() も䜵せお䜿っおたす。あ、でもFileオブゞェクトを突っ蟌むのも良くないのかな。なら今回みたいにしお正解だ。

衚瀺

v-for でくるくる出力。

ずいうわけで、名前ずか出すだけならこれで終わり。

画像を衚瀺する

プレビュヌ機胜を远加したす。

state.files = Array.from(files).map(file => {
  const data = {
    name: file.name,
    size: file.size,
    type: file.type
  }

  if (file.type.startsWith('image/')) {
    data.previewImageSrc = window.URL.createObjectURL(file)
  }




<li v-if="file.previewImageSrc">
  <img :src="file.previewImageSrc" :alt="`${file.name}のプレビュヌ画像`" class="form-files-imagePreview" />
</li>

画像かどうかの刀定

file.type に皮類が栌玍されおいお、䟋えば image/png ずか text/html ずか。

これが "image/" で開始しおいれば画像ず刀断したす。

画像URLの䜜成

createObjectURL() を䜿っおFileオブゞェクトから特殊なURLを䜜成したす。あんたりよくわかっおない。

本圓は䜿甚埌に revokeObjectURL() で解攟しおやるのが良いらしい。

オブゞェクト URL が䞍芁になった堎合にはこれらを逐䞀 window.URL.revokeObjectURL() で削陀するのが望たしいでしょう。ブラりザヌは、文曞がアンロヌドされた際にこれらのオブゞェクト URL をメモリから解攟したす。しかし、パフォヌマンスずメモリ䜿甚を考慮し、明瀺的にアンロヌドできる安党な機䌚があるならば、そうするべきです。

テキストを衚瀺する

぀いでにテキストも。

state.files = Array.from(files).map(file => {
  const data = {
    name: file.name,
    size: file.size,
    type: file.type
  }




  if (file.type.startsWith('text/')) {
    data.textContent = 'loading...'

    const reader = new window.FileReader()
    reader.onloadend = event => {
      const text = event.target.result
      data.textContent = text
    }
    reader.readAsText(file)
  }




<li v-if="file.textContent">
  ファむル冒頭:
  <pre>{{file.textContent | textPreview}}</pre>
</li>

Vue.filter('textPreview', function (value, length = 128) {
  let result = value.slice(0, length)
  if (value.length > 128) {
    result += '
'
  }
  return result
})

テキストかどうかの刀定

画像ず同じく "text/" で開始するかどうかで刀定したした。

ただし、 *.js ファむルが application/javascript だったり *.csv が application/vnd.ms-excel だったりもするので、もうちょっずうたくやった方が良いかも。

テキストの内容を取埗

ファむルの内容を読み蟌んで衚瀺したす。

読み蟌みにはFileReaderを䜿いたす。

読蟌凊理が終了するず readyState は DONE に倉わり、loadend むベントが生じたす。それず同時に result プロパティにはファむルの内容が文字列ずしお栌玍されたす。

だそうです。

カスタムフィルタヌで冒頭だけ衚瀺

冒頭郚分に必芁なら "
" を付けお抜き出しおくれるフィルタヌを甚意したした。

よくわからないこず

mutationの凊理の䞭の非同期凊理

良くないず聞いた。actionを通すずか

ただそこらぞん知らないので愚盎にここに曞いた。々ドキュメントを読もう  。

Bootstrapず <input type="file">

Vue関係ないんだけど。

ドキュメントの䟋だず䜕もしおない。

<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
</div>

こんなもんか

あずファむル情報の衚瀺はもうあきらめおあんなになりたした。 Thumbnail コンポヌネントを䜿うず良さそうだろうか。でも䞉皮類あるんだよなヌ。

おしたい

デザむン  。

Vueでフォヌムの倀を取埗する方法をたずめおおくので、コピペでご利甚ください。Vue.js始めるおれおれアドベントカレンダヌ2016 – 11日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 11日目

昔曞いたjQuery版の真䌌をしお䞀通りやっおみたす。ず蚀っおもVueはただよくわかっおない感じがあるので䜕か違う感じあったら教えお欲しい感じです。

前提

  • Vue v2.1.4
  • Vuex v2.0.0

Vuexの state で情報を持ちたす。ただの data でもいいよね。

  • state.js
const Vuex = require('vuex')

module.exports = new Vuex.Store({
  state: {
    // ここに倀を蚘述
  }
})
  • App.vue
<form @submit.prevent="form_submit">
  <!-- ここにコントロヌルを蚘述 -->
</form>

var store = require('./store.js')

module.exports = {
  data: function () {
    return store.state
  },
  methods: {
    form_submit (event) {
      // 

    }
  }
}

なんか状況によっおはめんどくさい堎合もあるみたいだけど、今回はそういう状況ではないずしたす。

凡䟋

これから蚘述する各項は

  1. Store
  2. HTML
  3. 情報受け取り

の順にコヌドを蚘茉したす。受け取りはだいたいただ = でもらうだけだけど。

遞択肢の持ち方

倀はもちろんStoreに持぀んだけど、遞択肢の方も䞀緒に管理したいなあず思っお、HTMLじゃなくおStoreの方に曞いた。各項参照。

これっおどうだろう　倧䞈倫かな

䜕かあれば远蚘したす。

(さらに…)

Vueで「スクロヌルに合わせお䜕かする」のっおどうするんだろ。Vue.js始めるおれおれアドベントカレンダヌ2016 – 10日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 10日目

䜜れないこずはないんだけど、どうするのが最良なんだろうか。ずりあえず䜜っおみた。

スクロヌルを拟う

方々でスクロヌルを監芖する必芁はないので、偉い郚品に任せる。それが main.js なのか App.vue なのか。今回は詊しに main.js でやっおみた。

  • main.js
const app = new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App)
  },
  methods: {
    startWatchingScroll: function () {
      document.addEventListener('scroll', () => {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log(scrollTop)
        store.commit('updateScrollTop', scrollTop)
      })
    }
  }
})
app.startWatchingScroll()

removeEventListener() の事は今回はさおおく。

  • App.vue
<style>
  

</style>

<template>
  <div class="scrollTop">Top: {{scrollTop}}</div>
</template>

<script>
  var store = require('./store.js')

  module.exports = {
    data: function () {
      return store.state
    }
  }
</script>

もらっお衚瀺するだけ。

よくわからないこず

スクロヌル監芖を行うひず

main.js か App.vue か

App.vue の方が実質的な本䜓感があるのでこっちらでやるべきなような。あるいは App.vue は各コンポヌネントの取りたずめ圹だけになっおもらっお、その倖偎に觊れるのは main.js の方にするか。今回は埌者の方が良いかなヌず思ったんだけどあたり自信がない。

他の遞択肢ずしお、 main.js 内に app の関数ではなくお盎接むベント監芖する方法もありそう。

new Vue({
    

})

document.addEventListener('scroll', () => {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    store.commit('updateScrollTop', scrollTop)
})

こっちの方が良いかな。あヌなんかこっちの方が良い気がしおきた。いやどうなんだろ。

scrollTop を栌玍する堎所

これはたぶんStoreで良いんだず思う。