第三章——开始简写
安装脚手架
npm i -g @vue/cli
vue创建脚手架
vue create 项目名称
cd 项目名称
npm run sever
http://localhost:8080/
Vue：核心+模板解析器(解析template)
一、render函数
利用模块化的引用方法引用vue
vue包中的package.json中的module控制ES6引入的哪个具体的js文件
render函数有返回值
没有用到this就可以用箭头函数
1、vue.js完整版
核心+模板解析器(解析template)
2、vue.runtime.xxx.js没有模板解析器，需使用render函数接收到的createElement函数去接收指定内容
new Vue({
render:h => h(App)
})
二、修改配置文件
输出脚手架配置文件命令：vue inspect > output.js
创建vue.config.js自定义配置
common暴露：
module.exports = {
pages:{
index:{
entry:'src/main.js'
}
},
lintOnSave:false //关闭语法检查
}
三、props
在App.vue写入标签属性
<Student name="李四" :age="18"/> 利用v-bind
在组件
export default {
//props:['name','sex'] //简单接收
/*接收同时对数据类型进行限制
props:{
name:String,
age:Number
}
}*/
//接收的同时对数据进行类型限制+默认值指定+必要性限制
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
default:0
}
}
}
四、mixin混入
mixins.js
功能：可以把多个组件共用的配置提取成一个混入对象
//定义混合
{
data(){
...
},
methods:{
...
}
}
//使用混入
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
五、插件
plugins.js
在main.js中使用插件
//引入插件
import plugins from './plugins'
//使用插件
Vue.use(plugins)
用于增强Vue
包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件：
对象.install = function(Vue,options) {
...
}
scoped样式
让样式在局部生效，防止冲突
<style scoped>
六、浏览器本地存储
本地存储localStorage：
将会话存储中的sessionStorage全部替换为localStorage
会话存储sessionStorage：
<body>
<h2>localStorage</h2>
<button οnclick="saveData()">
点我保存
</button>
<button οnclick="readData()">
点我读取
</button>
<button οnclick="deleteData()">
点我删除
</button>
<button οnclick="deleteAllData()">
点我清空
</button>
<script type="text/javascript">
let p = {name:'张三',age:18}
function saveData(){
sessionStorage.setItem('msg','hello')
sessionStorage.setItem('msg2',666)
sessionStorage.setItem('person',JSON.stringify(p))
}
function saveData(){
console.log(sessionStorage.getItem('msg'))
console.log(sessionStorage.getItem('msg2'))
const result = sessionStorage.getItem('person')
console.log(JSON.parse(result))
}
function deleteData(){
sessionStorage.removeItem('msg2')
}
function deleteAllData(){
sessionStorage.clear
}
</script>
</body>
七、组件自定义事件_绑定
在APP.vue中
通过父组件给子组件传递函数类型的props实现
<School :getSchoolName="getStudentName" />
通过父组件给子组件绑定一个自定义事件实现： 子给付传递数据(使用@或v-on)
<Student @yourname.once="getStudentName" />
通过父组件给子组件绑定一个自定义事件实现： 子给付传递数据(使用ref)
<Student ref="student"/>
ref写法使用mounted钩子
<script>
export default{
name:"App",
components:{School,Student},
data(){...},
methonds:{
getSchoolName(name){
console.log('App收到了学校名：',name)
},
getStudentName(name,...params){
console.log('App收到了学生名')
}
},
mounted(){
this.$refs.student.$on('yourname',this.getStudentName)//绑定自定义事件
this.$refs.student.$once('yourname',this.getStudentName)//绑定自定义事件(一次性)
}
}
</script>
八、在组件Student.vue中解绑
<button @click="sendStudentName">
把学生名给App
</button>
<script>
export default{
name:'Student',
data({
...
})
},
methods:{
sendStudentName(){
//触发Student组件实例身上的yourname事件
this.$emit('yourname',this.name,666,888,999)
this.$emit('yourname')
},
unbind(){
this.$off('yourname')//解绑一个自定义事件
this.$off(['yourname','yourname'])//解绑多个自定义事件
this.$off()//解绑所有自定义事件
}
}
</script>
九、组件的自定义事件总结：
适用于子组件===>父组件
在组件后写原生标签属性需加上.native
<Student @click.native="dianwo()">
点我
</Student>
触发自定义事件：this.$emit('atguigu',数据)
注意：通过this.$refs.xxx.$on('yourname',回调)绑定自定义事件，回调要么配置在methods中，要么用箭头函数，否则this指向该组件而不指向vm
十、全局事件总线（GlobalEventBus）：任意组件间通信
1、安装全局事件总线
new Vue({
.....
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
.....
})
2、使用事件总线
接收数据：A组件想接收数据，则再A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods(){
demo(data){
.....}
}
...
mounted(){
this.$bus.$on('xxx',this.demo)
},
beforeDestroy(){
this.$bus.$off('xxx')
}
提供数据：this.$bus.$emit('xxxx',数据)
3、最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
十一、消息订阅与发布(pubsub)
导入库npm i pubsub.js
接收数据：
<script>
//引入
import pubsub from 'pubsub-js'
export default {
name:'School',
data(){
return{
....
}
},
mounted(){
this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{
console.log('有人发布了xxx消息，xxx消息的回调执行了',msgName,data)
})
},
beforeDestroy(){
pubsub.unsubscribe(this.pubId)
}
}
</script>
提供数据：
pubsub.publish('xxx',数据)
随后最好在beforeDestroy钩子中取消订阅
十二、nextTick
语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行器指定的回调
当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
十三、Vue过度与动画
1、使用
元素进入的样式：
v-enter: 进入的起点
v-enter-active:进入过程中
v-enter-to：进入的终点
2.元素离开的样式：
v-leave:离开的起点
v-leave-active:离开的过程中
v-leave-to：离开的终点
2、使用 transition包裹要过度的元素并配置name属性
3、多个元素过度使用 <transition-group>，且指定key值
<transition-group name="hello" appear>
<h1 v-show="isShow" key="1">你好啊</h1>
<h1 v-show="isShow" key="2">你也好啊</h1>
</transition-group>
使用animate.css
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group
name="animate__animated animate__bounce"
appear
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp">
<h1 v-show="isShow" key="1">你好啊</h1>
<h1 v-show="isShow" key="2">你也好啊</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default{
name:'Test',
data() {
return {
isShow:true
}
},
}
</script>
<style scoped>
h1{
background-color:skyblue ;
transition: 0.5s linear;
}
</style>
十四、配置代理
方法一：
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
1、优点：配置简单，请求资源直接发给前端即可
2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3.工作方式：若按照上述配置代理（优先匹配前端资源）
方法二：
module.exports = {
devServer:{
proxy:{
'/api1':{
//匹配所有以'/api1'开头的请求路径
target:'http://localhost:5000',
changeOrigin:true,
pathRewrite:{
'^/api1s:':''}
},
'/api2':{
//匹配所有以'/api1'开头的请求路径
target:'http://localhost:5001',
changeOrigin:true,
pathRewrite:{
'^/api2:':''}
},
}
}
}
1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2、缺点：略微繁琐
十五、vue-resource
npm i vue-resource
import vueResource from 'vue-resource'
Vue.use(vueResource)