チェックボックスにvue.jsを使いたい

html

<tr>
          <th>地域</th><td>
            <input type="checkbox" name="pref" size="40"  value=""><b>北海道</b><br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>東北</b><br>
            <input type="checkbox" name="pref" size="40"  value="">青森
            <input type="checkbox" name="pref" size="40"  value="">岩手
            <input type="checkbox" name="pref" size="40"  value="">宮城
            <input type="checkbox" name="pref" size="40"  value="">秋田
            <input type="checkbox" name="pref" size="40"  value="">山形
            <input type="checkbox" name="pref" size="40"  value="">福島<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>関東</b><br>
            <input type="checkbox" name="pref" size="40"  value="">茨城
            <input type="checkbox" name="pref" size="40"  value="">栃木
            <input type="checkbox" name="pref" size="40"  value="">群馬
            <input type="checkbox" name="pref" size="40"  value="">埼玉
            <input type="checkbox" name="pref" size="40"  value="">千葉
            <input type="checkbox" name="pref" size="40"  value="">東京
            <input type="checkbox" name="pref" size="40"  value="">神奈川<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中部</b><br>
            <input type="checkbox" name="pref" size="40"  value="">新潟
            <input type="checkbox" name="pref" size="40"  value="">富山
            <input type="checkbox" name="pref" size="40"  value="">石川
            <input type="checkbox" name="pref" size="40"  value="">福井
            <input type="checkbox" name="pref" size="40"  value="">山梨
            <input type="checkbox" name="pref" size="40"  value="">長野
            <input type="checkbox" name="pref" size="40"  value="">岐阜
            <input type="checkbox" name="pref" size="40"  value="">静岡
            <input type="checkbox" name="pref" size="40"  value="">愛知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>近畿</b><br>
            <input type="checkbox" name="pref" size="40"  value="">三重
            <input type="checkbox" name="pref" size="40"  value="">滋賀
            <input type="checkbox" name="pref" size="40"  value="">京都
            <input type="checkbox" name="pref" size="40"  value="">大阪
            <input type="checkbox" name="pref" size="40"  value="">兵庫
            <input type="checkbox" name="pref" size="40"  value="">奈良
            <input type="checkbox" name="pref" size="40"  value="">和歌山<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">鳥取
            <input type="checkbox" name="pref" size="40"  value="">島根
            <input type="checkbox" name="pref" size="40"  value="">岡山
            <input type="checkbox" name="pref" size="40"  value="">広島
            <input type="checkbox" name="pref" size="40"  value="">山口<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>四国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">徳島
            <input type="checkbox" name="pref" size="40"  value="">香川
            <input type="checkbox" name="pref" size="40"  value="">愛媛
            <input type="checkbox" name="pref" size="40"  value="">高知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>九州・沖縄地方</b><br>
            <input type="checkbox" name="pref" size="40"  value="">福岡
            <input type="checkbox" name="pref" size="40"  value="">佐賀
            <input type="checkbox" name="pref" size="40"  value="">長崎
            <input type="checkbox" name="pref" size="40"  value="">熊本
            <input type="checkbox" name="pref" size="40"  value="">大分
            <input type="checkbox" name="pref" size="40"  value="">宮崎
            <input type="checkbox" name="pref" size="40"  value="">鹿児島
            <input type="checkbox" name="pref" size="40"  value="">沖縄
          </td>
        </tr>

東北をチェックすると、東北地方のチェックボックスをcheckedにしたい。vue.jsでできる?

tableのtrにv-ifを使って条件分岐

まず、質問1がある。

<div id="app">
    <table>
		<tr>
          <th>質問1</th><td><input type="text" size="40" value="" v-model="message"></td>
    	</tr>
    	<tr v-if="message">
          <th>質問2</th><td><input type="text" size="40" value=""></td>
    	</tr>
	</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="asset/js/main.js"></script>
(function(){
	'use strict';

	var vm = new Vue({
			el: '#app',
			data: {
				message: ""
			}
	});
})();

質問1に値を入力すると、質問2が表示される。

天才!

同様に、権限を入力すると、担当者名が表示される。

<div id="content">
      <h2>アカウント登録</h2>
      <hr>
      <form action="" method="post" id="form1">
      <table id="tbl">        
        <tr>
          <th>ログインID</th><td><input type="text" name="login" size="40"  value=""></td>
        </tr>
        <tr>
          <th>権限</th><td><input type="text" name="password" size="40" value="" v-model="message"></td>
        </tr>
        <tr v-if="message">
          <th>担当者名</th><td><div id="app"><input type="text" name="password" size="40" value="" ></div></td>
        </tr>
      </table> 

おおおおおおおおおおおおおおお
おもろいやんけ!

OKOK! 

vue.jsでやりたいこと

vue.jsでやりたいこと
– 新規登録画面で入力fromに値が入力されたら、別のフォームを表示する

main.jsをつくる

bodyの閉じタグの前で、vue.jsのcdnとmain.jsを読み込みます。

<!-- 共通フッター -->
  	<footer>
  		hpscript
  	</footer>
    <!-- / 共通フッター -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/main.js"></script>
  </body>

