vueCode 常用代码总结 20190116

<template>
props 传参
<in-body :mbx="['首页','','']">

props 代码使用
<BreadcrumbItem>{{mbx[0]}}</BreadcrumbItem>
<BreadcrumbItem v-if="mbx[1]!=''">{{mbx[1]}}</BreadcrumbItem>
<BreadcrumbItem v-if="mbx[2]!=''">{{mbx[2]}}</BreadcrumbItem>

components 组件调用（组件调用3部曲 1导入2放入components3写在template）
<in-body />

data参数调用
{{ msg }}

computed计算属性调用和data一样
{{ msg }}

methods调用
:animated="false" @on-click="tabOnClick" @on-tab-remove="handleTabRemove" :value="mainTabsActiveName"
@为方法调用 :为属性调用

组件的id用的是ref
<Menu theme="dark" width="auto" :active-name="myActive" ref="myActive" :open-names="['helper','1','2','3']">
方法里面的调用组件的方法是this.$refs
this.$refs.myActive.updateActiveName()

v-for 循环写法
<TabPane v-for="tab in mainTabs" :name="tab.name" :key="tab.name" :label="tab.name" closable></TabPane>

按钮的click事件
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>

</template>

导出的另一种写法
module.exports = {
test1Get:test1Get
}

export default {
name:"example"
,props:{
//组件外接参数
mbx:Array
}
,components:{
//导入的组件
mainTabs
}
,data () {
return {
//属性
example:""
}
},
computed: {
//计算属性
example:"",
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
}
},
methods: {
//方法
routeHandle (route) {
}
}
,watch: {
//观察
$route: 'routeHandle'
}
,created () {
//页面加载
}
,mounted: function () {
//又一个页面加载方法
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

}
</script>

检索数组
let tab = this.mainTabs.filter(item => item.name === route.name)[0]
数组拼接 push也行
this.mainTabs = this.mainTabs.concat(tab)

session数据存储
sessionStorage.setItem("isLogin",null)
sessionStorage.setItem("isLogin","ok")

router操作
this.$router.push("/login")
this.$router.currentRoute.name
this.$router.push({name:name})

Promise操作 .then

style的js写法
<Layout :style="{'z-index':'100',padding: '0',marginLeft: '200px'}">

组件合计$refs
this.$refs.tabs.activeKey
this.$refs[name].validate((valid) => { //可以用[]来改用变量模式

this.$合集
this.$data.activeKey
this.$store.state.common.mainTabsActiveName
this.$store.state.isLoginState
this.$store.commit('isLogin',"ok")
this.$store.commit('common/updateMainTabsActiveName', val)
this.$Message.error('数据有误，请从新提交!');
this.$Message.info('退出系统');
this.$Message.success('提交成功!')
this.$nextTick(()=>{ //事件回调一般是等页面加载后调用
this.$route.path.slice(1) 截取路径route

axios ajax 异步操作
this.$http.get('/news')
.then((response) => {
this.data3 = response.data;
})
.catch(function (error) {
console.log(error);
});

数组forEach循环
pidData2.forEach(el => {
delete el.children //delete 删除数组数组长度不变特别适合索引用
})

数组push
arr.push(el)

for循环
for (let index in arr) {
temp_array.push(arr[index]);
}

随机数
Math.random()

----------------------------------
main.js
//main.js引入均为全局引入
import 'iview/dist/styles/iview.css' //引入js
import request from './utils/request' //引入常规js

添加vue全局属性
Vue.prototype.$http = request

路由前置导航
router.beforeEach((to, from, next) => {
路由导航内跳转
next("/main")

路由中的元数据
to.meta.requireAuth

仓库数据
store.state.isLoginState

仓库提交
store.commit('isLogin',sessionStorage.getItem("isLogin"))

---------------------------------------

router.js

//mode:"history",//默认是# history 是/

导出router
export default new Router({

toutes是一个数组
routes: []

name路由名称可搜索导航
path路由路径可搜索导航
component 加载页面的组件
meta 元数据
children 子节点
{
name:"login"
,path:"/login"
,component: (resolve) => require(['@/components/login'], resolve)
,meta: {
// 添加该字段，表示进入这个路由是需要登录的
requireAuth: true
}
,children:[]
}

---------------------------------------
Vuex store

//创建仓库
const store = new Vuex.Store({

仓库数据
state: {
// 放置初始状态 app启动的时候的全局的初始值
isLoginState: "no"
}

同步方法mutations
,mutations: {
isLogin(state,str) {
state.isLoginState = str;
}
}

同步方法调用
this.$store.commit('common/updateMainTabs', val)

store modules组件
,modules:{
common
}

Getter | store的计算属性
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}

store 异步方法 actions
actions: {
increment (context) {
context.commit('increment')
}
}

异步方法调用
store.dispatch('increment')

//说明异步方法一般都是读取数据，可以不放在store里面，减少开发复杂度

vueCode 常用代码总结 20190116

猜你喜欢