<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) 截取路径routeaxios 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')`
})
}
}
--------------------------
---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：
生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！
新博客 https://www.VuejsDev.com 用于梳理知识点
