小程序组件转换vue组件_Vue中的组件转换入门

小程序组件转换vue组件

When we build applications, we aim to make them intuitive for users. We want our users to have a smooth experience using it, and to feel our application flowing from one point to another, rather than just jump between screens.

当我们构建应用程序时，我们旨在使它们对用户直观。 我们希望用户拥有使用它的流畅体验，并希望我们的应用程序从一个点流到另一个点，而不仅仅是在屏幕之间跳转。

If we switch components without transitions, we see a sharp change every time a new component is called up. This is not ideal and can result in our users having a poor experience with our application.

如果切换组件时不进行过渡，则每次调用新组件时都会看到巨大的变化。 这不是理想的选择，它可能导致我们的用户在使用我们的应用程序时体验不佳。

In this tutorial, you will learn how to improve the flow of your application by using component transitions in Vue.

在本教程中，您将学习如何通过使用Vue中的组件转换来改善应用程序的流程。

先决条件 (Prerequisites)

1. Vue CLI 3 for installing Vue

   Vue CLI 3，用于安装Vue

2. Knowledge of JavaScript
   JavaScript知识
3. Knowledge of Vue.js
   Vue.js知识

设置我们的应用程序 (Setup Our Application)

To begin, create a Vue application. Run the following command:

首先，创建一个Vue应用程序。 运行以下命令：

• vue create component-transitions
  vue创建组件转换
• cd component-transitions
  cd组件转换

Once you are done creating the application, you need to define a component you will use for the transitions.

创建完应用程序后，您需要定义一个用于转换的组件。

Update The App Component When we create a new Vue application, the CLI creates an App.vue file inside the ./src directory. Open the file and update the style section as follows:

更新应用程序组件创建新的Vue应用程序时，CLI在./src目录中创建一个App.vue文件。 打开文件并更新style部分，如下所示：

[...]
<style>
    [...] 
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

We created global styles we wish to share across all our components. This way, you will not have to add styles per component again.

我们创建了希望在所有组件中共享的全局样式。 这样，您将不必再次为每个组件添加样式。

Update The HelloWorld Component Our Vue application also comes with a HelloWorld.vue file in located in ./src/components directory. Open the file and edit as follows:

更新HelloWorld组件我们的Vue应用程序还带有./src/components目录中的HelloWorld.vue文件。 打开文件并进行如下编辑：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        }
    }
</script>

Create The About Component We are going to create a new component About.vue inside the ./src/components directory. Open the file and add the following:

创建关于组件我们将创建一个新的组件About.vue里面./src/components目录。 打开文件并添加以下内容：

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'About',
        props: {
            msg: String
        }
    }
</script>

Create Another Component We are going to create another component Extra.vue inside the ./src/components directory. Open the file and add the following:

创建另一个组件我们将在./src/components目录中创建另一个组件Extra.vue 。 打开文件并添加以下内容：

<template>
    <div>
        <h1>{{ intro }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'Extra',
        props: {
            msg: String
        },
        data(){
            return {
                intro : "Extra"
            }
        },
        watch: {
            msg : {
                immediate: true, 
                handler(val, oldval) {
                    //
                }
            }
        }
    }
</script>

For our extra component, we have added a watch method to track the updates to the msg prop. When the message prop updates, we want to update the intro property.

对于我们的额外组件，我们添加了一个watch方法来跟踪msg道具的更新。 当消息道具更新时，我们要更新intro属性。

We defined it this way to allow us to use transitions on the component.

我们以这种方式定义它，以允许我们在组件上使用过渡。

渲染我们的组件 (Rendering Our Components)

Vue provides a variety of ways to apply transition effects when items in a component are updated or when components themselves are changed. It ranges from applying CSS classes for transitions and animations to using 3rd party JavaScript libraries for transition effects.

当更新组件中的项目或更改组件本身时，Vue提供了多种方法来应用过渡效果。 从应用CSS类进行过渡和动画到使用第三方JavaScript库进行过渡效果，范围广泛。

The first set of transitions you will define will be on change of components. You will use conditional rendering to display the components we created and apply transition as they render.

您将定义的第一组过渡将在组件更改时进行。 您将使用条件渲染来显示我们创建的组件，并在渲染时应用过渡。

Import The Components We need to import the components we created into our App.vue component. Open the file and edit as follows:

导入组件我们需要将创建的组件导入到App.vue组件中。 打开文件并进行如下编辑：

[...]
<script>
    import HelloWorld from './components/HelloWorld.vue'
    import About from './components/About.vue'
    import Extra from './components/Extra.vue'

    export default {
        name: 'app',
        components: {
            HelloWorld, About, Extra
        }
    }
</script>

