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 }}