laravel5.3からVue.jsというjsフレームワークが標準で入っているので試しに触ってみた、その１

admin

7年前

参照URL
https://qiita.com/icoxfog417/items/49f7301be502bc2ad897

触ってみた感想と特徴
1, HTMLタグ(入力欄のinputとか)にjsの変数を割り当てて(動的バインディング)、変数⇔表示HTMLが自動的に同期される(v-model)
2, 変数の値によって、CSS用のclassを動的に表示を変えられる(v-bind:class)
3, ユーザー入力は、v-on:keyup.enter=”addTodo”とかv-on:click=”begin(t)”みたいに、イベント毎にJS関数を呼び出す

laravelのbladeファイルの記述を、さらに発展させた印象(短い記述でかけるけど、その分だけ学習コストがかかる)

今回の記述だと、データは配列上にしかないけど、実際のアプリではAPI経由でDBをやり取りするみたい。

HTMLとCSSだけの静的なモックじゃなくて、UI的な部分はフロントエンジニアがここまでやってくれれば(MVCのV担当)
プログラマは、APIを作るだけでいいから楽だな(MVCのMC担当)

<!-- CDNでvue.jsを取得 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- HTML構造 -->
<div id="todoApp">
    <!-- タイトル文字列をCSSで修飾。v-bind:styleでvue.data.fontStyleという変数と同期させる -->      
    <h2 v-bind:style="fontStyle">{{ title }}</h2>

    <!--  入力欄は v-modelでvue.data.todoという変数と同期させる。v-onはイベントトリガー。keyup.enterでaddTodoメソッドを実行 -->          
    <input type="text" v-model="todo" v-on:keyup.enter="addTodo">
  
    <!--foreach的な感じで、vue.data.todosをループ。 
        文字列１行を表示する。
        v-bind:classは、まずデフォルトのclassを指定。三項演算子判定で、その行の処理済(クリック)フラグをチェック。turuならtodo-doingクラスに変更してCSS表示を変える。
        クリックされたらbegin(t)実行。処理済(クリック)フラグを反転(未処理⇔処理済)  -->
    <div v-for="t in todos" v-bind:key="t.id" 
         v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']"
         v-on:click="begin(t)">
         
      <!-- 入力欄から入力された１行文字列を、表示する -->         
      {{t.name}}
    </div>
</div>

<!-- CSS記述 -->
<style>
/* 入力された１行文字 */
.todo-default {
  padding: 5px; /* 上下の文字同士がくっつき過ぎないように隙間をいれる */
  border-bottom: 1px solid silver; /* 行の下に区切り線を入れる */
}

/* 文字列行をクリックされた状態 */
.todo-doing {
  background-color: #ff0000;
}
</style>


<!-- JS処理 -->
<script>
// Vueオブジェクトを生成しないと始まらない
var app = new Vue({
  // どの要素に対してか？
  el: '#todoApp',
  
  // 変数と初期値
  data: {
    title: "Welcome to Vue.js", //入力欄の上に表示する文字列
    // CSS定義
    fontStyle: {
        fontSize: "20px",
    },
    todo: "", // 入力欄用の変数
    todos: [] // 入力された文字列行の配列変数
  },
  
  // メソッドを定義
  methods: {    
    // 関数その１
    // 文字列を１行(配列に)追加
    addTodo: function() {
      this.todos.push({
        id: this.todos.length, // 行IDは、既存の行数＋１
        name: this.todo, // 入力された１行文字列
        doing: false // 処理済(クリック)フラグ。初期値はfalse
      })
      this.todo = "" // ログ配列に追加したので、入力欄をリセット
    },
    // 関数その２
    // 行をクリックされたらフラグ反転。結果として表示が変わる(css用のclassが変化する)
    begin: function(todo){
        todo.doing = !todo.doing;
    }
  }
})
</script>

<h2 v-bind:style="fontStyle">{{ title }}</h2>

<!--foreach的な感じで、vue.data.todosをループ。

文字列１行を表示する。

v-bind:classは、まずデフォルトのclassを指定。三項演算子判定で、その行の処理済(クリック)フラグをチェック。turuならtodo-doingクラスに変更してCSS表示を変える。

クリックされたらbegin(t)実行。処理済(クリック)フラグを反転(未処理⇔処理済) -->

<div v-for="t in todos" v-bind:key="t.id"

v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']"

v-on:click="begin(t)">

</div>

<style>

/* 入力された１行文字 */

.todo-default {

padding: 5px; /* 上下の文字同士がくっつき過ぎないように隙間をいれる */

border-bottom: 1px solid silver; /* 行の下に区切り線を入れる */

}

/* 文字列行をクリックされた状態 */

.todo-doing {

background-color: #ff0000;

}

</style>

// Vueオブジェクトを生成しないと始まらない

var app = new Vue({

// どの要素に対してか？

el: '#todoApp',

// 変数と初期値

data: {

title: "Welcome to Vue.js", //入力欄の上に表示する文字列

// CSS定義

fontStyle: {

fontSize: "20px",

todo: "", // 入力欄用の変数

todos: [] // 入力された文字列行の配列変数

// メソッドを定義

methods: {

// 関数その１

// 文字列を１行(配列に)追加

addTodo: function() {

this.todos.push({

id: this.todos.length, // 行IDは、既存の行数＋１

name: this.todo, // 入力された１行文字列

doing: false // 処理済(クリック)フラグ。初期値はfalse

})

this.todo = "" // ログ配列に追加したので、入力欄をリセット

// 関数その２

// 行をクリックされたらフラグ反転。結果として表示が変わる(css用のclassが変化する)

begin: function(todo){

todo.doing = !todo.doing;

}

})

</script>

関連記事