LocalStorage
LocalStorageとは
javascriptを利用することでWebブラウザに保存できる仕組み
メリット
データベースに接続しなくても、データを保存することができる
閲覧履歴などに使われる
デメリット
ブラウザに保存するため、セキュリティ面に問題がある
データ保存
localStorage.setItem('Key', 保存データ);
データ取得
localStorage.getItem('Key')
Vue computed
computed
算出プロパティはデータに指定した加工をして返すプロパティ
直接データを加工するようにもかけるが
ごちゃごちゃしてわからなくなるの算出プロパティを使う
computed:{ プロパティ名: 関数オブジェクト }
記入例
<div id="app" v-bind:style="errMessage">
<input type="number" v-model="price">
<p>{{ price | comma}}円</p>
<p>合計:{{ priceWithTax | comma }}円</p>
<p v-show="!canBuy">購入することはできません</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
price:1000
},
filters:{
comma:function(val){
return Number(val).toLocaleString()
}
},
computed:{
priceWithTax:function(){
return Math.floor(this.price * 1.08)
},
canBuy:function(){
return this.priceWithTax > 1000
},
errMessage:function(){
return{
color : this.canBuy ? '' : 'red'
}
}
}
})
</script>
Vue filters
filters
出力されるデータにfiltersで設定した要素を付けることで
データを加工することができる
{{ データ名 | 関数オブジェクト }}
関数オブジェクトを同じように付けることによって
複数のフィルターを付けることができる
v-bindにも付けることが可能
< 要素名 v-bind: 属性名 = " データ名 | 関数オブジェクト "></要素名>
記入例
<div id="app">
<p>{{ price | comma }}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
price:1000
},
filters:{
comma:function(val){
return val.toLocaleString();
}
}
})
</script>
Vue.js データバインド
v-bind 属性に出力
属性にデータを入れるためには、追加したいデータを属性の値に記入して
その属性名の前にv-bindをつける
< 要素名 v-bind: 属性名 = " データ名 ">
要素名は value , style , class などに使用できる
入力例
<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello World'
}
});
app.price = 100;
app.stock = 1;
</script>
v-for リストデータを出力
リストをデータ出力するには、v-forを使用する
< 要素名 v-for=" 配列要素を代入する変数名 in 配列の変数名 ">
入力例
<body>
<div id="app">
<ul v-for="item in items">
<li>{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
items:items
}
});
</body>
</script>
v-if v-else v-else-if 条件をつけて出力
v-ifの後に条件を書くことで、その条件を満たした場合、入力した要素を出力させる
v-else-if , v-else を書くことで分岐させて要素を出力させる
v-if
< 要素名 v-if = " 条件式 "> 条件成立の際の出力内容 </ 要素名 >
v-else-if
< 要素名 v-else-if = " 条件式 "> 条件成立の際の出力内容 </要素名>
v-else
< 要素名 v-else > その他条件の際の出力内容 </ 要素名 >
入力例
<div id="app">
<p v-if="point >= 80">{{score[0]}}</p>
<p v-else-if="point < 79 && point > 30">{{score[1]}}</p>
<p v-else>{{score[2]}}</p>
</div>
<script>
var score = ['優','良','不可'];
var app = new Vue({
el:'#app',
data:{
point:100
}
})
</script>
v-show 条件をつけて出力
v-showの後に条件を書くことで、その条件を満たした場合、入力した要素を出力させる
< 要素名 v-show = " 条件式 "> 条件成立の際の出力内容 </ 要素名 >
入力例
<div id="app">
<p>在庫残り{{stock}}個</p>
<p v-show="stock === 0">在庫がありません</p>
</div>
<script>
var score = ['優','良','不可'];
var app = new Vue({
el:'#app',
data:{
stock:0,
}
})
</script>
Vue 導入方法
Vue導入方法
ダウンロードして直接書き込む
CDNで導入
最新版で導入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
最新版で導入する場合、バージョンの変更で動かない場合がある
特定バージョン番号、ビルド番号にリストする
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
