Vue.js

SPA

2019-0316
LaravelをXAMPで動作させるためにhttpd.confに以下追加。Vue.jsが動作しなくなった。削除して動作するようになった。よく思い出した!あれこれコンフューズしてる中で。

Alias / "/xampp/htdocs/laravelapp/public/"
<VirtualHost *:80>
<Directory "/xampp/htdocs/laravelapp/public/">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride all
        Order allow,deny
    Allow from all
</Directory>
</VirtualHost>

頭からでてきた順番がこういう語順。話し言葉というのが近いかな。そんなことに拘ると面白い違った見方となるか。日常からの脱却というか自分の視点を変えるには旅にでるべきだ。なんて思う。田舎に帰っただけで世界観が変わるのは旅行ではないが、それ以上に何か自分で感じることができる場所。

閑話休題
SPA(シングル・ページ・アプリケーション)を考える必要が出てきた。PHPでも<DIV>とjQueryでできるけど、作り方の根本からワークフレームとしてならVue.jsなんぞが熱いらしい。
メリット・デメットも参考になるけど、今回必要があるのスキルとして対応しておきたい。
●どこに適応できるテクなのか
node.js下でのフレームワークなのか、主体はjavaScriptなのか見えないことが多々ある。別途進行中のLaravelはPHPのフレームワーク?らしいがと。何だかWEB制作に関しては混ざっているというか理解が不足というか全体が見えてこないと常々情報収集を感じる昨今だ。以下よんでるけど検索で少し見ているのを覚えている(自分として重要だな、この覚えていることって)内容にあった。「Vue.jsで初めてSPAを開発する
家のmacにはnodeを入れて少しやり始めてる。サクラVPSには入れてたっけ?まだだな多分。
XAMPでこういう勉強がこの頃便利だと思い始めた。
●少しだけ考えてから行動が必要だ
ともかくやってみるそれから考えると言うのも小生には凄く有効だけど、それだと目標・目的が途中で別にが多いかな。

まずは以下が動作した。node.js下でなくともCDNで動かせる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ testVal }}</h1>
</div>
<div id="abc">
    <h1>{{ testVal2 }}</h1>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',

        data: {
            testVal: 'Hello World!'
        }
    });
</script>
<script>
    const abc = new Vue({
        el: '#abc',

        data: {
            testVal2: 'Oops change the word!'
        }
    });
</script>
</html>
No tags for this post.
タイトルとURLをコピーしました