タイトル通りです。vue.jsを学んでいきます。
<script src="vue.js"></script> //読み込み
<div id="app">
<p>{{message}}</p> //message:を取ってくる
<p v-text="message"></p> //message:を取ってくる
<p>{{number + 3}}</p> //{{ }}内はJsの記法が使える
<p>{{ok? 'YES':'NO'}}</p> //仮定も使える
<p>{{sayHi()}}</p> //関数も使える
<button v-on:click="reverseMessage">メッセージを反転</button> // v-on:イベント ＝”関数”
<script>
new Vue({
el:'#app', //どこに適用するか
data: {
message:'HelloWorld!',
number: 3,
ok:true,
},
methods: {
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
},
sayHi:function(){
return this.message; //同じ中だと、this.〇〇でその値を持ってこれる。
}
}
})
</script>
</div>一度だけ描画(v-once)
<p v-once>{{message}}</p>htmlを挿入可能に（XSSに気をつける v-html）
<div v-html="html"></div>
===========js===========
html:'<h1>ははは</h1>'a hrefに値を入れる(v-bind:href)
<a v-bind:href="url">Google</a>
<a :href="url">a</a>v-bind応用 v-bind={}で複数設置可能
<a :[attribute]="url"></a>
<a v-bind="{href:urlTwitter, id:number}">{{message }}</a>
<a v-bind="twitterObject">url</a>
===============js==============
attribute:'href',
urlTwitter:'https://twitter.com',
number:31
twitterObject:{
href:'https://twitter.com',
id:31
}v-on:の使い方①
<div id="app">
<p>現在{{ number }}回クリックされています。
</p>
<button v-on:click="countUp(2)"> カウントアップ</button>
<p v-on:mousemove ="mousePosition(3,event)">マウスを乗せてください</p>
<p>X:{{x}},Y{{y}}</p>
</div>data: {
number : 0,
x:0,
y:0
},
methods: {
countUp:function(times){
this.number += +1 * times
},
mousePosition:function(divideNumber,$event){ //引数なしeventのみでも、イベントオブジェクトを持ってこれる。
this.x = event.clientX / divideNumber;
this.y = event.clientY / divideNumber;
}
}v-on:の使い方②バブリングにおけるprevent / stop
<button v-on:click="countUp(2)"> カウントアップ</button>
<p v-on:mousemove ="mousePosition(3,event)">マウスを乗せてください
<span v-on:mousemove="noEvent">反応しないでください</span> // 関数でstop
<span v-on:mousemove.stop>反応しないでください</span></p> // 修飾でstop（上と同じ挙動）
<a v-on:click="noClickevent" href="https://google.com">GOOGLE</a> // 関数でprevent
<a v-on:click.prevent.stop="noClickevent" href="https://google.com">GOOGLE</a> // 修飾でprevent（上と同じ挙動）
<p>X:{{x}},Y{{y}}</p>noEvent:function(event){
event.stopPropagation()
},
noClickevent:function(event){
event.preventDefault();
}キーボード修飾
<input type="text" v-on:keyup.enter.space="myAlert"> // キーボードのenterとspaceを押した時発火イベントに変数を入れる
<button v-on:[event]="countUp(1)">カウントアップ</button> //全部同じ挙動
<button @[event]="countUp(1)">カウントアップ</button> //全部同じ挙動
<button @click="countUp(1)" >カウントアップ</button> //全部同じ挙動
data: {
number : 0,
x:0,
y:0,
event:'click'
},v-model 双方向のバインディング
<input type="text" v-model="message">
<h1>{{message}}</h1>data: {
message: 'こんにちは'
},computedプロパティ(computed:)
vue.jsのdataはあくまで初期値を設定するもの。
よって、動的に変わる物に関しては、dataプロパティは使えない。
<p>{{ counter }}</p>
<button @click="counter += 1">+1</button>
<p>{{ lessThanThree}}</p>computed:{
lessThanThree:function(){
return this.counter>3 ? '3より上' : '3以下'
}
},一応Methodでも同じことはできるが
Methodだとイベント関係なしに <p>{{lessThanThree()}}とした場合、常に発火してしまう。よって、依存関係がある関数内にある数字が変わった時にのみ発火するcomputedを使用した方が良い。動的なプロパティの時はcomputed
lessThanThreeMethod:function(){
console.log('Method')
return this.counter>3 ? '3より上' : '3以下'
}watch
その値が変わった時に発火（今回はcounter） 基本はcomputed使おう。
watch: {
counter:function(){
var vm = this;
setTimeout(function(){
vm.counter = 0
},3000)
}
}functionの()はどこでつけるのか問題
<button @click="countUp">+1</button> //イベント時はつけてもつけなくてもOK
<button @click="countUp()">+1</button> //イベント時はつけてもつけなくてもOK
<p>{{ doubleCounterComputed}}</p> computedの時は（）無し！
<p>{{ doubleCounterMethod()}}</p> Methodの時は（）有り！クラス名関連
クラス名を動的につける
.red{
color: red;
}
.bg-blue{
background-color: blue;}
<h1 v-bind:class="{red:isActive,'bg-blue':!isActive}">ハロー</h1> // dataの切り替えのみで変更 ハイフンが入っているものは''をつける
<button @click="isActive = !isActive">切替</button>
<h1 :class=”classObject”>hello</h1> //computedで変更
data: {
isActive :true
},
computed:{
classObject:function(){
return{
red: this.isActive,
'bg-blue': !this.isActive} インスタンスの中の時はthisつける
}
}
<h1 :class="[{red:isActive},bg]">hello</h1>color:'red',
bg:'bg-blue'スタイルの適用
<h2 :style="{color:textColor,'background-color':bgColor}">aaaaa</h2>
<h2 :style="styleObject">aaaaaaa</h2>data:{
styleObject:{
color:'red',
'background-color':'blue'
},
}スタイルの複数適用
<h1 :style="[styleObject,baseStyles]">はははは</h1> //styleを配列で複数入れるstyleObject:{
color:'red',
'background-color':'blue'
},
baseStyles:{
'font-size':'60px'
}