一、组件
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>