Vue.jsの移行を正常に実行できませんか？

Question

vue.js（バージョン1）の移行を実行できません。私は自分のサイトからコードを取り出した。 javascript console.logsを実行する必要があります。 Vue.js’遷移システムで

Vue.transition('fade', { 
 
     css: false, 
 
     enter: function (el, done) { 
 
     console.log('enter'); 
 
     }, 
 
     enterCancelled: function (el) { 
 
     console.log('enterCancelled'); 
 
     }, 
 
     leave: function (el, done) { 
 
     console.log('leave'); 
 
     }, 
 
     leaveCancelled: function (el) { 
 
     console.log('leaveCancelled'); 
 
     } 
 
    }); 
 

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

<div id="app"> 
 
     <p transition="fade">test fade</p> 
 
    </div>

Answer 1

要素を挿入またはDOMから削除されたときには、自動トランジション効果を適用することができます。

• V-ショー
• V-用
V-IF

試してみてくださいその：

遷移属性は、一緒に使用することができます

Vue.transition('fade', { 
 
    css: false, 
 
\t enter: function (el, done) { 
 
\t \t console.log('enter'); 
 
\t }, 
 
\t enterCancelled: function (el) { 
 
\t \t console.log('enterCancelled'); 
 
\t }, 
 
\t leave: function (el, done) { 
 
\t \t console.log('leave'); 
 
\t }, 
 
\t leaveCancelled: function (el) { 
 
\t \t console.log('leaveCancelled'); 
 
\t } 
 
}); 
 

 
var Vue = new Vue({ 
 
\t el: '#app', 
 
\t data: { 
 
\t \t show: false 
 
\t } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script> 
 

 
<div id="app"> 
 
    \t <button @click="show = !show">{{ show ? 'hide' : 'show' }}</button> 
 
     <p v-show="show" transition="fade">test fade</p> 
 
</div>