Vue.jsアプリのひな形を作る
$ vue init webpack idolsearchapp
ファイルを配置する
- src/components/IdolSearch.vue
- src/main.js
開発環境を実行する
npm run dev
<template> | |
<div class="hello"> | |
<input type="text" v-model="searchText"></input> | |
<ul> | |
<li v-for="item in candidates">{{ item.text }}</li> | |
</ul> | |
</div> | |
</template> | |
<script> | |
import axios from 'axios' | |
export default { | |
name: 'IdolSearch', | |
data () { | |
return { | |
searchText: '', | |
idolList: [] | |
} | |
}, | |
created: function () { | |
var endpoint = 'https://sparql.crssnky.xyz/spql/imas/query?output=json&force-accept=text%2Fplain&query=' | |
var query = ` | |
PREFIX schema: <http://schema.org/> | |
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> | |
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> | |
PREFIX imas: <https://sparql.crssnky.xyz/imasrdf/URIs/imas-schema.ttl#> | |
SELECT ?l ?k ?e | |
WHERE { | |
?s rdfs:label ?l; | |
imas:nameKana ?k; | |
schema:name ?e; | |
rdf:type imas:Idol. | |
FILTER (lang(?e) = 'en') | |
} order by(?k) | |
` | |
var url = endpoint + encodeURIComponent(query) | |
axios | |
.get(url) | |
.then(response => { | |
var lst = [] | |
response.data.results.bindings.forEach( v => { lst.push({'text':v.l.value, 'match': v.l.value + ' ' + v.k.value + ' ' + v.e.value.toLowerCase() })} ) | |
this.idolList = lst | |
}) | |
}, | |
computed: { | |
candidates() { | |
if (this.searchText.trim() == '') return [] | |
return this.idolList.filter(function(i){ return i.match.indexOf(this.searchText.toLowerCase()) > -1}, this) | |
} | |
} | |
} | |
</script> | |
<!-- Add "scoped" attribute to limit CSS to this component only --> | |
<style scoped> | |
h1, h2 { | |
font-weight: normal; | |
} | |
ul { | |
list-style-type: none; | |
padding: 0; | |
} | |
li { | |
margin: 0 10px; | |
} | |
a { | |
color: #42b983; | |
} | |
</style> |
// The Vue build version to load with the `import` command | |
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. | |
import Vue from 'vue' | |
import App from './App' | |
import router from './router' | |
Vue.config.productionTip = false | |
/* eslint-disable no-new */ | |
new Vue({ | |
el: '#app', | |
router, | |
components: { App }, | |
template: '<App/>' | |
}) |