vue

last update: 2024/03/12

Search :

: 0 results

cli install

npm install -g @vue/cli
npm install -g @vue/cli-service-global

project

vue create [project name]
npm run serve
npm run build

* change path (vue.config.js)
module.exports = {
  publicPath: './'
}

mustache

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target">
  {{ foo }}
</div>

<script>
new Vue({ // const app = new Vue({ is same
  el: '#target',
  data: {
    foo: 'hello',
  },
});
</script>

code_popup

$mount

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target">{{ foo }}</div>

<script>
new Vue({
  data: {
    foo: 'hello',
  },
}).$mount('#target');
</script>

code_popup

template

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target"></div>

<script>
new Vue({
  el: '#target',
  template: '<p>{{ foo }}</p>',
  data: {
    foo: 'hello',
  },
});
</script>

code_popup

reactive

// onClick

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target">
  {{ foo }}
</div>

<button onclick="action();">click </button>

<script>
const data = {
  foo: 'hello',
};

new Vue({
  el: '#target',
  data: data,
});

const action = () => {
  data.foo = 'clicked';
};

// Reactive - Once bound to mustache, the variables set outside the vue object are also updated.

</script>

code_popup

---

// onInput

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target">
  {{ foo }}
</div>

<input type="text" onInput="action(event);">
<!-- ok) event, ng) ev -->

<script>
const data = {
  foo: `let's type`,
};

new Vue({
  el: '#target',
  data: data,
});

const action = (ev) => {
  data.foo = ev.target.value;
};
</script>

code_popup

render

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target">
  {{ foo }}
</div>

<button onclick="action();">click </button>

<script>
const data = {
  foo: 'hello',
};

new Vue({
  el: '#target',
  data: data,
  render: (element) => { // render(element) { is same
    return element('p', data.foo);
    // or
    // return element('p',
    // { 'style': 'font-size: 16px; color: #f00;' }, // option
    // data.foo);
  },
});

const action = () => {
  data.foo = 'clicked (Replaced div with p)';
};
</script>

code_popup

---

// Nested Virtual DOM

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target"></div>

<script>
const data = {
  text1: 'text1',
  text2: 'text2',
};

new Vue({
  el: '#target',
  data: data,
  render(element) {
    return element('ul',
      [
        element('li', this.text1),
        element('li', this.text2),
      ]
    );
  },
});
</script>

code_popup

---

// Options of Virtual DOM

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="target"></div>

<script>
const data = {
  text1: 'click1',
  text2: 'click2',
};

new Vue({
  el: '#target',
  data: data,
  render(element) {
    return element('ul',
      {
        class: 'cls',
        style: 'color: #f00;',
        on: {
          click(ev) {
            alert(ev.target.innerHTML);
          },
        },
      },
      [
        element('li', this.text1),
        element('li', this.text2),
      ]
    );
  },
});
</script>

code_popup

---

// value status

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
const foo = {
  a: 1,
};

const app = new Vue({
  data: foo,
});

console.log(app.a === foo.a); // true

app.a = 2;
console.log(foo.a); // 2

foo.a = 3;
console.log(app.a); // 3
</script>

code_popup

v-html

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p v-html="inner"></p>
</div>

<script>
const data = {
  inner: `<span style="color: #f00;">span</span>`,
};

new Vue({
  el: '#app',
  data: data,
});
</script>

code_popup

---

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ol v-html="list"></ol>
</div>

<input type="text" onInput="input(event)">

<button onClick="action()">add</button>

<script>
const data = {
  list: `<li>text</li>`,
};

new Vue({
  el: '#app',
  data: data,
});

const input = (ev) => {
  data.item = ev.target.value;
}

const action = () => {
  data.list += '<li>' + data.item + '</li>';
}
</script>

code_popup

v-bind

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" v-bind:style="bg">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    bg: 'background: #f00;',
  },
});

// v-bind:***="***"
// :***="***" // 省略表記
</script>

code_popup

---

// error exsample

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" style="{{ bg }}">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    bg: 'background: #f00;',
  },
});

// mustache cannot be set to a value
</script>

code_popup

---

// array binding

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<style>
.isRed { color: #f00; }
.isBlue { color: #00f; }
.isRed.isBlue { color: #f0f; }
</style>

<div id="app" v-bind:class="[ paintRed, paintBlue ]">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    paintRed: 'isRed',
    paintBlue: null,
  },
});
</script>

code_popup

---

