日: 2020年8月6日

以前、少しいじったものの、HTML側を大幅に書き換えることになるのがちょっと、と思っていたVus.jsを、再度、調べています。jQueryの置き換えにどうかなと思ったのですが、やはり難しいな、というのが最初の印象です。

かなり前にCakaphpを調べた時も、使い方の前に、フレームワークという考え方が理解できず、最初のうちはどう使えば良いか悩んだのを思い出しました。

個人的な感想は、Vue.jsは、JavaScriptというよりも、JavaScriptを使ったVue.jsというフレームワークを全体とした新しい開発の仕組み、という感じがします。

なお、以前、触ったことがあったので、ページ内の処理は思い出しました。しかし、非同期通信は、かなり悩んだというのが正直なところです。今回、本を買わずに、ネットの情報だけで学んだのが敗因と言えるかもしれません。

以前から、こういう技術的な情報は、Quiitaの記事がヒットしやすいのですが、ここに掲載されているサンプルは、そのままで動かないことが多い。しかも、サンプルの説明も中途半端。できれば、参考にしたくないのですが、他のページもいまいちだと、Quiitaの記事を頼るしかない。そうすると、学習に余計な時間がかかってしまう。今回も、こういった感じではまりました。

一応、目的のサンプルコードができたので、応用してみようかと思っています。

var vueobj = new Vue({

  el: '#main',

  data: {

    message: '',

    views: '',

    xml: '',

    msg: ''

  },

  methods: {

    get: function() {

      this.views = '';

      var self = this;

      var url = 'http://localhost/vue/xml2.php';

      var params = new URLSearchParams();

      params.append('id', '11' );

      params.append('msg', this.msg );
      axios

       .post(url, params)

       .then(function(res){

         self.message = res.data;

         self.xml = res.data;

       })

       .catch(error => console.log(error))

    },

    view: function(){

      this.message = 'このHTMLは、Vue.jsを使っています。';

      var id = getTagName( this.xml, "id" );

      var msg = getTagName( this.xml, "msg" );

      this.views = "id:" + id + " , msg:" + msg ;

    },

    clear: function(){

      this.message = '';

      this.views = '';

      this.msg = '';

    }

  }

})
function getTagName( text, tag ) {

  var stag = "<" + tag + ">";

  var p1 = text.indexOf( stag ) + stag.length;

  var etag = "";

  var p2 = text.indexOf( etag );

  var vals = text.substr( p1, p2-p1 );

  return vals;

}
HTMLは、省略してます。

axiosで、postを送付する際、urlとURLSearchParams()で作った変数を指定して、送信してます。また、これに続くthenのres.dataで受け取っています。さらに受け取ったデータは、XML形式で、別のトリガーを使ってそれを加工し、Webブラウザに表示してます。
axiosの中に書こうとすると、いろいろ制限があってうまく動作しないのが難しい点ですね。また、HTMLとVue.jsのdataで定義する変数が密接に結びついているので、そこをうまく利用するのがポイントのようです。