Awaken English Power!https://eng-image-learning.com/blog/2024-03-29T06:47:05+00:00~ An English Learner's EsnographyVue.js Router 使い方2021-03-03T03:00:07+00:002024-03-29T06:47:05+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/vuejs-router-%E4%BD%BF%E3%81%84%E6%96%B9/<p>router.js</p>
<p>HelloWorldとHelloJSXを組み込んで表示</p>
<pre>import { createRouter, createWebHistory } from 'vue-router'<br/>import HelloWorld from './components/HelloWorld.vue'<br/>import HelloJSX from './components/HelloJSX.jsx'<br/><br/>export const router = createRouter({ //export 値:routerオブジェクトが外部から利用可能に<br/> history: createWebHistory(),<br/> routes: [<br/> {<br/> path: '/',<br/> name: 'index',<br/> component: HelloWorld, //割り当てるコンポーネント<br/> },<br/> {<br/> path: '/jsx',<br/> name: 'jsx',<br/> component: HelloJSX,<br/> },<br/> ],<br/>})</pre>
<p>main.js</p>
<pre>import { createApp } from 'vue'<br/>import App from './App.vue'<br/>import './index.css'<br/>import { router } from './router'<br/><br/>var app = createApp(App)<br/>app.use(router)<br/>app.mount('#app')</pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <div><br/> <strong> <router-link to="/" class="btn btn-primary mx-2"></strong><br/> Go to Top<br/> <strong></router-link></strong><br/> <strong><router-link to="/jsx" class="btn btn-warning"></strong><br/> Go to JSX<br/> <strong></router-link><br/></strong><br/> </div><br/> <hr><br/> <strong><router-view></router-view> //<router-link>をクリックして表示されるコンポーネント</strong><br/> </div><br/></template><br/><br/><script><br/>export default {<br/> name: 'app',<br/> created() {<br/> console.log("***** App Created! *****")<br/> },<br/> mounted() {<br/> console.log("----- App Mounted! -----")<br/> },<br/> data() {<br/> return {<br/> title:'Router'<br/> }<br/> }<br/>}<br/></script></pre>
<p></p>
<p>名前付きビューの利用</p>
<p><strong><router-view name="******"></router-view></strong></p>
<p>router.js</p>
<pre>export const router = createRouter({<br/> history: createWebHistory(),<br/> routes: [<br/> {<br/> path: '/',<br/> name: 'index',<br/> <strong> components</strong>:{<br/> default: HelloWorld,<br/> first: HelloWorld,<br/> second:HelloJSX<br/> },<br/> },<br/> {<br/> path: '/jsx',<br/> name: 'jsx',<br/> components:{<br/> default: HelloJSX,<br/> first: HelloJSX,<br/> second:HelloWorld<br/> },<br/> },<br/> ],<br/>})</pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <div><br/> <router-link to="/" class="btn btn-primary mx-2"><br/> Go to Top<br/> </router-link><br/> <router-link to="/jsx" class="btn btn-warning"><br/> Go to JSX<br/> </router-link><br/> </div><br/> <hr><br/> <h5>default view</h5><br/> <router-view/><br/> <hr><br/> <h5>A & B</h5><br/><strong> <router-view name="first"></router-view></strong><br/><strong> <router-view name="second"></router-view></strong><br/> </div><br/></template></pre>
<h3>パラメータの利用</h3>
<p>Helloworld.vue</p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{data.title + ' [' + name + ']'}}</h1><br/> <p class="mt-3 h5">{{data.msg}}</p><br/> </div><br/></template><br/><br/><script><br/>import { ref, reactive } from 'vue'<br/>export default {<br/> name: 'HelloWorld',<br/> props:{<br/> name: String,<br/> },<br/> setup(props, context) {<br/> const data = reactive({<br/> title: 'Router',<br/> msg: 'This is HelloWorld component.',<br/> })<br/> return {<br/> data<br/> }<br/> }<br/>}<br/></script></pre>
<p>HelloJSX.jsx</p>
<pre>import { ref, reactive } from 'vue'<br/><br/>export default {<br/> name: 'HelloJSX',<br/> props:{<br/> name: String<br/> },<br/> setup(props) {<br/> const data = reactive({<br/> title: 'Router',<br/> msg: 'This is JSX component sample.',<br/> })<br/> return () => (<br/> <div class="alert alert-warning"><br/> <strong> <h1>{data.title} [{props.name}]</h1> //表示例 Router[hanako]</strong><br/> <p>{data.msg}</p><br/> </div><br/> )<br/> }<br/>}</pre>
<p>routerでパラメーター指定</p>
<pre>export const router = createRouter({<br/> history: createWebHistory(),<br/> routes: [<br/> {<br/> path: '/',<br/> redirect: '/index/taro'<br/> },<br/> {<br/> <strong>path: '/index/:name',</strong><br/> name: 'index',<br/> component: HelloWorld,<br/> props: true<br/> },<br/> {<br/> <strong>path: '/jsx/:name',</strong><br/> name: 'jsx',<br/> component: HelloJSX,<br/> props: true<br/> },<br/> ],<br/>})</pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <div><br/> <router-link to="/index/taro" class="btn btn-primary mx-2"><br/> Go to Top<br/> </router-link><br/> <router-link to="/jsx/hanako" class="btn btn-warning"><br/> Go to JSX<br/> </router-link><br/> </div><br/> <hr><br/> <router-view></router-view><br/> </div><br/></template></pre>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>composition API 使い方2021-03-01T02:08:34+00:002024-03-28T20:12:15+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/composition-api-%E4%BD%BF%E3%81%84%E6%96%B9/<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4>propsとsetupだけ</h4>
<p>propsでコンポーネントタグに設定できる属性を管理。それ以外はsetupというメソッドで処理。</p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{title}}</h1><br/> <p>{{msg}}</p><br/> </div><br/></template><br/><script><br/>export default {<br/> <strong>props</strong>: {<br/> title: String,<br/> msg: String<br/> },<br/> <strong>setup(props)</strong> {<br/> console.log(props)<br/> }<br/>}<br/></script></pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/><strong> <HelloWorld title="Composition API"</strong><br/><strong> msg="This is Composition API sample."/></strong><br/> </div><br/></template><br/><br/><script><br/><strong>import HelloWorld from './components/HelloWorld.vue'</strong><br/><br/>export default {<br/> name: 'app',<br/> components: {<br/> HelloWorld<br/> },<br/>}<br/></script></pre>
<p>JSXでは</p>
<pre>export default {<br/> name: 'HelloJSX',<br/> props: {<br/> title: String,<br/> msg: String<br/> },<br/> setup(props) {<br/><strong> return () => <div class="alert alert-primary"></strong><br/><strong> <h1>{props.title}</h1></strong><br/><strong> <p>{props.msg}</p></strong><br/><strong> </div></strong><br/> }<br/>}</pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <HelloJSX title="Composition API"<br/> msg="This is Composition API sample."/><br/> </div><br/></template><br/><br/><script><br/>import HelloJSX from './components/HelloJSX.jsx'<br/><br/>export default {<br/> name: 'app',<br/> components: {<br/> HelloJSX<br/> },<br/>}<br/></script></pre>
<h4>Returnを使う場合</h4>
<pre><script><br/>import { h, ref } from 'vue'<br/><br/>export default {<br/> props: {<br/> title: String,<br/> msg: String<br/> },<br/> setup(props) {<br/> return ()=> h('div',{class:'alert alert-primary'}, [<br/> h('h1', props.title),<br/> h('p', props.msg)<br/> ])<br/> }<br/>}<br/></script></pre>
<h4>Composition APIにdataはない refを使う</h4>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{title}}</h1><br/> <p>{{data.msg}} ( {{data.count}} )</p><br/> </div><br/></template><br/><br/><script><br/>import { ref } from 'vue'<br/>export default {<br/> props: {<br/> title: String<br/> },<br/> setup(props) { <strong>//dataという定数を作成している</strong><br/> <strong>const data = ref({</strong> //値の参照 constにすることで勝手に別の値にならない<br/><strong> msg: 'This is ref-value!',</strong><br/><strong> count: 0</strong><br/><strong> })</strong><br/> setInterval(()=>{<br/> <strong>data.value.count++ //refで参照している値はvalueというメソッドで取り出す</strong><br/> }, 1000)<br/> return {<br/> data <strong>//作成された定数を返す</strong><br/> }<br/> }<br/>}<br/></script></pre>
<p>変数 = ref ( 値 ) 値が保管されている場所</p>
<p>普通の変数を使ったときはリアクティブにならない : 画面に表示した値を操作することで表示まで自動的に更新されない</p>
<p></p>
<h4>参照を作成するreactive関数:リアクティブな値のコピーを返す</h4>
<pre><script><br/>import { ref, reactive } from 'vue'<br/><br/>export default {<br/> props: {<br/> title: String<br/> },<br/> setup(props) {<br/> const data = reactive({<br/> msg: 'This is ref-value!',<br/> count: 0<br/> })<br/> setInterval(()=>{<br/> <strong>data.count++ //.valueは使わない</strong><br/> }, 1000)<br/> return {<br/> data<br/> }<br/> }<br/>}<br/></script></pre>
<p>reactiveで作成できるのは、オブジェクトのみ。数字や真偽値のような基本型は使えない。</p>
<p>基本型の値をリアクティブにしたい場合はref</p>
<p>オブジェクトをリアクティブにするならreactive</p>
<p></p>
<h4>メソッドの利用</h4>
<p>setup内で変数に関数を代入しておき、この変数をテンプレートに割り当てておく</p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{title}}</h1><br/> <p class="h5">{{<strong>data.msg</strong>}}</p><br/> <div><br/> <input type="number" v-model="data.num"<br/> min="0" class="form-control"><br/> </div><br/> <button class="btn btn-primary m-3"<br/> <strong> v-on:click="action"></strong>Click</button> //v-on:clickにaction指定<br/> </div><br/></template><br/><br/><script><br/>import { ref, reactive } from 'vue'<br/><br/>export default {<br/> props: {<br/> title: String<br/> },<br/> <strong> setup(props) {</strong><br/><strong> const data = reactive({</strong><br/><strong> msg: 'This is ref-value!',</strong><br/><strong> num: 0</strong><br/><strong> })</strong><br/> <strong> const action = ()=> {</strong><br/><strong> let total = 0</strong><br/><strong> for(let i = 1;i <= data.num;i++) {</strong><br/><strong> total += i</strong><br/><strong> }</strong><br/><strong> data.msg = "Total: " + total</strong><br/><strong> }</strong><br/><strong> return {</strong><br/><strong> data, action</strong><br/><strong> }</strong><br/> }<br/>}<br/></script></pre>
<h4>setupのcontext</h4>
<p>setupオブジェクトには「context」も含まれる</p>
<p>contextオブジェクトに含まれる属性</p>
<ul style="list-style-type: disc;">
<li>attrs:コンポーネントタグに用意された属性をまとめたもの</li>
<li>slots:コンポーネント内に含まれるスロットをまとめたもの</li>
<li>emit:emitされた内容をまとめたもの</li>
</ul>
<p></p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{title}}</h1><br/> <p class="mt-3 h5">{{data.msg}}</p><br/> </div><br/></template><br/><br/><script><br/>import { ref, reactive } from 'vue'<br/><br/>export default {<br/> props: {<br/> title: String<br/> },<br/> <strong> setup(props, context) {</strong><br/><strong> const data = reactive({</strong><br/><strong> msg: 'This is ref-value!',</strong><br/><strong> })</strong><br/><strong> data.msg = context.attrs['msg'].toUpperCase() //大文字に</strong><br/><strong> return {</strong><br/><strong> data</strong><br/><strong> }</strong><br/> }<br/>}<br/></script></pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <HelloWorld title="Composition API"<br/> msg="This is Composition API sample."/><br/> </div><br/></template></pre>
<h4></h4>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>Vue.js 3 コンポーネントの使い方 ー 応用2021-02-25T01:26:44+00:002024-03-28T20:23:25+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/vuejs-3-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9-%E3%83%BC-%E5%BF%9C%E7%94%A8/<h4>h関数によるレンダリング</h4>
<p>htmlオブジェクトの生成</p>
<p><strong>h(タグ名、属性情報、内部の要素)</strong></p>
<pre><script><br/>import { h } from 'vue'<br/><br/>export default {<br/> name: 'HelloWorld',<br/> data() {<br/> return {<br/> title: 'HelloWorld',<br/> message:'This is sample message.',<br/> }<br/> },<br/> <strong> render() {</strong><br/><strong> return h('div',{</strong><br/><strong> class:'alert alert-warning'</strong><br/><strong> },</strong><br/><strong> [</strong><br/><strong> h('h2', this.title),</strong><br/><strong> h('p', this.message)</strong><br/><strong> ])</strong><br/><strong> }</strong><br/>}<br/></script></pre>
<h6>App.vue</h6>
<pre><template><br/> <div id="app"><br/> <HelloWorld /><br/> </div><br/></template><br/><br/><script><br/>import HelloWorld from './components/HelloWorld.vue'<br/><br/>export default {<br/> name: 'app',<br/> components: {<br/> HelloWorld<br/> }<br/>}<br/></script></pre>
<h4></h4>
<h4><br/>JSX</h4>
<p>テキストではなく、HTMLのコードそのものを扱うことができる</p>
<pre>export default {<br/> name :'HelloJSX',<br/> data() {<br/> return {<br/> title: 'HelloJSX',<br/> message:'This is sample message.',<br/> }<br/> },<br/> <strong>render(h) {</strong><br/><strong> return (</strong><br/><strong> <div class="alert alert-primary"></strong><br/><strong> <h2>{ this.title }</h2></strong><br/><strong> <p>{ this.message }</p></strong><br/><strong> </div></strong><br/><strong> )</strong><br/> }<br/>}</pre>
<p>App.vue</p>
<pre><template><br/> <div id="app"><br/> <HelloJSX /><br/> </div><br/></template><br/><br/><script><br/>import HelloJSX from './components/HelloJSX.jsx'<br/><br/>export default {<br/> name: 'app',<br/> components: {<br/> HelloJSX<br/> }<br/>}<br/></script></pre>
<h4></h4>
<h4>propsを使う場合</h4>
<p></p>
<pre>export default {<br/> name :'HelloJSX',<br/> props: {<br/> title: String,<br/> msg: String<br/> },<br/> render(h) {<br/> return (<br/> <div class="alert alert-primary"><br/> <h2>{ this.title }</h2><br/> <p>{ this.msg }</p><br/> </div><br/> )<br/> }<br/>}</pre>
<pre><HelloJSX title="OK, Vue3" <br/> msg="※属性で設定したメッセージ。" /> //ここで指定できる</pre>
<p></p>
<h4>属性の指定</h4>
<p></p>
<pre>export default {<br/> name :'HelloJSX',<br/> props: {<br/> title: String,<br/> msg: String<br/> },<br/> data() {<br/> return {<br/> <strong>cls_title</strong>: 'text-danger h1',<br/> <strong>cls_msg</strong>: 'text-primary h5'<br/> }<br/> },<br/> render(h) {<br/> return (<br/> <div class="alert alert-primary"><br/> <h2 class={<strong>this.cls_title</strong>}>{ this.title }</h2><br/> <p class={<strong>this.cls_msg</strong>}>{ this.msg }</p><br/> </div><br/> )<br/> }<br/>}</pre>
<p></p>
<h4>Getter/Setter</h4>
<p>算出プロパティ:処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができる。</p>
<p>2倍と2乗の算出プロパティ</p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{ title }}</h1><br/> <p>{{ message }}</p><br/> <hr><br/> <p class="h5">val: {{val}}</p><br/> <div class="form-group text-left"><br/> <label>* 2:</label><br/> <input type="number" <br/> v-model="a" class="form-control"><br/> </div><br/> <div class="form-group text-left"><br/> <label>^ 2:</label><br/> <input type="number" <br/> v-model="b" class="form-control"><br/> </div><br/> </div><br/></template><br/><br/><script><br/>export default {<br/> name: 'HelloWorld',<br/> props: {<br/> title: String, <br/> },<br/> data() {<br/> return {<br/> message: '算術プロパティの利用。',<br/> val: 0,<br/> }<br/> },<br/> <strong> computed: {</strong><br/><strong> a: {</strong><br/><strong> get() {</strong><br/><strong> return this.val * 2</strong><br/><strong> },</strong><br/><strong> set(value) {</strong><br/><strong> this.val = Math.floor(value / 2)</strong><br/><strong> },</strong><br/><strong> },</strong><br/><strong> b: {</strong><br/><strong> get() {</strong><br/><strong> return this.val * this.val</strong><br/><strong> },</strong><br/><strong> set(value) {</strong><br/><strong> this.val = Math.floor(Math.sqrt(value))</strong><br/> },<br/> },<br/> },<br/> created() {<br/> this.val = 10<br/> },<br/>}<br/></script></pre>
<h4></h4>
<h4>ウオッチャ</h4>
<p>特定の値が変更された時、様々な値を変更する必要がある時に便利</p>
<div>
<div>
<pre><span><template><br/> <div class="alert alert-primary"><br/> <h1>{{ title }}</h1><br/> <p>{{ message }}</p><br/> <hr><br/> <div class="form-group text-left"><br/> <label>Value:</label><br/> <input type="number" v-model="val"<br/> class="form-control"><br/> </div><br/> <table class="bg-white table mt-4"><br/> <tr><th>add:</th><td>{{add}}</td></tr><br/> <tr><th>sub:</th><td>{{sub}}</td></tr><br/> <tr><th>multiple:</th><td>{{mult}}</td></tr><br/> <tr><th>divide:</th><td>{{div}}</td></tr><br/> </table><br/> </div><br/></template><br/><br/><script><br/>export default {<br/> name: 'HelloWorld',<br/> data() {<br/> return {<br/> title: 'Watchers',<br/> message: '値の監視',<br/> val: 0,<br/> add: 0,<br/> sub: 0,<br/> mult:0,<br/> div: 0,<br/> }<br/> },<br/><strong> watch:{</strong><br/><strong> val(newValue, oldValue) {</strong><br/><strong> console.log(oldValue + ' -> ' + newValue)</strong><br/><strong> this.val = newValue</strong><br/><strong> var val = parseInt(this.val)</strong><br/><strong> this.add = Math.floor(val + 2)</strong><br/><strong> this.sub = Math.floor(val - 2)</strong><br/><strong> this.mult = Math.floor(val * 2)</strong><br/><strong> this.div = Math.floor(val / 2)</strong><br/><strong> }</strong><br/> },<br/> created(){<br/> this.val = 6<br/> },<br/>}<br/></script></span></pre>
</div>
</div>
<h4>イベントの伝搬</h4>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{ title }}</h1><br/> <pre v-on:click="clear">{{ message }}</pre><br/> <hr><br/><strong> <div id="out" class="out" v-on:click="a_event">A</strong><br/><strong> <div id="mid" class="mid" v-on:click="b_event">B<br/></strong> <--- <strong>伝搬をストップする場合 </strong><em><strong><div id="mid" class="mid" v-on:click.stop="b_event">B ---></strong></em><br/><strong> <div id="in" class="in" v-on:click="c_event">C</strong><br/><strong> </div></strong><br/><strong> </div></strong><br/><strong> </div></strong><br/> </div><br/></template><br/><br/><script><br/>export default {<br/> name: 'HelloWorld',<br/> data: function(){<br/> return {<br/> title: 'Event',<br/> message: 'イベントの伝播について。\n',<br/> }<br/> },<br/><strong> methods: {</strong><br/><strong> a_event(event) {</strong><br/><strong> this.message += "A-Event [" + event.target.id </strong><br/><strong> + ' → ' + event.currentTarget .id + "]\n"</strong><br/><strong> },</strong><br/><strong> b_event(event) {</strong><br/><strong> this.message += "B-Event [" + event.target.id </strong><br/><strong> + ' → ' + event.currentTarget .id + "]\n"</strong><br/><strong> },</strong><br/><strong> c_event(event) {</strong><br/><strong> this.message += "C-Event [" + event.target.id </strong><br/><strong> + ' → ' + event.currentTarget .id + "]\n"</strong><br/><strong> },</strong><br/><strong> clear() {</strong><br/><strong> this.message = 'イベントの伝播について。\n'</strong><br/><strong> }</strong><br/> },<br/>}<br/> <br/></script><br/><style><br/>pre {<br/> font-size:16pt;<br/> line-height: 1.25;<br/>}<br/>div.out {<br/> padding: 0px;<br/> background-color: #eee;<br/> width:300px;<br/> height:200px;<br/>}<br/>div.mid {<br/> padding: 0px;<br/> background-color: #ddd;<br/> width:200px;<br/> height:170px;<br/>}<br/>div.in {<br/> padding: 0px;<br/> background-color: #ccc;<br/> width:100px;<br/> height:140px;<br/>}<br/></style></pre>
<p>キーイベント</p>
<pre><template><br/> <div class="alert alert-primary"><br/> <h1>{{ title }}</h1><br/> <pre>{{ message }}</pre><br/> <hr><br/> <div><br/> <input type="text" class="form-control"<br/> v-on:keypress="type"<br/> v-on:keydown.delete="clear"<br/> v-on:keydown.space="space" <br/> v-on:keydown.enter="enter"></div><br/> </div><br/></template><br/><br/><script><br/>export default {<br/> name: 'HelloWorld',<br/> data() {<br/> return {<br/> title: 'Event',<br/> message: '',<br/> }<br/> },<br/> methods: {<br/> type(event) {<br/> if (event.key == 'Enter'){ return }<br/> this.message += event.key + ' '<br/> event.target.value = ''<br/> },<br/> clear() {<br/> this.message = ''<br/> },<br/> space() {<br/> this.message += '_ '<br/> },<br/> enter(event) {<br/> var res = this.message.split(' ').join('')<br/> this.message = res.split('_').join(' ')<br/> event.target.value = ''<br/> }<br/> },<br/>}<br/></script></pre>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>Vuex まとめ2021-02-19T04:53:12+00:002024-03-28T20:23:57+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/vuex-%E3%81%BE%E3%81%A8%E3%82%81/<h5>Vuexは[store]フォルダを使用する</h5>
<h5></h5>
<h4>$storeを利用</h4>
<p>コンポーネントなどからVuexの変数や処理などを利用するために$storeを利用する</p>
<p>・storeフォルダ index.js</p>
<pre>import Vuex from 'vuex'<br/><br/><strong><code>//Vuexの情報をまとめて保管するオブジェクト</code></strong><br/><br/>const createStore = () => {<br/> return new Vuex.Store({<br/> <strong>state</strong>: function(){<br/> return {<br/> message: 'This is store message!',<br/> };<br/> },<br/> })<br/><br/><strong>//stateはコンポーネントでいうdataのようなもの</strong><br/><br/>export default createStore</pre>
<h4></h4>
<h4>storeの値を利用する</h4>
<p>・index.vue</p>
<pre><template><br/> <section class="container"><br/> <h1>{{title}}</h1><br/> <p><strong>{{$store.state.message}}</strong></p><br/> </section><br/></template><br/><br/><script><br/>export default {<br/> data: function(){<br/> return {<br/> title:'Hello',<br/> };<br/> },<br/>};<br/></script></pre>
<h4>store値の変更</h4>
<p>storeフォルダ index.js</p>
<pre>import Vuex from 'vuex'<br/><br/>const createStore = () => {<br/> return new Vuex.Store({<br/> state: function(){<br/> return {<br/> message: 'count number.',<br/> <strong>counter: 0,</strong> <strong>//追加</strong><br/> };<br/> },<br/> })<br/>}<br/><br/>export default createStore</pre>
<p>・index.vue</p>
<pre><template><br/> <section class="container"><br/> <h1>{{title}}</h1><br/> <p>{{$store.state.message}}</p><br/> <hr><br/> <div class="link"<br/> <strong>v-on:click="doAction"></strong> <strong>//doAction関数の割り当て</strong><br/> <a><br/> clicked: {{ $store.state.counter }}<br/> </a><br/> </div><br/> </section><br/></template><br/><br/><script><br/>export default {<br/> data: function(){<br/> return {<br/> title:'Hello',<br/> message: 'this is message.',<br/> };<br/> },<br/> methods: {<br/> doAction: function(){<br/><strong> //doAction関数の定義</strong><br/> <strong> this.$store.state.counter++; </strong><br/> }<br/> }<br/>};<br/></script></pre>
<p></p>
<h4>ミューテーションを使う</h4>
<p>値変更処理をstore側に用意</p>
<p>storeフォルダ index.js</p>
<pre>import Vuex from 'vuex'<br/><br/>const createStore = () => {<br/> return new Vuex.Store({<br/> state: function(){<br/> return {<br/> message: 'count number.',<br/> counter: 0,<br/> };<br/> },<br/><strong> mutations: {</strong><br/><strong> count: function(state) {</strong><br/><strong> state.counter++;</strong><br/><strong> },</strong><br/><strong> reset: function(state) {</strong><br/><strong> state.counter = 0;</strong><br/><strong> }</strong><br/> },<br/> })<br/>}<br/><br/>export default createStore</pre>
<h4>ミューテーションはコミットして使う</h4>
<p>・index.vue</p>
<pre><template><br/> <section class="container"><br/> <h1>{{title}}</h1><br/> <p>{{message}}</p><br/> <hr><br/> <div class="link"<br/> @click="$store.commit('count')" <a>//@=v-on</a><br/> @click.ctrl="$store.commit('reset')"> //ctr+click<br/> <a><br/> clicked: {{ $store.state.counter }}<br/> </a><br/> </div><br/> </section><br/></template><br/><br/><script><br/>export default {<br/> data: function(){<br/> return {<br/> title:'Hello',<br/> message: 'this is message.',<br/> };<br/> },<br/>};<br/></script></pre>
<h4>引数が複数ある場合</h4>
<p>mutations</p>
<pre>mutations: {<br/> count: function(state, obj) {<br/> state.message =<strong>obj.</strong>message; //objを用意<br/> state.counter += <strong>obj.</strong>add;<br/> },<br/> reset: function(state) {<br/> state.counter = 0;<br/> }<br/>},</pre>
<p>呼び出し側</p>
<pre><div class="link"<br/> @click.exact="$store.commit({type:'count', message:'add 1!', add:1})" <strong>//messageと足し算する数</strong><br/> @click.shift.exact="$store.commit({type:'count', message:'add 5!', add:5})"<br/> @click.ctrl.exact="$store.commit({type:'count', message:'add 10!', add:10})"><br/> <a @click.stop="$store.commit('reset')"><br/> clicked: {{ $store.state.counter }}<br/> </a><br/></div></pre>
<h4>アクションの利用</h4>
<p>ミューテーション:ステートを利用した処理を実行</p>
<p>アクション:ミューテーションを実行する仕組み</p>
<p>storeフォルダ index.js</p>
<pre>import Vuex from 'vuex'<br/><br/>const createStore = () => {<br/> return new Vuex.Store({<br/> state: function(){<br/> return {<br/> message: 'count number.',<br/> counter: 0,<br/> };<br/> },<br/> mutations: {<br/> <strong> count</strong>: function(state, n) {<br/> state.counter += n;<br/> },<br/> <strong>say</strong>: function(state, msg) {<br/> state.message =msg; <br/> },<br/> <strong>reset</strong>: function(state) {<br/> state.counter = 0;<br/> state.message ='reset now...';<br/> },<br/> },<br/> actions: {<br/> doit: function(context) {<br/> var n = Math.floor(Math.random() * 10); //0-9のランダム値<br/> context.commit('count', n);<br/> context.commit('say', 'add ' + n + '!');<br/> },<br/> }<br/> })<br/>}<br/><br/>export default createStore</pre>
<p></p>
<p>index.vue</p>
<pre><div class="link"<br/> @click="$store.<strong>dispatch</strong>('doit')"> <strong> //アクション実行 countとsayを呼び出す</strong><br/> <a @click.stop="$store.commit('reset')"><br/> clicked: {{ $store.state.counter }}<br/> </a><br/></div></pre>
<h4>リロードしても値を保持 pluginを利用するだけ</h4>
<p>npm install vuex-persistedstate</p>
<p>mode:spa</p>
<p>storeフォルダ index.js</p>
<pre>import Vuex from 'vuex'<br/><strong>import createPersistedState from "vuex-persistedstate";</strong><br/><br/>const createStore = () => {<br/> return new Vuex.Store({<br/> state: function(){<br/> return {<br/> message: 'count number.',<br/> counter: 0,<br/> };<br/> },<br/> mutations: {<br/> doit: function(state) {<br/> var n = Math.floor(Math.random() * 10);<br/> state.counter += n;<br/> state.message = 'add ' + n + '.'; <br/> },<br/> reset: function(state) {<br/> state.counter = 0;<br/> state.message = "reset now.";<br/> },<br/> },<br/>//プラグイン追加<br/><strong> plugins: [</strong><br/><strong> createPersistedState(),</strong><br/><strong> ],</strong><br/> })<br/>}<br/>export default createStore</pre>
<p>index.vue</p>
<pre><template><br/> <section class="container"><br/> <h1>{{title}}</h1><br/> <p>{{$store.state.message}}</p><br/> <hr><br/> <div class="link"<br/> @click="$store.commit('doit')"><br/> <a @click.stop="$store.commit('reset')"><br/> clicked: {{ $store.state.counter }}<br/> </a><br/> </div><br/> </section><br/></template></pre>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>Vue.js Vuetify Nuxt.js 環境構築 デバッグまで2021-02-17T06:36:27+00:002024-03-28T20:23:46+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/vuejs-vuetify-nuxtjs-%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89/<h4>〇 Vue.jsの環境の構築</h4>
<pre><span class="n">npx</span> <span class="n">create</span><span class="o">-</span><span class="n">nuxt</span><span class="o">-</span><span class="n">app</span> project_name</pre>
<p></p>
<p><a class="autolink" href="http://localhost:3000/" rel="nofollow noopener" target="_blank"><u><span color="#0066cc">http://localhost:3000/</span></u></a></p>
<p>を立ち上げることができる。</p>
<p></p>
<h4>〇 デバッグ環境</h4>
<p>debugger for chromeをインストール</p>
<p>Ctrl+Shift+X で拡張機能画面を開く</p>
<p></p>
<p>--- ソースマップの設定</p>
<p>nuxt.config.js</p>
<pre> <span class="nl">build:</span> <span class="p">{</span>
<span class="cm">/*
** You can extend webpack config here
*/</span>
<span class="n">extend</span> <span class="p">(</span><span class="n">config</span><span class="p">,</span> <span class="n">ctx</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//ここから追加</span>
<span class="k">if</span> <span class="p">(</span><span class="n">ctx</span><span class="p">.</span><span class="n">isDev</span> <span class="o">&&</span> <span class="n">ctx</span><span class="p">.</span><span class="n">isClient</span><span class="p">)</span> <span class="p">{</span>
<span class="n">config</span><span class="p">.</span><span class="n">devtool</span> <span class="o">=</span> <span class="err">'</span><span class="kr">inline</span><span class="o">-</span><span class="n">cheap</span><span class="o">-</span><span class="n">module</span><span class="o">-</span><span class="n">source</span><span class="o">-</span><span class="n">map</span><span class="err">'</span>
<span class="p">}</span>
<span class="c1">//ここまで追加</span>
<span class="p">}</span>
<span class="p">}</span></pre>
<p>lauch.json書き換え</p>
<pre> <span class="s">"version"</span><span class="o">:</span> <span class="s">"0.2.0"</span><span class="p">,</span>
<span class="s">"configurations"</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="s">"type"</span><span class="o">:</span> <span class="s">"chrome"</span><span class="p">,</span>
<span class="s">"request"</span><span class="o">:</span> <span class="s">"launch"</span><span class="p">,</span>
<span class="s">"name"</span><span class="o">:</span> <span class="s">"Nuxtjs: Launch Chrome"</span><span class="p">,</span>
<span class="s">"url"</span><span class="o">:</span> <span class="s">"http://localhost:3000"</span><span class="p">,</span>
<span class="s">"webRoot"</span><span class="o">:</span> <span class="s">"${workspaceFolder}"</span><span class="p">,</span>
<span class="s">"runtimeArgs"</span><span class="o">:</span> <span class="p">[</span>
<span class="s">"--remote-debugging-port=9222"</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="p">]</span></pre>
<p>デバッグポイント設定</p>
<p>Ctrl+Shift+D でデバッグ画面</p>
<p>緑の三角マーク </p>
<pre><span class="s">Launch Chrome</span></pre>
<p>Ctrl+Shift+@ で画面下側にコンソールが開く</p>
<p></p>
<p>node.jsを起動中に行う</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>django DRFとdatatable-vueをaxiosで連結2021-01-25T06:38:36+00:002024-03-28T20:17:30+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/django-drf%E3%81%A8datatable-vue%E3%82%92axios%E3%81%A7%E9%80%A3%E7%B5%90/<p>vue.jsのdatatable-vueを使ってdjango apiからデータを表示する方法</p>
<p>django の設定 ページネーション</p>
<pre><code class="language-python hljs"><span class="hljs-keyword">view.py<br/><br/>from</span> rest_framework <span class="hljs-keyword">import</span> generics, pagination, response
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StandardResultsSetPagination</span>(<span class="hljs-params">pagination.PageNumberPagination</span>):</span>
page_size = <span class="hljs-number">10</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">get_paginated_response</span>(<span class="hljs-params">self, data</span>):</span>
<span class="hljs-keyword">return</span> response.Response({
<span class="hljs-string">'next'</span>: self.get_next_link(),
<span class="hljs-string">'previous'</span>: self.get_previous_link(),
<span class="hljs-string">'count'</span>: self.page.paginator.count, # 全件数
<span class="hljs-string">'total_pages'</span>: self.page.paginator.num_pages,
<span class="hljs-string">'current_page'</span>: self.page.number,
<span class="hljs-string">'results'</span>: data,
<span class="hljs-string">'page_size'</span>: self.page_size,
<span class="hljs-string">'range_first'</span>: (self.page.number * self.page_size) - (self.page_size) + <span class="hljs-number">1</span>,
<span class="hljs-string">'range_last'</span>: min((self.page.number * self.page_size), self.page.paginator.count),
})</code></pre>
<p></p>
<p>Vueの設定</p>
<pre class="highlight shell"><code><span class="nv">$ </span>vue create datatable-vue<br/></code></pre>
<pre class="highlight plaintext"><code>$ cd datatable-vue</code></pre>
<pre class="highlight shell"><code>npm run serve -- --port 3000</code></pre>
<pre class="highlight shell"><code>vue add vuetify</code></pre>
<pre class="highlight shell"><code><span class="nv"></span>npm <span class="nb">install</span> <span class="nt">--save</span> axios vue-axios</code></pre>
<pre><template><br/> <div class=""><br/> <h1 style="text-align: center;">Datatable with drf</h1><br/> <v-data-table<br/> :page="page"<br/> :pageCount="numberOfPages"<br/> :headers="headers" //ヘッダーの設定<br/> :items="results" //ヘッダーに入れる中身 主に[ ] arrayで設定する<br/> :options.sync="options"<br/> :server-items-length="totalItems"<br/> :loading="loading"<br/> class="elevation-1"<br/> ><br/> </v-data-table><br/> </div><br/></template></pre>
<pre>import axios from "axios";<br/>export default {<br/> name: "DatatableComponent",<br/> data() {<br/> return {<br/> page: 1,<br/> totalItems: 0,<br/> numberOfPages: 0,<br/> results: [],<br/> loading: true,<br/> options: {},<br/> headers: [<br/> { text: "<span>xxxxxx</span>", value: "yyyyyy" },<br/> { text: "<span>qqqqq</span>", value: "zzzzzz" },<br/> { text: "<span>ddddd</span>", value: "ffffffff" },<br/> { text: "<span>kkkkk</span>", value: "bbbbb" },<br/> ],<br/> };<br/> },<br/> watch: {<br/> options: {<br/> handler() {<br/> this.readDataFromAPI();<br/> },<br/> },<br/> deep: true,<br/> },</pre>
<pre> methods: {<br/> readDataFromAPI() {<br/> this.loading = true;<br/> const { page } = this.options;<br/> console.log("Page Number ", page);<br/> let pageNumber = page;<br/> axios<br/> .get(<br/> "http://127.0.0.1:8000/api/?page=" + pageNumber<br/> )<br/> .then((response) => {<br/> this.loading = false;<br/> const values = Object.values(response.data.results); # resultsはdjangoで設定したresultsに一致<br/> console.log(values); # response.data.resultsがobjectで提供されているため、arrayに変換する<br/> values.forEach((value) => {<br/> const item = {<br/> A: value.yyyyy,<br/> B: value.zzzzz,<br/> C: value.fffff,<br/> D: value.bbbbb<br/> };<br/> this.results.push(item)<br/> });<br/> this.numberOfPages = response.data.total_pages; #djangoの設定値<br/> this.totalItems = response.data.count #djangoの設定値<br/> });<br/> },<br/> },<br/> mounted() {<br/> this.readDataFromAPI();<br/> },<br/>};</pre>
<h6 class="highlight shell"><code> <br/></code></h6>
<p>参考</p>
<h6 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 medium"><a href="https://dev.to/instantwebtoolsnet/datatables-with-vuejs-vuetify-pagination-rest-api-3jji" title="Datatables with VueJS [ Vuetify + Pagination + Rest API ]">Datatables with VueJS [ Vuetify + Pagination + Rest API ]</a></h6>Vue.js 私的まとめ2020-11-26T03:05:27+00:002024-03-19T21:18:01+00:00Autherhttps://eng-image-learning.com/blog/author/Auther/https://eng-image-learning.com/blog/vuejs-%E7%A7%81%E7%9A%84%E3%81%BE%E3%81%A8%E3%82%81/<p>Vue.js + Django で簡単なサイトを1日以内に構築するための私的逆引き用まとめ</p>
<h3>Vue.jsの使用用header</h3>
<pre> <head><br/> <meta charset="UTF-8"><br/> <title>for use Vue.js</title><br/> <link rel="stylesheet" href="style.css" ><br/> <script src="<a href="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js%22%3E%3C/script">https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script</a>><br/> </head></pre>
<h3>v-bind :属性指定(主にstatic fileの呼び出し)</h3>
<pre> <body><br/> <h2>画像指定</h2><br/> <div id="app"><br/> <strong> <img v-bind:src="fileName">v-bindで指定</img></strong><br/> </div></pre>
<pre> <script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> <strong><code>fileName:'file_name.jpg'</code></strong><br/> }<br/> })<br/> </script><br/> </body></pre>
<h3>v-model :ユーザー入力データの取り込み(inputボタンとか)</h3>
<pre><br/> <h2>入力した文字列を表示する例</h2><br/> <div id="app"><br/> <input<strong> v-model="myName"</strong> placeholder="お名前"><br/> <p>私は、{{ <strong>myName</strong> }} です。</p><br/> </div></pre>
<pre><script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> <strong>myName:''</strong><br/> }<br/> })<br/></script></pre>
<h3>v-on:ユーザーがボタンを押したときに何らかの処理を行う場合</h3>
<pre> <h2>increamet by click</h2><br/> <div id="app"><br/> <p>{{ count }}</p> <br/> <button v-on:click="関数名">1増やす</button><br/> </div></pre>
<pre><script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> count:0<br/> },<br/> methods: {<br/> 関数名: function() {<br/> this.count++;<br/> }<br/> }<br/> })<br/> </script></pre>
<p></p>
<h3>v-for:繰り返し表示</h3>
<pre> <h2>オブジェクトの配列データを、リストで表示</h2><br/> <div id="app"><br/> <ul><br/> <li v-for="item in objArray">{{ item.name }} ¥{{ item.price }}</li><br/> </ul><br/> </div></pre>
<pre><script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> objArray: [<br/> {name: 'いちご', price: 100},<br/> {name: 'りんご', price: 120},<br/> {name: 'だんご', price: 150}<br/> ]<br/> }<br/> })<br/> </script></pre>
<p></p>
<h3>v-if:データの表示/非表示</h3>
<pre><h2>trueのときだけ表示する例</h2><br/> <div id="app"><br/> <label><input type="checkbox" v-model="プロパティ名(任意)">表示する</label><br/> <p v-if="myVisible">チェックボックスはON</p><br/> </div></pre>
<pre> <script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> プロパティ名: false<br/> }<br/> })<br/> </script></pre>
<h3></h3>
<h3>データが変わった時に自動的に再計算させる:computed</h3>
<p>リアルタイムに値を計算し直して表示できる</p>
<pre> <div id="app"><br/> <input v-model.number="price" type="number">円<br/> <p>消費税込みの金額 {{ <strong>taxIncluded</strong> }}円</p><br/> </div></pre>
<pre> <script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> price: 100<br/> },<br/> computed: {<br/> // priceが変わったら、消費税込み金額を算出する<br/> <strong>taxIncluded</strong>: function() {<br/> return this.price * 1.08;<br/> }<br/> }<br/> })<br/> </script></pre>
<p></p>
<h3>データの変化を監視</h3>
<p>株価が動いたときなどログとして書き出すことができないだろうか。</p>
<pre> <h2>禁止文字が入力されたらアラートを出す</h2><br/> <div id="app"><br/> <p>禁止文字:「{{ forbiddenText }}」</p><br/> <textarea v-model="<strong>inputText</strong>"></textarea><br/> </div></pre>
<pre> <script><br/> new Vue({<br/> el: '#app',<br/> data: {<br/> forbiddenText: 'だめ',<br/> inputText: '今日は、天気です。'<br/> },<br/> watch: {<br/> // 入力された文字列を監視する<br/> inputText: function(){<br/> var pos = this.<strong>inputText</strong>.indexOf(this.forbiddenText);<br/> if (pos >= 0) {<br/> alert(this.forbiddenText + "は、入力できません。");<br/> // 入力文字列から禁止文字を削除する<br/> this.inputText = this.inputText.substr(0,pos);<br/> }<br/> }<br/> }<br/> })<br/> </script></pre>
<h3>v-move:トランジションアニメーション</h3>
<p>ソートとシャッフル</p>
<pre> <div id="app"><br/> <transition-group><br/> <li v-for="item in dataArray" v-bind:key="item"> {{item}}</li><br/> </transition-group><br/> <button v-on:click="sortData">ソートする</button><br/> <button v-on:click="shuffleData">シャッフルする</button><br/> </div></pre>
<pre> <script><br/> new Vue({<br/> el: "#app",<br/> data: {<br/> dataArray:['one','two','three','four','five']<br/> },<br/> methods: {<br/> sortData: function() {<br/> this.dataArray.sort(function(a,b) {<br/> if (a < b) return -1;<br/> if (a > b) return 1;<br/> return 0;<br/> });<br/> },<br/> shuffleData: function() {<br/> var buffer = [];<br/> var len = this.dataArray.length;<br/> for (var i=len; len>0; len--) {<br/> var r = Math.floor(Math.random() * len);<br/> buffer.push(this.dataArray[r]);<br/> this.dataArray.splice(r, 1);<br/> }<br/> this.dataArray = buffer;<br/> },<br/> }<br/> })<br/> </script></pre>
<pre> <style><br/> /* 移動トランジションにかかる秒数 */<br/> .v-move {<br/> transition: 0.5s;<br/> }<br/> </style></pre>
<h3>コンポーネント:処理をまとめる</h3>
<pre> <h2>配列からコンポーネントを作って表示する例</h2><br/> <div id="app"><br/> <my-component v-for="(item, index) in myArray" v-bind:my-name="item" ></my-component><br/> </div></pre>
<pre> <script><br/> var MyComponent = {<br/> template: '<p class="my-comp">I am {{ myName }}.</p>',<br/> props: {<br/> myName: String<br/> },<br/> created: function () { // インスタンスが作成された後に実行<br/> if (this.myName == null) {<br/> this.myName = "who are you?";<br/> }<br/> }<br/> }<br/> <br/> new Vue({<br/> el: '#app',<br/> data: {<br/> myArray:['A','B','C','D','E']<br/> },<br/> components: {<br/> 'my-component': MyComponent<br/> }<br/> })<br/> </script></pre>
<h3>JSONの表示</h3>
<p>JSONデータを読み込んで、コンポーネントで並べる</p>
<p>1.HTMLインスタンス</p>
<pre><br/> <div id="app"><br/> <transition-group><br/> <div v-for="item in dataArray" v-bind:key="item.title"><br/> <my-product v-bind:object="item"></my-product><br/> </div><br/> </transition-group><br/> <button v-on:click="sortData">データのソート</button><br/> <button v-on:click="shuffleData">データのシャッフル</button><br/> <p><input type="file" v-on:change="loadData"><br/> </div></pre>
<p>2.Vueインスタンス</p>
<pre>methods: {<br/> sortData: function() {<br/> this.dataArray.sort(function(a,b) {<br/> return (a.title < b.title ? -1 : 1);<br/> return 0;<br/> });<br/> },<br/> shuffleData: function() {<br/> var buffer = [];<br/> var len = this.dataArray.length;<br/> for (var i=len; len>0; len--) {<br/> var r = Math.floor(Math.random() * len);<br/> buffer.push(this.dataArray[r]);<br/> this.dataArray.splice(r, 1);<br/> }<br/> this.dataArray = buffer;<br/> },<br/> loadData: function(e) {<br/> file = e.target.files[0]<br/> if (file) {<br/> var reader = new FileReader()<br/> var vm = this;<br/> reader.onload = function(e){<br/> vm.dataArray = JSON.parse(e.target.result);<br/> }<br/> reader.readAsText(file)<br/> }</pre>
<p>3.つなぐ</p>
<pre><script><br/> var MyComponent = {<br/> props: ["object"],<br/> template:`<br/> <div style="width:300px;backgroundColor:#ffddaa;"><br/> <p style="backgroundColor:#ffa95e;">{{object.title}}</p><br/> <p>解説:{{object.body}}</p><br/> </div>`<br/> }<br/> new Vue({<br/> el: "#app",<br/> data: {<br/> dataArray: [<br/> ~省略~<br/> ]<br/> },<br/> components: {<br/> 'my-product': MyComponent<br/> },<br/> methods: ~同上~<br/> }<br/> }<br/> }); <br/> </script></pre>
<p></p>
<p></p>
<p></p>