// object binding 1

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<style>
.isRed { color: #f00; }
.isBlue { color: #00f; }
.isRed.isBlue { color: #f0f; }
</style>

<div id="app" v-bind:class="{ isRed: paintRed, isBlue: paintBlue }">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    paintRed: true,
    paintBlue: false,
  },
});
</script>

code_popup

---

// object binding 2

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" v-bind:style="styles">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    styles: {
      margin: '5px',
      padding: '5px',
      fontSize: '18px',
      fontWeight: 'bold',
      backgroundColor: '#f1f1f1',
    },
  },
});
</script>

code_popup

---

// disabled

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<button id="buy" v-bind:disabled="!canBuy">Buy</button>

<script>
new Vue({
  el: '#buy',
  data: {
    canBuy: false,
  },
});
</script>

code_popup

v-if

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" v-if="view">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    view: true, // false no rendering div
  },
});
</script>

code_popup

---

// else

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<p v-if="view">{{ foo }} if</p>
<p v-else>{{ foo }} else</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    view: true,
  },
});
</script>

code_popup

---

// else if

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<p v-if="view === 1">{{ foo }} if</p>
<p v-else-if="view === 2">{{ foo }} else if</p>
<p v-else>{{ foo }} else</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    view: 1,
  },
});
</script>

code_popup

---

// show

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" v-show="view">
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
    view: true, // false hide div
  },
});
</script>

// falseの場合、if は no rendering、show は hide

code_popup

---

// template tag

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <template v-if="flag">
        <li>1</li>
        <li>2</li>
    </template>
    <template v-else>
        <li>3</li>
        <li>4</li>
    </template>
  </ul>
</div>

<button onClick="action()">toggle</button>

<script>
const data = {
  flag: true,
};

new Vue({
  el: '#app',
  data: data,
});

const action = () => {
  data.flag = !data.flag;
}
</script>

// ulの外側や内側にタグを増やせない場合templateタグを使うことで対応できる
// templateタグはそのものは残らない

code_popup

v-for

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <span v-for="n in loop"> {{ n }} </span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    loop: 10,
  },
});
</script>

code_popup

---

// array

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="item in arr" v-bind:key="item.text"> <!-- watch this about "v-bind:key" -->
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    arr: [
      { text: 'foo' },
      { text: 'bar' },
      { text: 'baz' },
    ],
  },
});
</script>

code_popup

---

// array (index)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(item, index) in arr" v-bind:key="item.text">
      {{ item.text }} - {{ index }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    arr: [
      { text: 'foo' },
      { text: 'bar' },
      { text: 'baz' },
    ],
  },
});
</script>

code_popup

---

// object

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="value in obj" v-bind:key="value">
      {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    obj: {
      property1: 'value1',
      property2: 'value2',
      property3: 'value3',
    },
  },
});
</script>

code_popup

---

// object (key, index)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(value, key, index) in obj" v-bind:key="key">
      {{ value }} - {{ key }} - {{ index }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    obj: {
      property1: 'value1',
      property2: 'value2',
      property3: 'value3',
    },
  },
});
</script>

code_popup

---

// nested object

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(value, key, index) in obj" v-bind:key="key">
      {{ value.key }} - {{ key }} - {{ index }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    obj: {
      property1: { key: 'value1' },
      property2: { key: 'value2' },
      property3: { key: 'value3' },
    },
  },
});
</script>

code_popup

---

// string (char, index)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(char, index) in string" v-bind:key="char">
      {{ char }} - {{ index }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    string: 'hello',
  },
});
</script>

code_popup

---

// number (num, index)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(num, index) in number" v-bind:key="num">
      {{ num }} - {{ index }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    number: 10,
  },
});
</script>

code_popup

---

// method of change item

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="item in arr" v-bind:key="item.text">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    arr: [
      { text: 'foo' },
      { text: 'bar' },
      { text: 'baz' },
    ],
  },
});

app.arr.push({ text: 'qux' });
// push, pop, shift, unshift, splice, sort, reverse
</script>

code_popup

---

// extraction of item

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="item in arr" v-bind:key="item.text">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    arr: [
      { text: 'foo' },
      { text: 'bar' },
      { text: 'baz' },
    ],
  },
});

app.arr = app.arr.filter((item) => {
  return item.text.match(/ba/)
});
</script>

code_popup

---

// with v-if

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <ul>
    <li v-for="(item, index) in arr" v-if="index !== 1">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    arr: [
      { text: 'foo' },
      { text: 'bar' },
      { text: 'baz' },
    ],
  },
});
</script>