Use The Components Now that we have imported the components, let us use it in our App component. Edit the App.vue file as follows:

使用组件现在我们已经导入了组件，让我们在App组件中使用它。 如下编辑App.vue文件：

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld msg="Welcome to your Vue.js application"/>
        <Extra :msg="extra"/>
        <About msg="This is the About page"/>
        <button @click="changeExtra">Update Extra</button>
    </div>
</template>

We defined a function changeExtra to listen for button clicks and also bound the msg prop for the Extra component to extra attribute. Now, let’s create the extra attribute and changeExtra method. You will just leave the Vue.js logo there so the page doesn’t feel empty ?

我们定义了一个函数changeExtra来监听按钮的点击，并将Extra组件的msg属性绑定到extra属性。 现在，让我们创建extra属性和changeExtra方法。 您将只保留Vue.js徽标，因此页面不会感到空白吗？

Edit the file as follows:

如下编辑文件：

[...]
export default {
    name: 'app',
    components: {
        HelloWorld, About, Extra
    },
    data(){
        return {
            extra : "Extra"
        }
    },
    methods : {
        changeExtra(){
            this.extra = "This is extra"
        }
    },
}
[...]

Define Links For Switching Components We are going to show one component at a time. To do this, you will have a set of links that would allow us to state which component to use at a certain time.

定义用于交换组件的链接我们将一次显示一个组件。 为此，您将具有一组链接，这些链接使我们能够说明在特定时间使用哪个组件。

Open the App.vue file and add the following:

打开App.vue文件并添加以下内容：

<template>
    <div id="app">
        [...]
        <div>
            <ul>
                <li @click="showHome">Home</li>
                <li @click="showAbout">About</li>
                <li @click="showExtra">Extra</li>
            </ul>
        </div>
    </div>
</template>

Then add the methods we used above:

然后添加我们上面使用的方法：

[...]
methods : {
    [...]
    showHome(){
        this.displayHome = true
        this.displayAbout = false
        this.displayExtra = false
    },
    showAbout(){
        this.displayHome = false
        this.displayAbout = true
        this.displayExtra = false
    },
    showExtra(){
        this.displayHome = false
        this.displayAbout = false
        this.displayExtra = true
    }
},
[...]

Finally, we define the properties — displayHome, displayAbout, displayExtra.

最后，我们定义属性- displayHome ， displayAbout ， displayExtra 。

[...]
data(){
    return {
        extra : "Extra",
        displayHome : true,
        displayAbout : false,
        displayExtra : false
    }
},
[...]

We set displayHome to true so that anytime we load our application, it shows up first. The rest is false so they do not show up.

我们将displayHome设置为true，以便displayHome加载应用程序时，它都会首先显示。 其余的都是错误的，因此它们不会出现。

Conditional Rendering Of Our Components Now that we have defined links for showing our components, let’s render them based on certain conditions. Still in the App.vue file, edit it as follows:

组件的条件渲染现在，我们已经定义了用于显示组件的链接，让我们根据某些条件来渲染它们。 仍在App.vue文件中，如下进行编辑：

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/>
        <About msg="This is the About page" v-if="displayAbout"/>
        <div v-if="displayExtra">
            <Extra :msg="extra"/>
            <button @click="changeExtra">Update Extra</button>
        </div>
        [...]
    </div>
</template>

So, we have completely rendered all of our components, now we can add transitions to it.

因此，我们已经完全渲染了所有组件，现在可以向其添加过渡了。

定义数据更改的过渡 (Defining Transitions On Data Change)

You will modify Extra component. We want to add a transition effect when we update the data inside of it. Open the Extra.vue file in the ./src/components/ directory and edit as follows:

您将修改Extra组件。 我们想在其中更新数据时添加过渡效果。 打开Extra.vue在文件./src/components/目录，并编辑如下：

<template>
    <div>
        <transition name="fade">
            <h1 v-if="!msg">{{ intro }}</h1>
        </transition>
        <transition name="fade">
            <h1 v-if="msg">{{ msg }}</h1>
        </transition>
    </div>
