前端学习-Vue内置组件

炒牛肉：

炒苹果：

`

};

var ComC = {

template: `

请选择汤：

<label for=“tang1"”>西红柿鸡蛋汤：

<input id=“tang1"” type=“radio” name=“tang” value=“tang1"”>

紫菜蛋花汤：

清汤

`

};

var ComD = {

template: `

请输入支付信息：

<label for=“account”">请输入账号：

<input id=“account”" type=“text” name=“account”>

请输入密码：

`

};

new Vue({

el: ‘#app’,

data: {

titles: [‘ComA’, ‘ComB’, ‘ComC’, ‘ComD’],

currentCom: ‘ComA’

},

components: {

ComA, ComB, ComC, ComD

}

});

过渡组件

---

用于在 Vue 插入、更新或者移除 DOM 时， 提供多种不同方式的应用过渡、动画效果。

transition 组件

• 用于给元素和组件添加进入/离开过渡:

条件渲染 (使用 v-if )

条件展示 (使用 v-show )

动态组件

组件根节点

• 组件提供了 6个 class，用于设置过渡的具体效果。

v-enter

v-enter-to

v-enter-active

v-leave

v-leave-to

v-leave-active

<button @click=“show = !show”>切换

hello world

相关属性

• 给组件设置 name 属性，可用于给多个元素、组件设置不同的过渡效果，这时需要将 v- 更改为对应 name- 的形式。

• 通过 appear 属性，可以让组件在初始渲染时实现过渡。

<button @click=“show = !show”>切换1

这是要切换的元素1

<button @click=“showDemo = !showDemo”>切换2

<transition

name=“demo”

appear

这是要切换的元素2

自定义过渡类名

• 自定义类名比普通类名优先级更高，在使用第三方 CSS 动画库时非常有用。

• 用于设置自定义过渡类名的属性如下:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

appear-class

appear-to-class

appear-active-class

<button @click=“show = !show”>切换

<transition

enter-active-class=“test”

leave-active-class=“test”

这是 p 标签

transition-group 组件

• <transition-group> 用于给列表统一设置过渡动画。

• tag 属性用于设置容器元素，默认为 <span>。

• 过渡会应用于内部元素，而不是容器。

• 子节点必须有独立的 key，动画才能正常工作。

• 当列表元素变更导致元素位移，可以通过 .v-move 类名设置移动时的效果。