node.jsを使ってvue-cliを入れよう

まずnpmを使えるようにします。
[vagrant@localhost python]$ source ~/.nvm/nvm.sh
[vagrant@localhost python]$ nvm ls
-> v10.7.0
system
default -> 10.7.0 (-> v10.7.0)
node -> stable (-> v10.7.0) (default)
stable -> 10.7 (-> v10.7.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.3 (-> N/A)
lts/carbon -> v8.11.3 (-> N/A)
[vagrant@localhost python]$ nvm use 10.7.0
Now using node v10.7.0 (npm v6.1.0)
[vagrant@localhost python]$ node -v
v10.7.0
[vagrant@localhost python]$ npm -v
6.1.0

続いてvue-cliをインストール
[vagrant@localhost python]$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to “coffeescript” (no hyphen)
/home/vagrant/.nvm/versions/node/v10.7.0/bin/vue -> /home/vagrant/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue
/home/vagrant/.nvm/versions/node/v10.7.0/bin/vue-init -> /home/vagrant/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue-init
/home/vagrant/.nvm/versions/node/v10.7.0/bin/vue-list -> /home/vagrant/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 253 packages from 220 contributors in 90.959s

2.9.6ですね。
[vagrant@localhost python]$ vue –version
2.9.6

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>

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;

クロスバリデーション

from sklearn import svm, metrics
import random, re

lines = open('iris.csv', 'r', encoding='utf-8').read().split("\n")
f_tonum = lambda n : float(n) if re.match(r'^[0-9\.]+$', n) else n
f_cols = lambda li: list(map(f_tonum, li.strip().split(',')))
csv = list(map(f_cols, lines))
del csv[0]
random.shuffle(csv)

K = 5
csvk = [ [] for i in range(K) ]
for i in range(len(csv)):
	csvk[i % K].append(csv[i])

def split_data_label(rows):
	data = []; label = []
	for row in rows:
		data.append(row[0:4])
		label.append(row[4])
	return (data, label)

def calc_score(test, train):
	test_f, test_l = split_data_label(test)
	train_f, train_l = split_data_label(train)
	clf = svm.SVC()
	clf.fit(train_f, train_l)
	pre = clf.predict(test_f)
	return metrics.accuracy_score(test_l, pre)

score_list = []
for testc in csvk:
	trainc = []
	for i in csvk:
		if i != testc: trainc += i
	sc = calc_score(testc, trainc)
	score_list.append(sc)
print("各正解率=", score_list)
print("平均成果率=", sum(score_list) / len(score_list))

各正解率= [0.9666666666666667, 1.0, 1.0, 0.9333333333333333, 1.0]
平均成果率= 0.9800000000000001

import pandas as pd
from sklearn import cross_validation, svm, metrics
from sklearn.grid_search import GridSearchCV

train_csv = pd.read_csv("./mnist/train.csv")
test_csv = pd.read_csv("./mnist/t10k.csv")

train_label = train_csv.ix[:, 0]
train_data = train_csv.ix[:, 1:577]
test_label = test_csv.ix[:, 0]
test_data = test_csv.ix[:, 1:577]
print("学習データ数=", len(train_label))

params = [
	{"C": [1,10,100,1000], "kernel":["linear"]},
	{"C": [1,10,100,1000], "kernel":["rbf"], "gamma":[0.001, 0.0001]}
]

clf = GridSearchCV(svm.SVC(), params, n_jobs = -1)
clf.fit(train_data, train_label)
print("学習器=", clf.best_estimator_)

pre = clf.predict(test_data)
ac_score = metrics.accuracy_score(pre, test_label)
print("正解率=", ac_score)

RandomForestClassifier

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn import cross_validation, metrics

mr = pd.read_csv("mushroom.csv", header=None)

label = []
data = []
attr_list = []
for row_index, row in mr.iterrows():
	label.append(row.ix[0])
	row_data = []
	for v in row.ix[1:]:
		row_data.append(ord(v))
	data.append(row_data)

data_train, data_test, label_train, label_test = \
	cross_validation.train_test_split(data, label)

clf = RandomForestClassifier()
clf.fit(data_train, label_train)

predict = clf.predict(data_test)

ac_score = metrics.accuracy_score(label_test, predict)
cl_report = metrics.classification_report(label_test, predict)
print("正解率=", ac_score)
print("レポート=\n", cl_report)

[vagrant@localhost python]$ python3 app.py
正解率= 1.0
レポート=
precision recall f1-score support

e 1.00 1.00 1.00 1031
p 1.00 1.00 1.00 1000

avg / total 1.00 1.00 1.00 2031

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn import cross_validation, metrics

mr = pd.read_csv("mushroom.csv", header=None)

label = []
data = []
attr_list = []
for row_index, row in mr.iterrorws():
	label.append(row.ix[0])
	exdata = []
	for col, v in enumerate(row.ix[1:]):
		if row_index == 0:
			attr = {"dic": {}, "cnt":0}
			attr_list.append(attr)
		else:
			attr = attr_list[col]
		d = [0,0,0,0,0,0,0,0,0,0,0,0]
		if v in attr["dic"]:
			idx = attr["dic"][v]
		else:
			idx = attr["cnt"]
			attr["dic"][v] = idx
			attr["cnt"] += 1
			d[idx] = 1
			exdata += d
		data.append(exdata)

data_train, data_test, label_train, label_test = \
	cross_validation.train_test_split(data, label)

clf = RandomForestClassifier()
clf.fit(data_train, label_train)
predict = clf.predict(data_test)
ac_score = metrics.accuracy_score(label_test, predict)
print("正解率=", ac_score)

mushroom

import urllib.request as req
local = "mushroom.csv"
url = "https://archive.ics.uci.edu/ml/machine-learning-databases/mushroom/agaricus-lepiota.data"
req.urlretrieve(url, local)
print("ok")

bmi

import random

def calc_bmi(h, w):
bmi = w / (h / 100) ** 2
if bmi < 18.5: return "thin" if bmi < 25: return "normal" return "fat" fp = open("bmi.csv", "w", encoding="utf-8") fp.write("height, weight, label\r\n") cnt = {"thin":0, "normal":0, "fat":0} for i in range(20000): h = random.randint(120, 200) w = random.randint(35, 80) label = calc_bmi(h, w) cnt[label] += 1 fp.write("{0},{1},{2}\r\n".format(h, w, label)) fp.close() print("ok", cnt) [/python] [python] from sklearn import cross_validation, svm, metrics import matplotlib.pyplot as plt import pandas as pd tbl = pd.read_csv("bmi.csv") label = tbl["label"] w = tbl["weight"] / 100 h = tbl["height"] / 200 wh = pd.concat([w, h], axis=1) data_train, data_test, label_train, label_test = \ cross_validation.train_test_split(wh, label) clf = svm.SVC() clf.fit(data_train, label_train) predict = clf.predict(data_test) ac_score = metrics.accuracy_score(label_test, predict) cl_report = metrics.classification_report(label_test, predict) print("正解率=", ac_score) print("レポート=\n", cl_report) [/python] [python] import matplotlib.pyplot as plt import pandas as pd tbl = pd.read_csv("bmi.csv", index_col=2) fig = plt.figure() ax = fig.add_subplot(1, 1, 1) def scatter(lbl, color): b = tbl.loc[lbl] ax.scatter(b["weight"],b["height"], c=color, label=lbl) scatter("fat", "red") scatter("normal", "yellow") scatter("thin", "purple") ax.legend() plt.savefig("bmi-test.png") [/python]