写在最前面 心得：当看着资料学习新东西，有的点不懂，实在推进不下去的时候，不妨停下来，梳理自己不懂的点，搞懂后继续进行。比如我学习vue-element-admin，前期slot不懂，router的module不懂，getter不懂，一知半解往下学习，结果越学越迷糊 不通透。
1.noscript 当浏览器不支持脚本时展示的内容，可以理解为emptyView
2.渲染流程
graph TD
index.html:id=app --> main.js配置APP.vue:routerview,挂载到id=app处,路由配置View显示到APP.Vue的routerview处
3.nav是标签
-
ES6扩展：对象展开运算符...
-
mapState作用：可以辅助获取到多个state的值。目的，将多个state的值优雅的合并到外部
<template>
<div id="example">
<button @click="decrement">-</button>
{{count}}
{{dataCount}}
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data () {
return {
dataCount: this.$store.state.count //用data接收
}
},
computed:{
count(){
return this.$store.state.count //用computed接收
}
}
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
}
}
</script>
import { mapState } from 'vuex'
export default {
data () {
return {
str: '国籍',
dataCount: this.$store.state.count
}
},
computed: mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
}),
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
},
created () {
// 写个定时器，发现computed依旧保持了只要内部有相关属性发生改变不管是当前实例data中的改变，还是vuex中的值改变都会触发dom和值更新
setTimeout(() => {
this.str = '国家'
}, 1000)
}
}
</script>
//之前的computed
computed:{
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
........
}
//引入mapState辅助函数之后
computed:{
//原来的继续保留
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
......
//再维护vuex
...mapState({ //这里的...不是省略号了,是对象扩展符
count:'count'
})
}
6.vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $
7.插槽 slot，看代码理解
<navigation-link url="/profile"> Your Profile </navigation-link>
navigation-link 定义如下
<a v-bind:href="url" class="nav-link" > <slot></slot> </a>
<slot></slot>就会被navigation-link 标签内的内容替换掉，变成下面
<a v-bind:href="url" class="nav-link" > Your Profile </a>
假如，navigation-link 定义的模板中没有slot标签，则使用navigation-link时候，起始标签内的内容会被舍弃
8.每个应用将仅仅包含一个 store 实例
9.有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。（大白话就是store中的值要经过特殊处理，才是我们要用的，并且是通用的处理）,Vuex 允许我们在 store 中定义“getter”
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
const store = createStore({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
}
})
this.$store.getters.doneTodosCount
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
11.由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
注意moduleA里面的东西必须和store中的属性名一样
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = createStore({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
-
v-bind v-on v-bind：绑定属性 v-on:绑定事件
-
不显示element对应组件，待定？ vue cli 3.0，就不能用普通方式引入依赖了，尽量通过 vue ui引入，要不然可能有问题(有可能是webpack支持问题)
实际上是需要引入。 import 'element-ui/lib/theme-chalk/index.css'
14.component标签
<div id="app">
<component :is="who"></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let componentA={
template:`<div>I am componentA</div>`
}
let componentB={
template:`<div>I am componentB</div>`
}
let componentC={
template:`<div>I am componentC</div>`
}
let app = new Vue({
el: '#app',
data:{
who:'componentB'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods: {
changeComponent(){
if(this.who=="componentA"){
this.who="componentB"
}
else if(this.who=="componentB"){
this.who="componentC"
}else{
this.who="componentA"
}
}
},
})
</script>
</body>
