vue1.0总结笔记二

1. vue1.0声明周期
　　created: 实例已经创建了
　　beforeCompile: 在实例编译之前
　　compiled 在实例编译之后执行
　　ready 实例已经插入到文档之中
　　beforeDestroy 在销毁之前
　　destroyed 在销毁之后
　　ready(){
　　　　setInterval(()=>{
　　　　　　this.index++;
　　　　　　this.index == this.arr.length && (this.index = 0);
　　　　},1000)
　　}
2. vue1.0动画--transition--给需要的元素添加:transition="fly"
方法一:
　　.fly-transition {
　　　　opacity: 1;
　　　　background: black;
　　　　transition: 1.3s all;
　　　　transform: translate(0);

　　}
　　.fly-enter {
　　　　opacity: 0;
　　　　background: yellow;
　　　　transform: translateX(90px);
　　}
　　.fly-leave {　　
　　　　opacity: 0;
　　　　background: blue;
　　　　transform: translateY(90px);
　　}
方法二:
　　可以使用amimite.css的特效，引入后给需要的原色添加类名
　　<div v-show="show" class="box animated" transition="fly"></div>
　　transitions: {
　　　　fly: {
　　　　　　enterClass: "zoomInUp",
　　　　　　leaveClass: "zoomOut"
　　　　}
　　}
3. tab选项卡---结合动画效果是实现切换--19，20
4. 组件，全局组件，局部组件
方法一:
　　var extend = Vue.extend({
　　　　template:`<h1>hello vue</h1>`
　　})
　　Vue.component("fly",extend);
方法二:
　　<template id="demoOne">
　　　　<h2>hello {{ msgFly }}</h2>
　　</template>
　　Vue.component("fly",{
　　　　data: function(){
　　　　return {
　　　　　　msg: "change"
　　　　}
　　},
　　template: "#demoOne"
　　})
方法三:
　　<script type="text/x-template" id="fly">
　　　　<h1>hello every one vue</h1>
　　</script>
　　Vue.component("fly",{
　　　　template: "#fly"
　　});
5. 组件-父传子
方法一：
　　在哪个做用域msg是谁的：<flyer :get-fa="msg"></flyer>
　　子：components: {
　　　　flyer: {
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　msgSon: "hello son",
　　　　　　　　getFa: "hello son1",
　　　　　　　　num: 1994
　　　　　　　}
　　　　　　},
　　　　　　props:["getFa"]
　　　　　　}
　　　}
　　props中的回去参数有大写到调用的时候要get-fa，prop中的属性获取到会替换掉data中重名的
方法二:
　　只改变props，对获取的数据有限制，满足一定的规则
　　props: {
　　　　getSon: String,
　　　　getNum: Number
　　}
6. 组件-子传父-儿子主动给父亲才可以获取到-通过事件之间的传递获取
　　子：this.$emit("change-msg",this.msg1);
　　父：<flyer @change-msg="getSonMsg"></flyer>
　　　　getSonMsg(msg){
　　　　　　this.msg2 = msg;
　　　　}
7. slot--插槽
　　因为代码不可能是一个人全程写的，另一个人要是不想改前一个人的组件只在调用的时候添加就可以了，
　　这样不会造成太大的影响
　　<fly>
　　　　<h2>今天天气怎么样？</h2>
　　　　<h2 slot="header">今天天气是真的好</h2>
　　　　<h2 slot="footer">真的好凉快丫</h2>
　　　　<h2>今天天气好呀</h2>
　　</fly>
　　通过slot的属性和，name来获取放到什么位置，如果没有写会把所有没有标记的放到同一个没有name的slot标签中
　　<template id="flyer">
　　　　<slot></slot>
　　　　<h2>hello slot</h2>
　　　　<slot name="header"></slot>
　　　　<h2>hello flyer</h2>
　　　　<slot name="footer"></slot>
　　</template>
8. 动态组件
　　<compontent :is="change"></compontent>
9. 通过shadow指令实现阴影效果
　　Vue.directive("shadow",function(val){
　　　　var _this = this;
　　　　var val = val || 30;
　　　　document.addEventListener("mousemove",function(){
　　　　var ev = event || window.event;
　　　　//console.log(ev.clientX,ev.clientY);
　　　　var changeX = ev.clientX/innerWidth;
　　　　var changeY = ev.clientY/innerHeight;
　　　　console.log(_this.el);
　　　　_this.el.style.boxShadow = val - val*2*changeX + "px " + (val - val*2*changeY) + "px "+ val + "px 0 black";
　　　})
　　})
10. vue1.0-路由
　　1. 引用路由
　　2. 声明路径
　　　　`<a v-link="{path:'/home'}">首页</a>
　　　　<a v-link="{path:'/news'}">新闻</a>`
　　3. 显示区域
　　　　<router-view></router-view>
　　4. 初始化
　　　　var app = Vue.extend();
　　　　// 初始化路由
　　　　var router = new VueRouter();
　　5. 绑定路由
　　　　// 绑定路由
　　　　router.map({
　　　　　　'home': {
　　　　　　　　component: {
　　　　　　　　　　template: "#home"
　　　　　　　　　　}
　　　　　　},
　　　　　　'news': {
　　　　　　　　component: {
　　　　　　　　　　template: "#news"
　　　　　　　　}
　　　　　　}
　　　　});
　　6. 启动路由
　　　　router.start(app,"#box");
　　7. 路由重定向
　　　　router.redirct({
　　　　　　"/": 'news'
　　　　})
　　　　//给予默认值
　　　　router.redirect({
　　　　　　'/':'lv',//地址 到哪
　　　　　　'/chuang':'lv'// 会重新定向
　　　　})
11. 路由嵌套
　　`<template id="home">
　　<h1>this is home</h1>
　　<a v-link="{path:'/home/web'}">前端</a>
　　<a v-link="{path:'/home/java'}">Java</a>
　　<router-view></router-view>
　　</template>`

　　通过subRoutes来嵌套
　　router.map({
　　　　"home": {
　　　　component:{
　　　　　　template: "#home"
　　　　},
　　　　subRoutes:{
　　　　　　"/web": {
　　　　　　component: {
　　　　　　　　template: "#web",
　　　　　　}
　　　　},
　　　　"/java": {
　　　　　　component: {
　　　　　　　　template: "#java"
　　　　　　　　}
　　　　　　}
　　　　}
　　　}
　　});
12. 路由传参
　　<a v-link="{path:'/home/web/2038?a=10000'}">前端</a>
　　/web/:id
　　通过方法可以获取到,可以通过子组件传参，到子组件进行处理问题
　　this.$route
　　this.$route.params
　　this.$route.query
　　直接读取要过滤一下
　　{{ $route | json }}