Category: Vue.js

ElementUI 1

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
import locale from 'element-ui/lib/locale/lang/ja'
 
Vue.config.productionTip = false
Vue.use(ElementUI, {locale})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div id="app">
    <div class="block">
      <span class="demonstaration">スライダー</span>
      <el-slider v-model="value1"></el-slider>
    </div>
 
    <div>{{ value1}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data(){
    return {
      value1: 50,
    }
  },
}
</script>


jQueryでもあるんだろうけど、書き方としてはこういうことね。

Vue.js 5

vue-cliの中身を見ていきましょう

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

あああああああ、react+webpackと同じような仕組みですね。

ん？　これはviewの部分か？
App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

コンポーネントのルーティング
src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

src/components/Hello.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

気を取り直してkeep going

Vue.js 4

ElementUIとは
=>Vue.jsのコンポーネントライブラリ
Vue CLIを使う？
=>インタラクティブなプロジェクトの作成

$ sudo npm install -g vue-cli
$ vue –version
2.9.6

vue init template project-name　でプロジェクトを作成する

$ vue init webpack test

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

vue-cli · Generated “test”.

$ npm run dev
Your application is running here: http://localhost:8080

なに？表示されない？
/config/index.jsのhostを編集

1
2
3
4
5
6
host: '192.168.34.10', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

ほう

Vue.js 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(){
    'use strict';
 
    var likeComponent = Vue.extend({
        template : '<button>like</button>'
    });
 
    var app = new Vue({
        el: '#app',
        components: {
            'like-component': likeComponent
        }
    });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(function(){
    'use strict';
 
    var likeComponent = Vue.extend({
        data: function(){
            return {
                count: 0
            }
        },
        template : '<button @click="countUp">like {{ count }}</button>',
        methods: {
            countUp: function(){
                this.count++;
            }
        }
    });
 
    var app = new Vue({
        el: '#app',
        components: {
            'like-component': likeComponent
        }
    });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
(function(){
    'use strict';
 
    var likeComponent = Vue.extend({
        props: {
            message: {
                type: String,
                default: 'Like'
            }
        },
        data: function(){
            return {
                count: 0
            }
        },
        template : '<button @click="countUp">{{ message }} {{ count }}</button>',
        methods: {
            countUp: function(){
                this.count++;
            }
        }
    });
 
    var app = new Vue({
        el: '#app',
        components: {
            'like-component': likeComponent
        }
    });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function(){
    'use strict';
 
    var likeComponent = Vue.extend({
        props: {
            message: {
                type: String,
                default: 'Like'
            }
        },
        data: function(){
            return {
                count: 0
            }
        },
        template : '<button @click="countUp">{{ message }} {{ count }}</button>',
        methods: {
            countUp: function(){
                this.count++;
                this.$emit('increment');
            }
        }
    });
 
    var app = new Vue({
        el: '#app',
        components: {
            'like-component': likeComponent
        },
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function(){
                this.total++;
            }
        }
    });
})();

Vue.js 2

1
2
<p>Hello {{ name.toUpperCase() }}</p>
        <p><input type="text" v-model="name"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(){
    'use strict';
 
    var vm = new Vue({
        el: '#app',
        data: {
            newItem: '',
            todos:[
                'task1',
                'task2',
                'task3'
            ]
 
        },
        methods: {
            addItem: function(){
                // e.preventDefault();
                this.todos.push(this.newItem);
                this.newItem = '';
            }
        }
    });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app" class="container">
        <h1>My Todos</h1>
        <ul>
            <li v-for="(todo, index) in todos">
            {{ todo }}
            <span @click="deleteItem(index)" class="command">[x]</span>
        </li>
        </ul>
        <form @submit.prevent="addItem">
            <input type="text" v-model="newItem">
            <input type="submit" value="Add">
        </form>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function(){
    'use strict';
 
    var vm = new Vue({
        el: '#app',
        data: {
            newItem: '',
            todos:[{
                title: 'task1',
                isDone: false
            },{
                title: 'task2',
                isDone: false
            },{
                title: 'task3',
                isDone: true
            }]
 
        },
        methods: {
            addItem: function(){
                var item = {
                    title: this.newItem,
                    isDone: false
                };
                this.todos.push(item);
                this.newItem = '';
            },
            deleteItem: function(index){
                // e.preventDefault();
                if(confirm('are you shure')){
                    this.todos.splice(index, 1);
                }
                 
            }
        }
 
    });
})();
1
2
3
4
5
6
7
8
computed: {
            remaining: function(){
                var items = this.todos.filter(function(todo){
                    return !todo.isDone;
                });
                return items.length;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
(function(){
    'use strict';
 
    var vm = new Vue({
        el: '#app',
        data: {
            newItem: '',
            todos:[]
        },
        watch: {
            todos: {
                handler: function(){
                    localStorage.setItem('todos', JSON.stringify(this.todos));
                },
                deep: true
            }
        },
        mounted: function(){
            this.todos = JSON.parse(localStorage.getItem('todos')) || [];
        },
        methods: {
            addItem: function(){
                var item = {
                    title: this.newItem,
                    isDone: false
                };
                this.todos.push(item);
                this.newItem = '';
            },
            deleteItem: function(index){
                // e.preventDefault();
                if(confirm('are you shure')){
                    this.todos.splice(index, 1);
                }
                 
            },
            purge: function(){
                if(!confirm('delete finished')){
                    return;
                }
                this.todos = this.remaining;
                 
            }
        },
        computed: {
            remaining: function(){
                return this.todos.filter(function(todo){
                    return !todo.isDone;
                });
            }
        }
 
    });
})();

Vue.js 1

Vue.jsとは？
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク
双方向データバインディング
web:https://jp.vuejs.org/v2/guide/index.html
-> 「はじめに」のdemoを見ると、フレームワークとしてはAnglarJSに凄く似ているように見える

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link ref="stylesheet" src="css/styles.css">
</head>
<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>
</html>
1
2
3
4
5
6
7
8
9
10
(function(){
    'use strict';
 
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'yoshi'
        }
    });
})();

anglarの場合は、inputをそのままdomに書いていたけど、vueはjs側で記述する必要がありそうですね。

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

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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がある。

1
2
3
4
5
6
7
8
9
10
11
12
<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>
1
2
3
4
5
6
7
8
9
10
(function(){
    'use strict';
 
    var vm = new Vue({
            el: '#app',
            data: {
                message: ""
            }
    });
})();

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

天才！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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を読み込みます。

1
2
3
4
5
6
7
8
9
<!-- 共通フッター -->
    <footer>
        hpscript
    </footer>
    <!-- / 共通フッター -->
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/main.js"></script>
  </body>

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

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

main.js

1
2
3
4
5
6
7
8
9
10
(function(){
    'use strict';
 
    var vm = new Vue({
            el: '#app',
            data: {
                name: 'yoshi'
            }
    });
})();

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

deleteItem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(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);
                }
            }
        }
    });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>