</template>
[...]
<style scoped>
   .fade-enter-active{
        transition: opacity 1.5s;
    }
    .fade-leave-active {
        opacity: 0;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

When you click the Update Extra button, you will notice a slide fading transition occur. The transition is noticeable, so our users will likely see it.

当您单击Update Extra按钮时，您会注意到发生了幻灯片淡入淡出过渡。 过渡非常明显，因此我们的用户很可能会看到它。

We are able to achieve the transition by wrapping our element in a Vue transition element and then defining the effect we want the transition element to use. In our case, we used opacity to make the component appear and disappear.

通过将元素包装在Vue过渡元素中，然后定义我们希望该过渡元素使用的效果，我们可以实现过渡。 在我们的案例中，我们使用不透明度使组件出现和消失。

Note: For data change transitions, you might want to use state transition as it provides a more robust experience. Read more about State Transitions.

注意 ：对于数据更改转换，您可能需要使用状态转换，因为它提供了更强大的体验。 阅读有关状态转换的更多信息。

Vue provides hooks at different stages of the transition cycle that we can hook into and define how we want the transition to be. I’ve added an image below from Vue.js website to illustrate this:

Vue在过渡周期的不同阶段提供了挂钩，我们可以挂钩并定义我们希望过渡的方式。 我在Vue.js网站上添加了以下图片来说明这一点：

v represents the name of our transition. In the case of the Extra component, we replace v with fade to have fade-enter in place of v-enter and so on.

v表示过渡的名称。 在Extra组件的情况下，我们将v替换为fade以使用fade-enter代替v-enter ，依此类推。

定义组件更改的过渡 (Defining Transitions On Component Change)

Define Transition On The HelloWorld Component Now, to the App component where you will explore different other ways to implement transitions. Let’s define the transition on the HelloWorld component. Open the App.vue file and edit as follows:

在HelloWorld组件上定义过渡现在，到App组件，您将在其中探索实现过渡的其他不同方法。 让我们在HelloWorld组件上定义过渡。 打开App.vue文件，然后进行如下编辑：

<transition name="welcome">
    <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/>
</transition>

Our transition will be named “welcome”. Now, add the transition classes to get your desired effect:

我们的过渡将被命名为“欢迎”。 现在，添加过渡类以获得所需的效果：

<style scoped>
    /* Welcome Styles */
    .welcome-enter {
        transform: translateX(10px);
        opacity: 0;
    }
    .welcome-enter-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .welcome-leave-active, .welcome-leave-to {
        opacity: 0;
    }
</style>

Now, every time we click the Home link, there will be a little shaking ? as our component shows.

现在，每次我们单击“ Home链接时，都会有些晃动? 如我们的组件所示。

We also created a new style element and added ‘scoped` to it.

我们还创建了一个新的style元素，并在其中添加了“作用域”。

Define Transition On The About Component You will take a similar step with what we did for the HelloWorld component. Open the file and add the following:

在About组件上定义过渡您将对HelloWorld组件执行类似的步骤。 打开文件并添加以下内容：

[...]
<transition name="about">
    <About msg="This is the About page" v-if="displayAbout"/>
</transition>
[...]

Then add the transition effect:

然后添加过渡效果：

<style scoped>
    [...]
    /* About Styles */
    .about-enter {
        width: 30%;
        opacity: 0;
    }
    .about-enter-active {
        transition: all 2s ease-in-out;
    }
    .about-leave-active, .about-leave-to {
        opacity: 0;
    }
    .about-enter-to {
        width:100%;
        opacity: 1;
        margin-left: auto;
    }
</style>

Define The Transition On Extra Component Finally, let’s also add a transition for enter and exit of the extra component:

定义额外组件的过渡最后，我们还要为额外组件的输入和退出添加过渡：

[...]
<transition name="extra">
    <div v-if="displayExtra">
        <Extra :msg="extra"/>
        <button @click="changeExtra">Update Extra</button>
    </div>
</transition>
[...]

Then add the styles for the transition:

然后添加过渡的样式：

<style scoped>
    [...]
    /* Extra Styes */
    .extra-enter {
        transform: translateX(-200px);
        opacity: 0;
    }
    .extra-enter-to {
        transform: translateX(0px);
    }
    .extra-enter-active {
        transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .extra-leave-active, .extra-leave-to {
        opacity: 0;
    }
</style>

And that’s it for component transitions.

这就是组件转换的过程。

运行应用程序 (Run The Application)

Now that we are done defining transitions for our various components, let’s run the application and see what it looks like.

既然我们已经为各个组件定义了转换，那么让我们运行该应用程序，看看它是什么样。

From your terminal, run the following command:

在终端上，运行以下命令：

• npm run serve
  npm运行发球

Then visit the application on the url that appears.

然后在显示的网址上访问该应用程序。

结论 (Conclusion)

We have looked at vue component transitions in this tutorial. We learned how to add transitions to our application, although you may want to use fewer such transitions in a real application.

我们已经在本教程中介绍了vue组件转换。 我们学习了如何向我们的应用程序添加过渡，尽管您可能希望在实际应用程序中使用较少的过渡。

Try to use different CSS transitions for your components and see what you can come up with.

尝试为您的组件使用不同CSS过渡，然后看看您能想到什么。

翻译自: https://www.digitalocean.com/community/tutorials/getting-started-with-component-transitions-in-vue

小程序组件转换vue组件