1.vue中element-ui实现的slot分发和route路由
<!--单个激活 并以 index 作为 path 进行路由跳转-->
<el-menu unique-opened router v-show="!collapsed">
<!--动态路由到子组件 将不可见的路径隐藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<!--用el ui 的title进行slot分发菜单-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name来配置菜单栏和子菜单栏的名称-->
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
slot分发其实就是父组件需要在子组件内放一些DOM，它就是负责这些DOM是否显示，在哪个地方显示的。
具名slot
<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。
使用：（1）父组件要在分发的标签中添加属性"slot=name名"
（2）子组件在对应分发位置上的slot标签添加属性"name=name名"
代码如下：
<body>
<div id="app">
<child>
<span slot="one">123456</span>
<span slot="two">abcdef</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot name='two'></slot>我是子组件<slot name='one'></slot></div>"
}
}
});
</script>
</body>
2.vue中设置管道
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
如果你想获取一个对象的所有属性,，甚至包括不可枚举的，请查看Object.getOwnPropertyNames。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
3.反向代理调用api
env: require('./dev.env'),
port: 8092,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/bdc-xapi': {
target: '',
changeOrigin: true,
pathRewrite: {
'^/bdc-xapi': '/'
}
},
},
4.token机制完成登录状态保持/身份认证
https://www.jianshu.com/p/8d28e60af440
5.nextTick
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
this.$nextTick作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom。
6.element-ui组件中方法调用问题
<el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>
@keyup.enter.native多加了个native
关于keyup.enter.native
https://blog.csdn.net/fifteen718/article/details/80359844
注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native
!!当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent ;
即@submit.native.prevent是用来阻止默认行为的
7.el-upload组件使用
<el-upload
class="avatar-uploader"
:http-request="handleGiftImgUpload"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="
(res, file) => {
return onUploadSuccess(res, file)
}
"
>
<img v-if="bindForm.urlPic !== ''" :src="bindForm.urlPic" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
if (!isJPG) {
this.$message.error('只能上传图片格式!')
}
return isJPG
},
handleGiftImgUpload(fileObj) {
const formData = new FormData()
formData.append('file', fileObj.file)
return giftManagerUpdateImage(formData)//接口名字
},
onUploadSuccess(res) {
this.bindForm.urlPic = res.data
},
8. vue中backgroundImage的写法
<div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
https://blog.csdn.net/qq_35393869/article/details/80333564
9. vue的生命周期
beforecreate : el 和 data 并未初始化。这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作（可以在这加个loading事件 ）
created ：完成了 data 数据的初始化，el没有。（在这结束loading，还做一些初始化，实现函数自执行 ）
beforeMount：完成了 el 和 data 初始化。在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
mounted ：完成挂载。数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
（在这发起后端请求，拿回数据，配合路由钩子做一些事情）
beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
beforeDestroy： 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等(比如你确认删除XX吗?)
destroyed ：当前组件已被删除，清空相关内容
10.vue中绑定class的方法
https://blog.csdn.net/qq_38093702/article/details/81205370
绑定style的方法
<img :src="logo" :style="{'display':isShowImg==true?'block':'none'}" />
11.调接口时记住做异常处理判断
12.vue的路由传参，子页面刷新保证参数不丢失
1.使用query:
this.$router.push({ path: '/NewsDetail', query: { newsUrl: url } })
2.在路由配置页面配置好，然后可以用params方法传
routes: [ { path: '/list/:id', name: 'list' } ]
this.$router.push({name:'list', params:{id: id}});
13. ...mapGetters(vuex)
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
14. checkbox：true-label
true-label,false-label规定v-modle的值。
如true-label="a",false-label="b"。 v-modle="data"
当选中时data为a，当没选中时data为b
15.微信小程序和vue的双向数据绑定有什么区别
http://www.cnblogs.com/zhangruiqi/p/9412948.html
以上内容仅供参考，有错误的地方还请多多指教
网友评论