Category: Vue.js

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>

vue.js リストレンダリング

var vm = new Vue({
	el: '#example', // document.getElementById('example'), $('#example')[0]
	data: {
  	items: [
    	{
				name: 'みかん',
        price: 100
      },
      {
      	name:'もも',
        price: 300
      },
      {
      	name:'いちじく',
        price: 500
      },
      {
      	name: 'メロン',
        price: 1000
      }
    ]
  }
})

window.vm = vm;

<div id="example">
  <li v-for="item in items">
  {{item.name}}は{{item.price}}円
  </li>
</div>

みかんは100円
ももは300円
いちじくは500円
メロンは1000円

validation

var vm = new Vue({
	el: '#example', // document.getElementById('example'), $('#example')[0]
	data: {
		name: '',  
  },
  computed: {
  	isValid: function (){
    	return this.name.length > 0;
    }
  }
});

window.vm = vm;

vue.js

<div id="example">
<p>{{name}}は{{price}}円</p>
</div>

var vm = new Vue({
	el: '#example', // document.getElementById('example'), $('#example')[0]
  data: {
  	name: 'みかん',
    price: 100
  }
})

window.vm = vm;

こうも書ける

var vm = new Vue({
	el: '#example', // document.getElementById('example'), $('#example')[0]
  data: {
  	name: 'みかん',
    price: 100
  },
  computed: {
  	priceWithTax: function(){
    	return this.price * 1.08;
    } 
  }
})

window.vm = vm;

Todo list by vue.js

v-on, v-attr, v-classで機能追加しています。データの追加はpush,削除はspliceです。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My ToDos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
		body {
			font-size: 13px;
			font-family: Arial;
		}
		h1 {
			font-size: 14px;
			border-bottom:1px solid #ddd;
			padding: 0 0 5px;
		}
		ul {
			list-style-type: none;
			padding: 0;
			margin: 0 0 5px;
		}
		ul > li {
			padding: 0 0 5px;
		}
		input[type=text]{
			padding: 4px;
			border-radius: 4px;
		}
		.done {
			text-decoration: line-through;
			color: #aaa;
		}
		.linkLike {
			color: blue;
			cursor: pointer;
			font-weight: normal;
		}
	</style>
</head>
<body>
	<div id="myapp">
		<h1>
			My ToDos
			<small>({{remaining}}/{{todos.length}})</small>
			<span class="linkLike" v-on="click:purge">[purge]</span>
		</h1>
		<ul>
			<li v-repeat="todos">
				<input type="checkbox" v-attr="checked: done" v-on="click: done = !done">
				<span v-class="done: done">{{task}}</span>
				<span class="linkLike" v-on="click:del($index)">[x]</span>
			</li>
		</ul>
		<input type="text" v-model="newTask" placeholder="new task..." v-on="keyup:add | key enter">
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	var vm = new Vue({
            el: '#myapp',
            data: {
            	newTask: '',
            	todos : [
            	 {task: 'task 1', done: false},
            	 {task: 'task 2', done: true},
            	 {task: 'task 3', done: false}
            	]
            },
            computed: {
            	remaining: function(){
            		var count = 0;
            		for (var i = 0, j = this.todos.length; i < j; i++){
            			if(!this.todos&#91;i&#93;.done){
            				count++;
            			}	
            		}
            		return count;
            	}
            },
            methods: {
            	add: function(){
            		this.todos.push({
            			task: this.newTask,
            			done: false
            		});
            		newTask = ''
            	},
            	del: function(index){
            		if (confirm("are you sure?")){
            			this.todos.splice(index, 1);
            		}
            	},
            	purge: function(){
            		var i = this.todos.length;
            		while (i--){
            			if(this.todos&#91;i&#93;.done){
            				this.todos.splice(i, 1);
            			}
            		}
            	}
            }
        });
	</script>
</body>
</html>

Vue.js

-インタラクティブなインターフェイス
-JavaScriptフレームワーク
-軽量、他のライブラリに依存しない
-ブラウザIE8以下は対応しない
object data/method interface MVVM

CDN :https://cdnjs.com/libraries/vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.common.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
	</style>
</head>
<body>
	<div id="mycounter">
		<div v-text="count"></div>
		<button v-on="click: countUp">Up</button>
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	// object data/method interface MVVM
	// counter

	var vm = new Vue({
		el: '#mycounter',
		data: {
			count: 0
		},
		methods: {
			countUp: function(){
				this.count++;
			}
		}
	});
	</script>
</body>
</html>

mustatch, v-html

<div>{{'content: ' + content}}</div>
<div v-html="content"></div>

表示非表示

var vm = new Vue({
		el: '#myapp',
		data: {
			content: 'helloworld',
　　　　　　　　　　　　　　myStyle: 'red'
			showContent: true
		}
	});

v-repeat

<div id="myapp">
		<ul>
			<li v-repeat="d1">{{$value}}</li>
		</ul>
		<ul>
			<li v-repeat="d2">{{$key}} - {{$value}}</li>
		</ul>
		<ul>
			<li v-repeat="d3">{{name}} - {{score}}</li>
		</ul>
	</div>

		<p>
			<input type="text" v-model="name">
			{{name}}
		</p>

フィルター

		<div v-text="msg | uppercase"></div>
		<div v-text="msg | capitalize"></div>
		<div>{{$data | json}}</div>
        <div id="myapp">
		<li v-repeat="users | filterBy 't' in 'name'">
                <li v-repeat="users | filterBy | orderBy 'name' -1">
		{{name}} - {{score}}
	</div>

computed property

	<div id="myapp">
		side: <input type="text" v-model="side">
		area: {{area}}
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	var vm = new Vue({
            el: '#myapp',
            data: {
            	side: 20
            },
            computed: {
            	area: function(){
            		return this.side * this.side;
            	}
            }
        });
	</script>