ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[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

ん！？　サーバー立ち上がった？

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

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')

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>

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>

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;

<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;