code_popup

v-on

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p>{{ foo }}</p>
  <button v-on:click="reverse">reverse</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello'
  },
  methods: {
    reverse() {
      this.foo = this.foo.split('').reverse().join('');
    },
  },
});

// v-click="***"
// @click="***" // 省略表記
</script>

code_popup

---

// preventDefault

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p>{{ foo }}</p>
  <a href="https://google.com" v-on:click.prevent="reverse">reverse</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
  },
  methods: {
    reverse() {
      this.foo = this.foo.split('').reverse().join('');
    },
  },
});

// other event modifiers
// .stop, .capture, .self, .native, .once, .passive,
</script>

code_popup

---

// keyup

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p>{{ foo }}</p>
  <input type="button" v-on:keyup.enter="reverse" value="onkeyup enter reverse">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
  },
  methods: {
    reverse() {
      this.foo = this.foo.split('').reverse().join('');
    },
  },
});

// other event modifiers
// .tab, .delete, .esc, .space, .up, .down, .left, .middle, .right
// .shift, .control, .alt, .meta, .exact
</script>

code_popup

v-model

// text

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'hello',
  },
});
</script>

code_popup

---

// checkbox

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="checkbox" v-model="foo">
  <p>{{ foo }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: false,
  },
});
</script>

code_popup

---

// checkbox array

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="checkbox" value="a" v-model="foo">
  <input type="checkbox" value="b" v-model="foo">
  <input type="checkbox" value="c" v-model="foo">
  <p>{{ foo }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: [],
  },
});
</script>

code_popup

---

// radio

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="radio" value="a" v-model="foo">
  <input type="radio" value="b" v-model="foo">
  <input type="radio" value="c" v-model="foo">
  <p>{{ foo }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: '',
  },
});
</script>

code_popup

---

// select

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <select v-model="foo">
    <option disabled value="">select</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
  <p>{{ foo }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: '',
  },
});
</script>

code_popup

v-once

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" v-once>
  {{ foo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: '1',
  },
});
app.foo = '2'; // can not overwrite
</script>

code_popup

computed

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<p>{{ foo }}</p>
<p>{{ bar }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'Hello',
  },
  computed: {
    // getter
    bar: function () {
      return this.foo.split('').reverse().join('');
    },
  },
});
</script>

code_popup

---

// cache

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<p>{{ foo }}</p>
</div>

<script>
new Vue({
  el: '#app',
  computed: {
    foo: function () {
      return Date.now();
    },
  },
});

console.log(app.foo); // *1

window.setTimeout(() => {
  console.log(app.foo); // same *1
}, 1000);
</script>

code_popup

---

// setter

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<p>{{ foo }}</p>
<p>{{ bar }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: 'Hello',
  },
  computed: {
    bar: {
      get() {
        return this.foo.split('').reverse().join('');
      },
      set(v) {
        return this.foo = v;
      },
    },
  },
});

console.log(app.bar); // getting
app.bar = 'setting'; // setting
console.log(app.bar); // getting

</script>

code_popup

[todo p212] watch




code_popup

filters

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ foo | undefinedFoo }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: '',
  },
  filters: {
    undefinedFoo: function (v) {
      if (!v) {
        return 'Undefined "foo"';
      }
      return v;
    },
  },
});
</script>

code_popup

component (global)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
// global setting
Vue.component('cpn', {
  template: '<p>hello</p>',
});

// root instance
new Vue({
  el: '#app',
});
</script>

code_popup

---

// usage data in component

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
// global setting
Vue.component('cpn', {
  template: '<p>{{ text }}</p>',
  // Use a function type to prevent objects from being shared between instances.
  data() {
    return {
      text: 'hello',
    };
  },
});

// root instance
new Vue({
  el: '#app',
});
</script>

code_popup

---

// with v-on

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
Vue.component('cpn', {
  template: '<p v-on:click="counter++">{{ counter }} click</p>',
  data() {
    return {
      counter: 0,
    };
  },
});

new Vue({
  el: '#app',
});
</script>

code_popup

---

// with v-on and methods

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
Vue.component('cpn', {
  template: '<p v-on:click="action">{{ counter }} click</p>',
  methods: {
    action() {
      this.counter++;
    },
  },
  data() {
    return {
      counter: 0,
    };
  },
});

new Vue({
  el: '#app',
});
</script>

code_popup

---

