Vue-resource＆animate.css
ビュー-リソース
Vue-resourceVueでネットワークデータを要求するために使用するプラグインです。簡単に言えば、インターフェースを調整するために使用されます。XMLHttpRequestまたはJSONPを介してリクエストを開始し、レスポンスを処理できます。言い換えれば、$。ajaxが実行できることは、vue-resourceプラグインによっても実行でき、vue-resourceのAPIはより簡潔です。
vue-resourceは7つのリクエストAPI（RESTスタイル）を提供します：
- get（url、[options]）
- head（url、[options]）
- delete（url、[options]）
- jsonp（url、[オプション]）
- post（url、[body]、[options]）
- put（url、[body]、[options]）
- patch（url、[body]、[options]）
Vueリソースライブラリをインストールします
1.cdnリンクを使用してインストールします
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
2.vue-resourceファイルパッケージを導入します
リクエストを取得
文法構造：this.$http.get('请求地址',参数).then(回调函数)
リクエストアドレスはtxtファイルです
<div id="app">
<input type="button" value="get请求" @click='getInfo'>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
getInfo(){
// 当发起get请求之后，通过.then来设置成功的回调函数
this.$http.get('./test.txt').then(res=>{
document.write(res.body)
},function(){
console.log('请求失败');
})
}
}
})
</script>
[リクエストを取得]ボタンをクリックすると、
データが取得されます
ポストリクエスト
文法構造：this.$http.post('请求地址',参数).then(回调函数)
postデータをバックエンドに送信する場合、3番目のパラメーターが必要です{emulateJSON:true}。
emulateJSON 機能：Webサーバーがapplication / jsonとしてエンコードされたリクエストを処理できない場合は、emulateJSONオプションを有効にできます。
jsonpリクエスト
文法構造：this.$http.jsonp('请求地址',参数).then(回调函数)
使用法：
<div id="app">
<input type="button" value="jsonp请求" @click='jsonpInfo'>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/posts').then(result=>{
console.log(result.data);
})
}
},
})
</script>
Vueアニメーションanimate.css
Vueは、DOMを挿入、更新、または削除するときに遷移効果を適用するためのさまざまな方法を提供します。次のツールが含まれています。
- CSSトランジションとアニメーションにクラスを自動的に適用する
- Animate.cssなどのサードパーティのCSSアニメーションライブラリで使用できます
- 遷移フック関数でJavaScriptを使用して、DOMを直接操作します
- Velocity.jsなどのサードパーティのJavaScriptアニメーションライブラリで使用できます
移行クラス名
Vueの公式ウェブサイトには次のように書かれています。
入口/出口の移行では、6つのクラススイッチがあります。
v-enter：遷移に入る開始状態を定義します。要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。
v-enter-active：遷移が有効になるときの状態を定義します。トランジションフェーズ全体に適用され、要素が挿入される前に有効になり、トランジション/アニメーションが完了した後に削除されます。このクラスを使用して、エントリ遷移の処理時間、遅延、および曲線関数を定義できます。
v-enter-to：遷移に入る終了状態を定義します。次のフレームは、要素が挿入された後（v-enterが削除されると同時に）有効になり、遷移/アニメーションが完了した後に削除されます。
v-leave：出発遷移の開始状態を定義します。終了遷移がトリガーされるとすぐに有効になり、次のフレームが削除されます。
v-leave-active：脱退遷移が有効になるときの状態を定義します。これは、出口遷移フェーズ全体で適用され、出口遷移がトリガーされるとすぐに有効になり、遷移/アニメーションが完了した後に削除されます。このクラスを使用して、遷移を終了するプロセス時間、遅延、および曲線関数を定義できます。
v-leave-to：離脱遷移の終了状態を定義します。次のフレームは、脱退遷移がトリガーされた後（v-脱退が削除されると同時に）有効になり、遷移/アニメーションが完了した後に削除されます。
移行中に切り替えられるこれらのクラス名の場合、名前のないものを使用する
<transition>と、v-がこれらのクラス名のデフォルトのプレフィックスになります。使用すると<transition name="my-transition">、にv-enter置き換えられmy-transition-enterます。
単一要素/コンポーネント遷移
Vueは提供します遷移次の場合、任意の要素とコンポーネントに入口/出口遷移を追加できます
- 条件付きレンダリング（v-ifを使用）
- 条件付き表示（v-showを使用）
- 動的コンポーネント
- コンポーネントルートノード
例えば：
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>
<div id="app">
<button @click='handleClick'>切换</button>
<transition name="fade">
<div v-if='show'>Hello World</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=(this.show===true?false:true);
}
},
})
</script>
トグルボタンをクリックすると、いくつかの要素がフェードインおよびフェードアウトします。
カスタム遷移クラス名
次の属性を使用して、遷移クラス名をカスタマイズできます。
- エンタークラス
- エンターアクティブクラス
- クラスに入る
- 休暇クラス
- Leave-active-class
- クラスに任せる
これらの移行クラス名は通常のクラス名よりも優先度が高く、Animate.cssと組み合わせて使用できます。
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
例えば：
<div id="app">
<button @click='handleClick'>切换</button>
<transition
name="fade"
appear
enter-active-class='animated swing '
leave-active-class='animated shake '
>
<div v-if='show'>Hello World</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=(this.show===true?false:true);
}
},
})
</script>
試してみることができます。スイングとシェイクのアニメーションが表示されます。これらはanimate.cssライブラリですでに定義されています。現時点transitionでは、内部のクラス名は変更できず、修正されています。
コードの最適化：
上記のコードは効果を示しています。ページを更新した場合、ボタンをクリックしないと、要素は静止し、アニメーション効果はありません。解決策：
appear属性を追加する
<transition
name="fade"
appear
enter-active-class='animated swing '
leave-active-class='animated shake '
appear-active-class='animated swing'
>
<div v-if='show'>Hello World</div>
</transition>
appearプロパティは、初めてアニメーションがないという問題を解決します
アニメーションの開始と終了の期間を設定します
<ransition>コンポーネントに属性を追加する
:duration="{enter: ,leave: }"
jsでアニメーションライブラリを使用する
Velocity.jsを使用する
<div id="app">
<button @click='handleClick'>toggle</button>
<transition
name='fade'
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">应用js中的动画库</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=!this.show
},
handleBeforeEnter(el){
el.style.opacity=0;
},
handleEnter(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
},
handleAfterEnter(el){
console.log('动画结束');
}
},
})
</script>
この時点でのパラメータelはバインドされた要素を参照します。enter合計leaveに含まれる場合はdone、コールバックに使用する必要があります。そうでない場合は、同期的に呼び出され、遷移はすぐに完了します。