Vue.js的主要特性组件与模板_vue.js模板引擎技术与组件技术关系?-CSDN博客

本文链接：https://blog.csdn.net/weixin_43803985/article/details/97630189

一、组件
vue.js所关注的核心是MVC模式中的视图层。其组件的作用可以具有很大的复用性，组件是基础HTML元素的拓展，可以方便地自定义其数据和行为。如果想要在所有的页面中都显示一条特定的信息内容，那么就需要注册一个全局组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册一个全局组件</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 定义显示的节点 -->
        <mycomponent></mycomponent>
    </div>
</body>
   <script>
       //注册全局组件
       Vue.component('mycomponent',{
           template:'<div>Hello vue</div>'
       })

       //创建根实例
       new Vue({
           el:'#app'
       })
   </script>
</html>

二、模板

1.过渡效果
在插入、更新、移除Dom时，提供了多种方式的应用过渡效果
vue.js提供了transition的封装组件

语法	含义
v-if	条件渲染
v-show	条件展示
	动态组件
	组件根节点

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .fade-enter-active, .fade-leave-active{
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-to{
            opacity: 0
        }
    </style>

</head>
<body>
   
    <div id="app">
        <!-- 在节点中定义click方法 -->
        <button v-on:click="show=!show">click</button>
        <!-- 效果显示部分 -->
        <transition name="fade">
            <p v-if="show">Hello vue</p>
        </transition>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>