// with v-on and methods (char_counter)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
Vue.component('cpn', {
  template: '<div><input type="text" v-on:keyup="action"><p>{{ counter }}</p></div>',
  methods: {
    action() {
      this.counter = this.$vnode.elm.childNodes[0].value.length;
    },
  },
  data() {
    return {
      counter: 0,
    };
  },
});

new Vue({
  el: '#app',
});
</script>

code_popup

---

// with computed

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
Vue.component('cpn', {
  template: '<div><input type="number" v-model="num"><p>{{ action }}</p></div>',
  computed: {
    action() {
      let total = 0;
      for (let i = 1; i <=this.num; i++) {
        total += i;
      }
      return "total: " + total;
    },
  },
  data() {
    return {
      num: 0,
    };
  },
});

new Vue({
  el: '#app',
});
</script>

code_popup

props

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn foo="text1"></cpn>
  <cpn foo="text2"></cpn>
</div>

<script>
// global setting
Vue.component('cpn', {
  template: '<p>{{ foo }}</p>',
  props: ['foo'],
});

// root instance
new Vue({
  el: '#app',
});
</script>

code_popup

---

// with v-bind

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn v-for="text in data" v-bind:foo-bar="text"></cpn> <!-- kebab case -->
</div>

<script>
// child scope
Vue.component('cpn', {
  template: '<p>{{ fooBar }}</p>', // camel case
  props: ['fooBar'], // camel case
});

// parent scope
new Vue({
  el: '#app',
  data: {
    data: ['text1', 'text2', 'text3', 'text4', ],
  },
});

// Bind data in parent scope from within child scope
</script>

code_popup

---

// with v-model

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn v-bind:foo="foo"></cpn>
  <input type="text" v-model="foo">
</div>

<script>
Vue.component('cpn', {
  template: '<p>{{ foo }}</p>',
  props: ['foo'],
});

new Vue({
  el: '#app',
  data: {
    foo: 'test',
  },
});
</script>

code_popup

component (local)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
// root instance
new Vue({
  el: '#app',
  // local setting
  components: {
    'cpn': {
      template: '<p>hello</p>',
    },
  },
});
</script>

code_popup

---

// usage data in component

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script>
// root instance
new Vue({
  el: '#app',
  // local setting
  components: {
    'cpn': {
      template: '<p>{{ text }}</p>',
      // Use a function type to prevent objects from being shared between instances.
      data() {
        return {
          text: 'hello',
        };
      },
    },
  },
});
</script>

code_popup

---

// with v-on

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<script>
new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '<p v-on:click="counter++">{{ counter }} click</p>',
      data() {
        return {
          counter: 0,
        };
      },
    },
  },
});
</script>

code_popup

lifecycle hooks

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
new Vue({
  data: {
    foo: 'hello',
  },
  created() {
    console.log(this.foo); // hello
  },
});

// beforeCreate - (before create a instance)
// created - (created a instance)
// beforeMount - (before mount on DOM)
// mounted - (mounted on DOM)
// beforeUpdate - (updated a data and before update DOM)
// updated - (updated a data and DOM)
// beforeDestroy - (before delete the instance)
// destroyed - (deleted the instance)
</script>

code_popup

x-template

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn></cpn>
</div>

<script type="text/x-template" id="foo">
	<p>hello</p>
</script>

<script>
Vue.component('cpn', {
  template: '#foo',
});

new Vue({
  el: '#app',
});
</script>

code_popup

slot content

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <cpn>
    <p slot="text">title A</p>
    // When there is no p, display slot of template
    // Use when you want to have some patterns in cpn
  </cpn>
</div>

<script>
Vue.component('cpn', {
  template: '<slot name="text"><p>no title</p></slot>',
});

new Vue({
  el: '#app',
});
</script>

code_popup

vue-router

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

<div id="app">
  <router-link to="/a">Page A</router-link>
  <router-link to="/b">Page B</router-link>
  <router-view></router-view>
</div>

<script>
const router = new VueRouter({
  routes: [
    {
      path: '/a',
      component: {
        template: '<div>Page A</div>',
      },
    },
    {
      path: '/b',
      component: {
        template: '<div>Page B</div>',
      },
    },
  ],
});

new Vue({
  el: '#app',
  router,
});
</script>

code_popup

sample

---

// params

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

<div id="app">
  <router-link :to="{ name: 'user', params: { userId: 'foo' }}">Page A</router-link>
  <router-link to="/b">Page B</router-link>
  <router-view></router-view>
