1 Жизненный цикл
<шаблон>
<DIV ID = "lifeinfo">
<P> компонент жизненного цикла </ P>
<Button @ замковое = "changeData"> Изменить данные </ Button>
<P> {{MSG}} </ P>
</ DIV>
</ Template>
<Script>
Экспорт { по умолчанию
название: "lifeinfo",
beforeCreate () {
закреплять функция выполняет сборку до инициализации //
console.log ( "перед инициализацией");
},
создал ( ) {
после инициализации завершается сборка // изменен
( "после инициализации") в console.log;
},
данные () {
возвращение {
MSG: "данные перед модификацией"
};
},
методы: {
changeData () {
this.msg = "данные после модификации";
}
},
beforeMount () {
// до сборки монтирования
console.log ( "перед загрузкой");
},
навесные () {
Крепление сборка завершена //
console.log ( "монтирование завершено");
},
BeforeUpdate () {
до модификации сборки //
console.log ( "перед модификацией", this.msg);
},
обновление () {
после того, как сборка модифицированного //
console.log ( "после модификации", this.msg);
},
beforeDestroy () {
перед разгрузкой компонент //
console.log ( "перед разгрузкой");
},
разрушаемый () {
// после разгрузки компонента
console.log ( "после разгрузки");
}
};
</ Script>
2. анимация
<шаблон>
<DIV ID = "animateinfo">
<! - <P> VUE анимированный переход </ P>
< кнопка @ нажмите = "changeStatus"> переключения </ Button> ->
<!- обеспечивается по умолчанию увядает увядает
Если компонент перехода имя атрибута к моему-перехода ,
соответствующего настраиваемого пользовательского по умолчанию имя в качестве альтернативы переключился v-
-->
<!-- <transition name="slide-fade">
<div class="block" v-if="ischange">动画</div>
</transition>-->
<!-- <transition name="transform-top-fade">
<div class="nav" v-show="ischange">标题</div>
</transition>-->
<!--
动画可以通过上面的方式来写 也可以通过 transition 组件提供的自定义过渡类名称的属性来写动画
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
name属性写 custom-classes-transition 系统的动画类名称
-->
<!-- 下面的这个动画 和 讲的自定义类属性无关 -->
<div class="menu" @touchstart="startinfo" @touchmove="moveinfo" @touchend="endinfo">
<ul class="navlist" key="1" :style="`transform:translate(${translateX}px);`">
<li>喜剧</li>
<li>科幻</li>
<li>动画</li>
<li>动漫</li>
<li>记录</li>
<li>魔幻</li>
<li>爱情</li>
</ul>
</div>
<!--
写自定义类动画
-->
<transition
name="custom-classes-transition"
enter-active-class="animateenter"
leave-active-class="animateleave"
enter-class="animateinfoenter"
leave-to-class="animateinfoleave"
>
<div class="menulist" @click="isshow=!isshow" v-show="isshow">我是一个组件</div>
</transition>
<!-- 用animate css 结合使用transition
1.安装animate.css
2.mainjs 文件里面进行引入
3.直接在transition组件上使用
-->
<button @click="isblock=!isblock">animate</button>
<!-- :duration 属性是设置进入和离开的动画时间 写一个值 两个动画时间一直 也可以分开写 -->
<transition
name="custom-classes-transition"
enter-active-class="animated slideInRight"
leave-active-class="animated fadeOutDown"
:duration="{enter:100,leave:100}"
>
<div v-if="isblock">使用animate.css</div>
</transition>
<!--
transition 组件有对应的钩子函数 可以在钩子函数里面写代码
v-on 监听
使用 过渡结合动画
velocity-animate@beta
1.安装 cnpm install --save-dev velocity-animate@be
2.直接在那个组件里面使用 在哪引入
-->
<transition
@before-enter="beforeenter"
@enter="enter"
@after-enter="afterenter"
@before-leave="beforeleave"
@leave="leave"
@after-leave="afterleave"
>
<div v-if="isblock">使用animate.css</div>
</transition></ DIV>
</ Template>
<Script>
// включена анимация
Импорт из Velocity "Velocity-Animate";
Экспорт { по умолчанию
название: "animateinfo",
Data () {
возвращение {
ischange: к истинному,
в StartX: нуль,
EndX: нулевой ,
translateX: 0,
ВПЗ: 0,
isshow: к истинному,
isBlock: истина
};
},
навесные () {
; this.scw = window.screen.availWidth
},
{: Методы
beforeenter (EL) {
набор перед входом в анимации // CSS стиль
el.style.opacity = 0;
el.style.transformOrigin = "Центр";
},
введите (EL, DONE) {
console.log ( "анимация входа");
// полные настройки задержки набора петель вариант цикла после окончания функции обратного вызова задержки анимации Display & Visibility после завершения реализации анимации
// начнутся до начала анимации обратного вызова ослабление длительности одушевленных анимировать по времени
скорости (
EL ,
{Непрозрачность :. 1, то FONTSIZE: "30px"},
{
ПРОДОЛЖИТЕЛЬНОСТЬ: 1000,
Задержка: 300,
Бегин: () => {
console.log ( "анимация готова начать");
},
полный: () => {
Console .log ( "выполнение анимации в комплекте");
}
}
);
DONE (); // продолжить
},
afterenter (EL) {
скорость (
EL,
{Непрозрачность :. 1, то FONTSIZE: "25px", цвет: "# C0C0C0" },
{ПРОДОЛЖИТЕЛЬНОСТЬ: 500}
);
"анимации после ввода" в console.log ();
},
beforeleave (EL) {
console.log ( "Перед выходом Animation «);
}
Отпуска (EL, DONE) {
скорость (EL, {FONTSIZE: "40px", Opacity :. 1}, {ПРОДОЛЖИТЕЛЬНОСТЬ: 1000});
скорость (
EL,
{FONTSIZE: 0, Opacity: 0},
{Delay: 1000, СРОКИ : 1000}
);
console.log ( "анимация прочь");
},
afterleave (EL) {
console.log ( "анимации после выхода");
},
changestatus () {
this.ischange = this.ischange ;!
},
StartInfo (Е) {
// начать прикоснуться
к сенсорному пусть = e.touches;
this.startx касания = [0] .pageX;
},
moveinfo (Е) {
// касания перемещения
выпускаемого касания = e.touches;
this.endx = сенсорный [0] .pageX;
направление // Анализ сенсорный экран
this.translateX = 0;
ЕСЛИ (this.endx && this.startx) {
пусть = SX this.endx - this.startx;
если (SX <0) {
this.translateX + = SX;
если (Math.abs (this.translateX)> this.scw - 490) {
this.translateX = this.scw - 490;
}
} Еще {
this.translateX + = SX;
если (Math.abs (this.translateX)> this.scw - 490) {
this.translateX = - (this.scw - 490);
}
}
}
},
Endinfo (е) {
this.endx = NULL;
this.startx = NULL;
}
}
};
</ скрипт>
<стиль>
/ .block {
ширина: 100px;
высота: 100px;
границы: 1px твердые # 000;
границы радиус: 50%;
выравнивания текста: центр;
высота линии: 100px;
} /
/ * Класс анимации
V-ввода , чтобы определить переход начальное состояние
состояние V-входа-активные для определения переходного состояния , чтобы принять эффект
клиновой отпуск определяемые от перехода исходного состояния
V-отпуск-активные определения выходить из состояния перехода в действие
состояние клиновых отпуска, чтобы определить левый конец перехода
/
/ . Слайд-Fade-Active-Enter,
слайд-Fade-несмываемый Active. {
Transition: Все lŠ;
}
. Слайд-Fade-Enter,
слайд-Fade к отпускам {.
Transform: translateX (40px) rotateZ ( 180deg);
Непрозрачность: 0;
}
.nav {
позиция: относительная;
ширина: 100%;
высота: 30px;
слева: 0;
Рейтинг: 0;
границы: 1px Твердое # C0C0C0;
}
.transform-Top-увядает-Active-Enter {
ПЕРЕХОДНОГО ПЕРИОДА: Все 0.3S ПРОСТОТА;
}
.transform-Top-Fade-Leave-Active {
Переход: все 1s простота в отъезде;
}
.Transform-топ-замирание войти,
.transform-топ-выцветанию-отпуск-к {
слева: 50%;
наверх: -100px;
ширина: 100px;
Непрозрачность: 0;
} * /
/ Запись в соответствии с пользовательским компонентом класса атрибутов перехода анимация /
.menu {
ширина: 100%;
высота: 40px;
высота строки: 40px;
границы: 1px Solid # 000;
Box-калибровочный: граница-Box;
переполнение: скрытый;
}
{.navlist
ширина: 490px;
переполнение: скрытый;
Переход: Линейный Все 0.1с;
}
.navlist> {Li
List-стиль: нет;
поплавок: левый;
ширина: 70px;
}
.menulist {
позиция: относительная;
высота: 100px;
ширина: 100%;
Слева направо : 0;
границы: 1px твердые # 000;
}
.Animateenter,
.animateleave {
переход: все 0.8s простота в отъезде;
}
.Animateinfoenter,
.animateinfoleave {
непрозрачности: 0;
ширина: 50%;
слева: 25%;
}
</ Стиль>