vue基础
1.vue中双括号的内容不支持语句但是可以支持表达式
<!-- error -->
<span>{{console.log('hahah')}}</span>
<!-- 反转字符串 -->
<span>{{message.split('').reverse().join('')}}</span>
2.v-bind加了之后就会把字符串解析成变量
v-bind:id="message"//这里的message不是字符串而是一个data中的变量的名字。
3.在双大括号中是不能使用语句的，所以vue提供了在模板中使用语句的方式：v-if,v-else；
4.插槽
插槽是传递复杂内容的一种方式。插槽决定了子组件中的标签插在子组件模板的什么位置。
5.计算属性
计算属性，可以看成data中的数据，只不过这个数据不是直接写在data中的而是通过data中的属性间接计算得到的，这个属性和data中的属性用起来没有什么区别(我暂时是这样理解的)都可以在模板中通过双大括号来使用，也可以在methods中通过this引用。与这个特点很相似的还有父子组件通信的props中的属性，也是这样使用的。示例代码如下：
computed:{
fullName: function(){
return this.firstName+' '+this.lastName;
}
}
6.侦听属性：就是对data中的数据或者props中的数据，或者计算属性进行侦听，如果变化，就执行某种操作。示例代码如下：
watch:{
message:function(){
console.log('i am change')
}
}
7.几个不熟悉的内置指令
<!-- 显示的内容不是哈哈，而是data中的message -->
<span v-text="message">哈哈</span>
<!-- v-show的值是一个boolean类型,决定这个标签是不是显示 -->
<span v-show="true">我出现了</span>
<!-- 双向绑定 -->
<input v-model="message">
<!-- 只会加载一次,之后message变化,这个span中的内容都不会再变 -->
<span v-once>{{message}}</span>
8.通过provide()和injecte可以实现子孙组件传值。
//这两个属性都是与data同级别的
inject:['myGlobal']//写在孙子组件
provide(){
return {
myGlobal:this
}
}//写在爷组件
vue生态
1.为什么要使用vuex？
vue的单向数据流问题
//插入img
当有多个组件共用某些属性的时候，这些属性通常是放在这些组件共同的父组件上，然后通过组件之间层层传递来拿到想要的值，或者通过provide对象和inject对象来传递数据。但这样的方法仅仅适用于小型的应用开发项目。对于复杂的状态管理
2.vuex的属性有什么，如何在vue中使用vuex？
在其他组件中共享main.js中的vuex的数据
//main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.config.productionTip = false
const store = new Vuex.Store({
state:{
count:115,
major:'信安',
school:'天津理工大学'
},
mutations:{
inc(state){
state.count++
}
},
actions:{
addTwo({state}){
state.count+=2
}
},
//getters相当于计算属性computed
getters:{
major(state){
return state.school + "-" +state.major;
}
}
})
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
//APP.vue
<template>
<div id="app">
<div>{{count}}</div>
<div>
<button @click="$store.commit('inc')">mutations</button>
</div>
<div>
<button @click="$store.dispatch('addTwo')">actions</button>
</div>
<div>
{{$store.getters.major}}
</div>
</div>
</template>
<script>
export default {
name: 'App',
components:{
},
provide:{
},
data(){
return {
componentName:'App.vue'
}
},
computed:{
count(){
return this.$store.state.count
}
},
}
</script>
3.vuex核心概念和底层实现原理
State：提供一个响应式的数据
Getters：借助vue的computed属性来实现缓存
Mutations:更改state方法
Actions:触发mutations方法
Module：Vue.set动态添加state到响应式数据
建议：对每一个组件开启一个命名空间；模块之间的嵌套不要太深
4.vue Router的使用场景
多页面应用访问不同的url就会重新加载页面，单页面应用就不会出现这个问题，所以用户体验比较好。
他的缺点是不利于搜索引擎优化（用服务端渲染解决）而且首屏渲染时间长（用预渲染解决）
5.vue Router解决的问题
- vur Router的作用就是监听不同url的变化，并在变化前后执行相应的逻辑操作
- 不同的url对应不同的组件
- 提供多种方式改变url的API（url的改变不能导致浏览器的刷新）
6.路由有两种模式：Hash和History模式
Hash模式不支持锚点
History模式需要后端配合，IE9不兼容（解决方案是当路由变化的时候强制刷新）
antd-vue-pro实战总结
如何实现按需加载antd的组件
//babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
// 按需引入antd
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
};
//vue.config.js（间接配置webpack）
module.exports={
css:{
loaderOptions:{
less:{
javascriptEnabled:true
}
}
}
}
//main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import {Button,Input} from "ant-design-vue"//直接这样引入就行，可以一次引入多个组件。同时引入这些组件的css/less文件
Vue.config.productionTip = false;
Vue.use(Button)//使用
Vue.use(Input)//使用
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
vue的目录结构中大的组件（比如两个不同的页面）就放在views文件夹下。小的组件比如头部或者侧边组件就放在components文件夹下。
