进阶Vue.js第一讲
1，定制私有指令
<div id="app">
<p v-fontSize="50">域名都过期了，狗屁玩意儿</p>
<!-- <input type="text" v-color="'red'"> -->
</div>
<script>
var app=new Vue({
el:"#app",
directives:{
'fontWeight':{
bind:function(el,binding){
el.style.color=binding.value
}
},
'fontSize':function(el,binding){ //注意：这个function等同于把代码写到了bind和update中去
el.style.color=binding.value
}
}
});
</script>
2, 动画-使用钩子函数模拟小球半场动画
<div id="app">
<input type="button" value="添加到购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-if="flag"></div>
</transition>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
flag:false
},
methods:{
//动画钩子函数的第一个函数，el表示要执行动画的那个dom元素，是个原生的js dom对象
//大家可以认为，el是通过document.getElementById的方式获取到的原生js dom对象
beforeEnter(el){
//beforeEnter表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中设置元素开始动画之前
//的起始样式 设置动画之前的起始位置
el.style.transform="translate(0,0)"
},
enter(el,done){
//这句话没有实际的作用，但是如果不写，出不来动画效果
//可以认为el.offsetWidth会强制动画刷新
el.offsetWidth
//enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform="translate(150px,450px)"
el.style.transition="all 1s ease"
//这里的done，其实就是afterEnter这个函数，也就是说，done是afterEnter函数的引用
done()
},
afterEnter(el){
//动画完成之后，会调用afterEnter函数
this.flag=!this.flag
}
}
});
</script>
3, 父组件向子组件传值
<div id="app">
<!-- 父组件可以在引用子组件的时候，通过属性绑定v-bind的形式，把需要传递给子组件的数据，以属性绑定的形式
传递到子组件内部，供子组件使用 -->
<test v-bind:parentmsg="msg"></test>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"父组件的data"
},
components:{
// 子组件中默认无法访问到父组件的data上的数据和methods中的方法
test:{
data(){ //子组件的data数据并不是通过父组件传递过来的，而是子组件自身私有的，比如说
//子组件通过ajax，请求回来的数据，都可以放在data身上
//data的数据可读可写
return {
title:"123",
content:"lala"
}
},
template:'<h3>这是子组件---{{parentmsg}}</h3>',
// 组件中的所有props的数据，都是通过父组件传递给子组件的
//props的数据都是只可读，无法重新赋值
props:['parentmsg'] //把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
}
}
});
</script>
4, 跑马灯效果
<div id="app">
<button v-on:click="start">浪起来</button>
<button v-on:click="stop">低调</button>
<p> {{message}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"猥琐发育，别浪~~！",
dingshiqi:null
},
methods:{
start:function(){
var _this=this
if(this.dingshiqi!==null){
return
}
this.dingshiqi=setInterval(function(){
var first=_this.message.substring(0,1)
var last=_this.message.substring(1)
_this.message=last+first
},400)
},
stop:function(){
clearInterval(this.dingshiqi)
this.dingshiqi=null
}
}
});
</script>
5, 品牌列表案例
<div id="app">
<!-- panel面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3>添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" v-on:click="add" value="添加" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>cTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" v-bind:key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.cTime}}</td>
<!-- vue中click后面不加小括号是可以的，加小括号也可以，在小括号里传参 -->
<td><a v-on:click="del(item.id)" style="cursor:pointer">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"奔驰",cTime:new Date()},
{id:2,name:"宝马",cTime:new Date()},
]
},
methods:{
add:function(){
var car={id:this.id,name:this.name,cTime:new Date()}
this.list.push(car)
this.id=""
this.name=""
},
del(id){
//alert(id); 第一种方法
//some()方法，遍历数组的每一项，若其中一项为 true，则返回true；
// this.list.some((item,i)=>{
// if(item.id==id){
// //splice() 方法可删除数组从 index 处开始的零个或多个元素
// this.list.splice(i,1);
// //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
// return true;
// }
//})
//第二种方法
//findIndex是最新出来的一个方法，是得到寻找条件的索引值
var index=this.list.findIndex(i=>{
if(i.id==id){
return true;
}
})
this.list.splice(index,1);
}
}
});
</script>
6, 全局配置数据接口的根域名
<div id="app">
<input type="button" value="get请求" @click="getInfo">
</div>
<script>
//如果我们配置了请求的数据接口的根域名，则在每次单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带/
//否则不会启用根路径做拼接。
Vue.http.option.root='http://vue.studyit.io/';
new Vue({
el:"#app",
methods:{
getInfo(){ //发送get请求
//本来请求路径是http://vue.studyit.io/api/getList，现在把根域名提取出来作为全局配置
//然后再get中和接口拼接就可以了 全局配置根域名+接口地址
// this.$http.get('http://vue.studyit.io/api/getList').then(function(result){
// console.log(result)
// })
this.$http.get('api/getList').then(function(result){
console.log(result)
})
}
}
});
</script>
7, 全局配置emulateJSON选项
<!-- 给列表里添加一条信息（只有一个name列） -->
<div id="app">
<p>{{name}}</p>
姓名： <input type="text"v-model="name" />
<input type="button" value="post请求" @click="postInfo">
</div>
<script>
//全局启用emulateJSON选项
Vue.http.options.emulateJSON=true;
new Vue({
el:"#app",
data:{
name:"sdf"
},
methods:{
postInfo(){ //发送post请求
this.$http.post('api/getList',{name:this.name}).then(result=>{
if(result.body.status===0){
//成功了
//调用getList刷新列表（这里没有）
}
})
}
}
});
</script>
8, 生命周期函数-组件创建期间的四个钩子函数
<div id="app">
<input type="button" value="改变msg" @click="change">
<p id="h3">{{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"啦啦啦"
},
methods:{
show(){
//alert("执行了show方法");
},
change(){
this.msg="No"
}
},
beforeCreate(){//这是我们遇到的第一个生命周期函数，表示实例在完全创建出来之前，会执行它
//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化。
this.show()
},
created(){ //这是遇到的第二个生命周期函数
console.log(this.msg)
this.show()
//在created中，data和methods都已经被初始化好了
//如果要调用methods中的方法或者操作data中的数据，最早只能在created中进行操作
},
beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
//console.log( document.getElementById("h3").innerText)
//在beforMount执行的时候页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted(){ //这是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
//console.log( document.getElementById("h3").innerText)
//注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了
//此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
},
//接下来是运行中的两个事件
beforeUpdate(){ //这时候表示我们的界面还没有被更新
// console.log("页面上的元素是"+ document.getElementById("h3").innerText)
// console.log("data中的msg的数据是"+this.msg)
//得出结论：当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
},
updated(){
console.log("页面上的元素是"+ document.getElementById("h3").innerText)
console.log("data中的msg的数据是"+this.msg)
//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
},
beforeDestroy(){
//当执行beforeDestroy钩子函数时，vue实例就已经从运行阶段进入到了销毁阶段
//当执行beforeDestroy时，实例身上所有的data和所有的methods以及过滤器，指令等等都处于可用状态
//此时，还没有真正执行销毁的过程
},
destroyed(){
//当执行destroyed函数时，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器等等全部不可用了
}
});
</script>
9, 使用第三方animate.css类库实现动画
首先导入css包
<script src="../code/lib/vue.min.js"></script>
<link rel="stylesheet" href="../code/lib/animate.css">
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个标题</h3>
</transition>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
flag:false
}
});
</script>
10, 使用过渡类名实现动画
<style>
/*
v-enter，这是一个时间点，是进入之前，元素的起始状态，此时还没有进入
v-leave-to，这是一个时间点，是动画离开之后，离开的终止状态，此时，元素动画已经结束了
*/
.v-enter,
.v-leave-to{
opacity: 0;/*透明度*/
/* transform: translateX(150px);这个是设置h3是从右向左滑动出现的 */
}
/*
v-enter-active 入场动画的时间段
v-leave-active 离场动画的时间段
*/
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
.my-enter,
.my-leave-to{
opacity: 0;/*透明度*/
transform: translateY(150px);/*这个是设置h3是从右向左滑动出现的 */
}
/*
v-enter-active 入场动画的时间段
v-leave-active 离场动画的时间段
*/
.my-enter-active,
.my-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 需求：点击按钮让h3显示，再点击让h3隐藏 -->
<input type="button" value="toggle" @click="flag=!flag">
<!-- transition元素 是Vue官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition><br>
<!-- 使用transition包裹住要动画的元素，然后在css中写两个样式实现动画
类名是v-enter,v-leave-to...等等，都是v-开头的，现在如果想修改v-前缀也可以
-->
<!-- 比如说再添加一个h3 ，给transition添加一个name属性，然后css的v-前缀就可以改成my-了-->
<input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h3 v-if="flag2">这是一个H3</h3>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag:false,
flag2:false
}
});
</script>
</body>
来源：https://blog.csdn.net/weixin_44001965/article/details/98752217