Vue.js

[findddout]

new Vue({ el: '#app', data: { message: 'HelloWorld!', number: 3, ok: true }, methods: { sayHi: function() { return 'Hi'; } } })

[findddout]

{{ message }}

[findddout]

new Vue({ el: '#app', data: { message: 'HelloWorld!', }, methods: { sayHi() { this.message = 'Hello VueJS' return 'Hi' } } })

[findddout]

new Vue({ el: '#app', data: { html: '

h1です。

', }, methods: { sayHi() { this.message = 'Hello VueJS' return 'Hi' } } })

[findddout]

html5

Google Twitter

[findddout]

JavaScript

new Vue({ el: '#app', data: { url: 'https://google.com', attribute: 'href', twitterObject: { href: 'https://twitter.com', id: 31} } })

[findddout]

html

現在{{ number }}回クリックされています。

カウントアップ

[findddout]

JavaScript

new Vue({ el: '#app', data: { number: 0 }, methods: { countUp: function() { this.number += 1 } } })

[findddout]

html:

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:click="countUp">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition">マウスを載せてください</p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>

[findddout]

javascript:

new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function() { this.number += 1 }, changeMousePosition: function (event) { this.x = event.clientX; this.y = event.clientY; } } })

[findddout]

html:

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition(3, $event)">マウスを載せてください</p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>

[findddout]

JavaScript:

new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function(times) { this.number += 1 * times }, changeMousePosition: function (divideNumber, event) { this.x = event.clientX / divideNumber; this.y = event.clientY / divideNumber; } } })

[findddout]

html:

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition(3, $event)">マウスを載せてください　<span v-on:mousemove="noEvent">反応しないでください</span></p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>

[findddout]

javascript: new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function(times) { this.number += 1 * times }, changeMousePosition: function (divideNumber, event) { this.x = event.clientX / divideNumber; this.y = event.clientY / divideNumber; }, noEvent: function(event) { event.stopPropagation() } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition(3, $event)">マウスを載せてください　<span v-on:mousemove.stop>反応しないでください</span></p>
  <a v-on:click="noEvent" href="https://google.com">Google</a>
  <p>X:{{x}}、Y:{{y}}</p>
</div>

[findddout]

new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function(times) { this.number += 1 * times }, changeMousePosition: function (divideNumber, event) { this.x = event.clientX / divideNumber; this.y = event.clientY / divideNumber; }, noEvent: function(event){ event.preventDefault(); } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:[event]="countUp">カウントアップ</button>
</div>

[findddout]

new Vue({ el: '#app', data: { number: 0, event: 'click' }, methods: { countUp: function() { this.number += 1; } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています。</p>
  <button v-on:[event]="countUp">カウントアップ</button>
</div>

[findddout]

new Vue({ el: '#app', data: { number: 0, event: 'click' }, methods: { countUp: function() { this.number += 1; } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

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

[findddout]

new Vue({ el: '#app', data: { message: 'こんにちは' }, })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>

[findddout]

new Vue({ el: '#app', data: { counter: 0 }, computed: { lessThanThree: function() { return this.counter > 3 ? '3より上' : '3以下' } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
  <p>{{ LessThanThree}}</p>
</div>

[findddout]

new Vue({ el: '#app', data: { counter: 0 }, computed: { lessThanThree: function() { return this.counter > 3 ? '3より上' : '3以下' } }, watch: { counter: function() { var vm = this; setTimeout(function(){ vm.counter = 0 }, 3000) } } })

[findddout]

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <h1 :class="classObject">Hello</h1> 
  <button @click="isActive = !isActive">切り替え</button>
</div>

[findddout]

new Vue({ el: '#app', data: { isActive: true }, computed: { classObject: function() { return { red: this.isActive, 'bg-blue': !this.isActive } } } })

[findddout]

css:
.red {
  color:red;
}
.bg-blue {
  background-color: blue; 
}

[findddout]

html:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <h1 :class="classObject">Hello</h1> 
  <button @click="isActive = !isActive">切り替え</button>

  <h1 :class="[{red: isActive}, bg]">Hello</h1>
</div>

[findddout]

css:
.red {
  color:red;
}
.bg-blue {
  background-color: blue; 
}

[findddout]

new Vue({ el: '#app', data: { isActive: true, color: 'red', bg: 'bg-blue' }, computed: { classObject: function() { return { red: this.isActive, 'bg-blue': !this.isActive } } } })

[findddout]

html:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <h1 :style="{color: textColor, 'background-color': bgColor}">Hello</h1>
</div>

[findddout]

new Vue({ el: '#app', data: { textColor: 'red', bgColor: 'blue' } })

[findddout]

html:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <h1 :style="styleObject">Hello</h1>
</div>

[findddout]

new Vue({ el: '#app', data: { styleObject: { color: 'red', 'background-color': 'blue' } } })

[findddout]

html:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">
  <h1 :style="[styleObject, baseStyle]">Hello</h1>
</div>

[findddout]

new Vue({ el: '#app', data: { styleObject: { color: 'red', 'background-color': 'blue' }, baseStyle: { fontSize: '60px' } } })