</div>

<script>
const router = new VueRouter({
  routes: [
    {
      path: '/a/:userId',
      name: 'user',
      component: {
        template: '<div>Page A ({{ $route.params.userId }})</div>',
      },
    },
    {
      path: '/b',
      component: {
        template: '<div>Page B</div>',
      },
    },
  ],
});

new Vue({
  el: '#app',
  router,
});
</script>

code_popup

sample

---

// params (router.push)

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

<div id="app">
  <router-link to="/a">Page A</router-link>
  <router-link to="/b">Page B</router-link>
  <router-view></router-view>
</div>

<script>
const router = new VueRouter({
  routes: [
    {
      path: '/a',
      name: 'user',
      component: {
        template: '<div>Page A ({{ $route.params.userId }})</div>',
      },
    },
    {
      path: '/b',
      component: {
        template: '<div>Page B</div>',
      },
    },
  ],
});

new Vue({
  el: '#app',
  router,
});

router.push({ name: 'user', params: { userId: 'foo' }});
//router.push({ path: 'register', query: { plan: 'private' } });
</script>

code_popup

sample

[todo modify] single file component

project/
│
├ html/
   └ index.html
├ webpack.config.js
├ package.json
└ js/
   ├ main.js
   └ components/
     ├ header.vue
     ├ content.vue
     └ footer.vue

---

// index.html

<!doctype html>
<title>title</title>
<script src="../js/main.js"></script>

<div id="app">
  <sample-header></sample-header>
  <sample-content></sample-content>
  <sample-footer></sample-footer>
</div>

code_popup

---

// main.js

import Vue from 'vue';
import SampleHeader from './component/header.vue';
import SampleContent from './component/content.vue';
import SampleFooter from './component/footer.vue';

Vue.config.productionTip = false;

new Vue({
  components: {
    SampleHeader,
    SampleContent,
    SampleFooter,
  },
}).$mount('#app');

code_popup

---

// header.vue

<template>
  <div class="title">
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'header',
    };
  }
};
</script>

<style lang="scss" scoped>
.title {
  height: 60px;
  background: #f1f1f1;
}
</style>

code_popup

---

// content.vue

<template>
  <div class="content">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'content',
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 600px;
  background: #fff;
}
</style>

code_popup

---

// footer.vue

<template>
  <div class="footer">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'footer',
    };
  }
};
</script>

<style lang="scss" scoped>
.footer {
  height: 60px;
  background: #f1f1f1;
}
</style>

code_popup

---

// webpack.config.js

const path = require('path');
const LicenseInfoWebpackPlugin = require('license-info-webpack-plugin').default;
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

  entry: {
    'project_name': './js/src/main.js',
  },

  output: {
    path: path.join(__dirname, 'dest'),
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                ],
              ],
            },
          },
        ],
      },
      {
        loader: 'eslint-loader',
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        options: {
        configFile: '.eslintrc.js',
        },
      },
      {
      test: /\.vue$/,
      loader: 'vue-loader'
      },
      {
      test: /\.scss$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
        },
        {
          loader: 'sass-loader',
        },
      ],
      },
    ],
  },

  devtool: !process.argv.includes('production') ? 'eval-source-map' : false,

  plugins: [
    new LicenseInfoWebpackPlugin({
      glob: '{LICENSE,license,License}*',
    }),
    new VueLoaderPlugin(),
  ],

  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },

};

---

// package.json

  "devDependencies": {
  "@babel/core": "^7.9.0",
  "@babel/preset-env": "^7.9.0",
  "babel-loader": "^8.1.0",
  "css-loader": "^3.5.1",
  "eslint": "^4.19.1",
  "eslint-loader": "^2.2.1",
  "json-minify": "^1.0.0",
  "license-info-webpack-plugin": "^1.0.0",
  "node-sass": "^4.13.1",
  "sass-loader": "^8.0.2",
  "spritesmith": "^3.4.0",
  "style-loader": "^1.1.3",
  "vue": "^2.6.11",
  "vue-loader": "^15.9.1",
  "vue-template-compiler": "^2.6.11",
  "webpack": "^4.42.0",
  "webpack-cli": "^3.3.11"
  }

[todo p235] slot




code_popup

[todo p244, p245(JSX)] render in component




code_popup

[todo p251] transition




code_popup

[todo] nuxt.js


npx create-nuxt-app [project name]
npm run dev

code_popup

///

<!doctype html>
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

</script>

code_popup