Vue习得

原创 进步的小菜鸟 随笔 vue 198阅读 2018-05-29 13:25:04 举报

第一次用vue开发项目的一些小小的收获。
1.window.scrollTo(0,0); //页面默认返回顶部
2.使用某个组件,先在<script>里面import引入该组件。再在export default的components里面注册。然后就可以当做标签使用。
3.import $ from 'jquery' //兼容$
4.export default里面常用的有name:'',data(){return{ }},created(){}, monted(){}, components:{}, methods:{}
5.console,log(this.$router)打印路由
6.vue的变量在settimeout内部效果失效的处理:
定义一个self暂存this。
setTimeout(function () {
self.loadState = false;
}, 3000)
7.<style src="../css/aboutUs.css" scoped></style> //scoped
8.vue-router传参和获取(query和params)
(1)query方式传参和接收参数
this.$router.push({
path:'/index',
query:{
getname:doc
}
})
接收参数:this.$route.query.getname //path和query对应,相当于get请求,页面跳转的时候,可以在地址栏看到请求参数
(2)params方式传参和接收参数
this.$router.push({
name:'',
params:{
getname:doc
}
})
接收参数:this.$route.params.getname //name和params对应,相当于post请求,参数不会再地址栏中显示
9.router-link传参和获取
传参:<router-link :to="{path:'/docDetail', query:{docId:data.id}}">
获取:getdocId = this.$route.query.docId;
10.success:(data) => {} //一定要箭头函数,不然会改变改变this指向
11.组件之间vm.$emit和$on传值
传递:vm.$emit('datatransform',{content:this.id})
获取:vm.$on('datatransform',(res)=>{ console.log(res); }
注:$on获取到的值并不能改变data里面的数据。
12.decodeURIComponent(this.$router.history.current.query.docsname); //处理接跳转后url带过来的参数里面的空格
13.遍历数组,在每个数组元素后加一个false(在v-for里面可以用三元运算把false替换成其他的)
let arr = [];
this.docTyps.forEach((val, key) => { //遍历数组
arr.push(val); //先放一个数组元素
if(key < this.docTyps.length - 1){
arr.push(false) //再放一个false
}
})
this.docTyps = arr;
14.vue实现addClass和removeClass效果
<ul class="top_bar">
<li class="top_cell"
v-for="cell in 5"
:class="{ 'active': cell === selected }" //cell === selected 的时候 class="active" 否则的话 class=""
@click="choose(cell)">
{{cell}}
</li>
</ul>
new Vue({
el:'.top_bar',
data:{
selected: null
},
methods:{
choose:function (index) {
this.selected = index
}
}
});
15.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复