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>

<script>
//导入组件
import mainTabs from './mainTabs' //带点的是目录文件
import mainTabs from 'mainTabs' //不带点是系统组件
目录里面还有带@的，前期定义目录

导出的另一种写法
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>

<style scoped>
>>> 子属性
</style>

检索数组
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里面，减少开发复杂度

el: '#app',//div中的id

$emit 调用父组件事件
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>

<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

v-model表单默认值
<input v-model="searchText">
它等价于
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
它等价于组件
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>

---------------------
插槽
<slot></slot>

变量名3种风格
PascalCase 文件名 组件名
camelCase 属性名
kebab-case dom结构名

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

副作用 (触发组件外的影响)

el
全局感知 (要求组件以外的知识)

name
parent
组件类型 (更改组件的类型)

functional
模板修改器 (改变模板的编译方式)

delimiters
comments
模板依赖 (模板内使用的资源)

components
directives
filters
组合 (向选项里合并属性)

extends
mixins
接口 (组件的接口)

inheritAttrs
model
props/propsData
本地状态 (本地的响应式属性)

data
computed
事件 (通过响应式事件触发的回调)

watch
生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
非响应式的属性 (不依赖响应系统的实例属性)

methods
渲染 (组件输出的声明式描述)

template/render
renderError

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

定义 (提供组件的选项)

is
列表渲染 (创建多个变化的相同元素)

v-for
条件渲染 (元素是否渲染/显示)

v-if
v-else-if
v-else
v-show
v-cloak
渲染方式 (改变元素的渲染方式)

v-pre
v-once
全局感知 (需要超越组件的知识)

id
唯一的特性 (需要唯一值的特性)

ref
key
slot
双向绑定 (把绑定和事件结合起来)

v-model
其它特性 (所有普通的绑定或未绑定的特性)

事件 (组件事件监听器)

v-on
内容 (覆写元素的内容)

v-html
v-text

------------------------------
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}

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