近两天刚刚接触vue.js，一直都知道是个很不错的插件，苦于一直没有用到它。
vue的官网给出的api简单易懂。容易上手，可是里面内容也是非常多的，无论是什么孰能生巧。多学多看总是对的。从今天起记录一下自己学习这个框架的过程。也是对自己的一个督促。
我找到了网上的一个实例（稍加修改）。就拿这个来细说下里面的内容：
看如下例子：
<script type="x/template" id="modal-template">
<transition name="modal"> <!--模板是否显示通过v-show="show"来设置， transition设置动画效果--> <div class="modal-mask" v-show="show"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <!--slot 相当于header占位符--> <slot name="header"> default header </slot> </div> <div class="modal-body"> <!--slot 相当于body占位符--> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <!--slot 相当于footer占位符--> <slot name="footer"> default footer </slot> <button class="modal-default-button" @click="xshow">OK</button> </div> </div> </div> </div>
</transition> </script> <div id="app"> <!--点击按钮时设置vue实例特性showModal的值为true--> <button id="show-modal" @click="xshowModal">show modal</button> <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性--> <modal :show.sync="showModal"> <!--替换modal插件中slot那么为header的内容--> <h3 slot="header">被替换</h3> <h3 slot="body">我也是被替换</h3> <h3 slot="footer">是被替换</h3> </modal> </div>
//定义一个插件，名称为modal Vue.component("modal", { //插件的模板绑定id为modal-template的DOM元素内容 template: "#modal-template", props: { //特性，类型为布尔 show:{ type: Boolean, required: true, twoWay: true } }, methods:{ xshow:function(){ v.showModal=false console.log("欢迎" +v.showModal) } } }); //实例化vue，作用域在id为app元素下， var v=new Vue({ el: "#app", data: { //特性，默认值为false showModal: false }, methods:{ xshowModal:function(){ this.showModal=!this.showModal, console.log("欢迎" + this.showModal) } } });
* { padding:0; margin:0; } body { background:#f0f0f0; font-size:16px; } .clearfix:after { clear:both; content:""; display:block; height:0; visibility:hidden; line-height:0; } .clearfix { zoom:1; } .clear { clear:both; height:0; width:0; display:block; visibility:hidden; overflow:hidden; } .left { float:left } .right { float:right } .bdcolor { background:#4287ff; } .bgblue { color:#fff; width:100%; position:relative; background:#689efe; padding: 10px 0px; } .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter, .modal-leave { opacity: 0; } .modal-enter .modal-container, .modal-leave .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); }
1：html部分（咋一看，是script是一个js抱起来的一段div。）
script即为定义一个模板，并设置这个模板的id为modal-template(这也行是vue.js的特殊写法，目前我只能这么理解。。。)
<script type="x/template" id="modal-template"></script>
2：v-show在官方文档给与的解释是：
我的理解就是相当于控制css中隐藏与显示的一个类名，只是这个类名写在了html标签里。
当v-show的值为true，表示元素显示；如果v-show值为false，表示元素隐藏。
v-show="show"中定义变量show。可以在js中data里自由控制show的ture或者false。
3：下面说一下“transition”过渡效果。
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name="fade"，会有如下四个CSS类名：
-
fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
-
fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
-
fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
-
fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；
从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
上面示例中，fade-enter和fade-leave-active类设置CSS为opacity:0，说明过渡刚进入和离开的时候透明度为0，即不显示。当然还可以设置其他的CSS属性，transform属性是除了opacity之外经常在这里被用到的，transform用法可参考 ，比如
<div>
<button @click="show=!show">show</button>
<transition name="fold">
<p v-show="show">hello</p>
</transition>
</div>
.fold-enter-active {
animation-name: fold-in;
animation-duration: .5s;
}
.fold-leave-active {
animation-name: fold-out;
animation-duration: .5s;
}
@keyframes fold-in {
0% {
transform: translate3d(0, 100%, 0);
}
50% {
transform: translate3d(0, 50%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes fold-out {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 50%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
具体用法还需深入了解。。。zzzzzzzzzzzzzzzz
4：slot元素可以用一个特殊属性name来调配。可以把modal-wrapper看做是一个模板。里面的内容可以通过 slot="header"来调用，header及为模板的name值。
5：@click="xshowModal"中@即为v-on的缩写。官网解释：用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
6：还有一个缩写:click="goon"中：即为v-bind的缩写。官网解释：解释很发杂，例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.font-red {
color: red;
}
.bgcolor-burlywood {
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var vm = new Vue({
el: '#box',
data: {
red: 'font-red',
burlywood: 'bgcolor-burlywood'
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="[red,burlywood]">文字颜色</p>
</div>
</body>
</html>
7： vue.js中构建组件Vue.component("modal", {})。modal和html里的<modal>相对应。
如下例子：
Vue.component('mine',{
template:'#mineTpl',
props:['name','title','city','content']
});
var v=new Vue({
el:'#vueInstance',
data:{
name:'zhang',
title:'this is title',
city:'Beijing',
content:'these are some desc about Blog'
}
});
8：其他一些需要注意的，src
9:官网给出了其他的写法。貌似比这简单多了（https://cn.vuejs.org/v2/examples/modal.html）
button关闭弹框有另外一个封装好的写法，查了许久，应该是vue.js封装好了的直接关闭弹框的写法吧。。。
@click="$emit('close')"这种写法直接可以把弹框关闭。找了一些资料，查到有个童鞋的微博写的比较清晰，附上地址（http://www.kuang-gu.com/archives/63）