vue.jsを書いていきます。

<div id="app">
        <p>Hello {{ name}} </p>
        <p><input type="text" v-model="name"></p>
      </div>

main.js

(function(){
	'use strict';

	var vm = new Vue({
			el: '#app',
			data: {
				name: 'yoshi'
			}
	});
})();

とりあえずvue.jsが動くところまではきました。

deleteItem

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			},
			deleteItem: function(index){
				if (confirm('are you sure?')){
					this.todos.splice(index, 1);
				}
			}
		}
	});
})();
<body>
	<div id="app" class="container">
		<h1>My Todo</h1>
		<ul>
			<li v-for="(todo, index) in todos">
			{{ todo }}
			<span @click="deleteItem(index)">[x]</span>
			</li>
		</ul>
	
	<form @submit="addItem">
		<input type="text" v-model="newItem">
		<input type="submit" value="Add">
	</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>

更にvue.js

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		}
	});
})();

for文

<div id="app">
		<ul>
			<li v-for="todo in todos">{{ todo }}</li>
		</ul>
	</div>
(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			}
		}
	});
})();

vue.js

特徴は双方向データバインディング
データ、UI何れか更新されると、もう一方も更新される

<body>
	<div id="app">
		<p>Hello {{ name }}!</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>
(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'yoshida'
		}
	});
})();

uiからdataへ

<div id="app">
		<p>Hello {{ name }}!</p>
		<p><input type="text" v-model="name"></p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>

なんじゃこりゃー

<p>Hello {{ name.toUpperCase() }}!</p>

コマンドラインからvue init

[vagrant@localhost vue]$ vue init webpack hpscript

? Project name hpscript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) no

vue-cli · Generated “hpscript”.

# Project initialization finished!
# ========================

To get started:

cd hpscript
npm install (or if using yarn: yarn)
npm run lint — –fix (or for yarn: yarn run lint –fix)
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

中を見てみます。
ほう、jsファイルですね。

to get startedで、
cd hpscript
npm install (or if using yarn: yarn)
npm run lint — –fix (or for yarn: yarn run lint –fix)
npm run dev

ん!? サーバー立ち上がった?

はあ!? 表示されないんだが。
どういうことだ。

vue.jsでrouting

var router = new VueRouter({
	routes: [
		{
			path: '/top',
			component: {
				template: '<div>トップページです。</div>'
			}
		},
		{
			path: '/users',
			component: {
				template: '<div>ユーザー一覧ページです。</div>'
			}
		}
	]
})

var app = new Vue({
	router: router
}).$mount('#app')

vue.jsでログインフォーム

var auth = {
	login: function(id, pass){
  	window.alert("login id:" + "\n" + "password:" + pass);
  }
}

var loginTemplate = `
	<div>
  	<input type="text" placeholder="ログインID" v-model="userid">
    <input type="password" placeholder="パスワード" v-model="password">
   </div>
`

Vue.component('user-login', {
	template: loginTemplate,
  data: function(){
  	return {
    	userid: '',
      password: ''
    }
  },
  methods: {
  	login: function(){
    	auth.login(this.userid, this.password);
    }
  }
});
<div id="login-template">
  <input type="text" placeholder="ログインID" v-model="userid">
  <input type="password" placeholder="パスワード" v-model="password">
  <button v-on:click="login">ログイン</button>
</div>

var headerTemplate = `
		<div style="background:white;">
    <slot name="header"></slot>
    </div>
`

Vue.component('page-header', {
	template: headerTemplate
});
<div>
  <page-header>
  <h1 slot="header">冬の果物</h1>
  </page-header>
  <ul>
  <li>りんご</li>
  <li>イチゴ</li>
  </ul>
</div>

vue.jsの親コンポーネントと子コンポーネント

var fruitsListChild = Vue.extend({
	template: '<h1>フルーツ一覧</h1>'
})

var fruitsListParent = Vue.extend({
	template: '<div>親コンポーネント<fruits-list-child></fruits-list-child></div>',
  components: {
  	'fruits-list-child': fruitsListChild
  }
})

new Vue({
	el: "#fruits-list",
  components: {
  	'fruits-list-parent': fruitsListParent
  }
})
<div id="fruits-list">
 <fruits-list-parent></fruits-list-parent>
</div>

var counterButton = Vue.component({
	template: '<span>{{counter}}個<button v-on:click="addToCart">追加</button></span>',
  data: function(){
  	return {
    	counter: 0
    }
  },
  method: {
  	addToCart: function(){
    	this.counter += 1
      this.$emit('increment')
    }
  },
});

new Vue({
	el: '#fruits-counter',
  components:{
  	'counter-button':counterButton
	},
  data: {
  	total: 0,
    fruits: [
    	{name: '梨'},
      {name: 'イチゴ'}
    ]
  },
  method: {
  	increment: function(){
    	this.total += 1
    }
  }
})
<div id="fruits-counter">
  <div v-for="fruit in fruits">
  {{fruit.name}}: <counter-button v-on:increment="increment()"></counter-button>
  </div>
  <p>合計: {{total}}</p>
</div>