脚手架
脚手架文件结构
- node_modules
- public
- favicon.ico 页签图标
- index.html 主页面
- src
- assets 存放静态资源
- logo.png
- component 存放组件
- HelloWorld.vue
- App.vue 汇总所有组件
- main.js
- assets 存放静态资源
- .gitignore git版本管制忽略的配置
- babel.config.js babel配置文件
- package.json 应用包配置文件
- README.md 应用描述文件
- package-lock.json 包版本控制文件
不同版本的Vue
vue.js是完整版的Vue,包含核心功能+模板解析器
vue.runtime.main.js是运行版的Vue,只包含核心功能,没有模板解析器
因为vue.runtime.main.js没有模板解析器,所以不能使用template配置项,需要使用render函数收到createElement函数去指定其具体内容
vue.config.js配置文件
使用vue inspect >output.js可以查看到Vue脚手架的默认配置
使用vue.config.js可以堆脚手架进行个性化定制。
ref属性
用来给元素或子组件注册引用信息(id)
应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象
使用方式:<标签名 ref="XXX"><标签名/>
获取:this.$refs.XXX
props配置项
让组件接受外部传过来的数据
- 传递数据:
< Demo name="XXX"/>
- 接受数据
props:['name']
或props:{ name:String(限制接受类型) }
或props:{ name:{ type:String required:true(必要性) default:'XX'(默认值) } }
props是只读的,Vue底层会监测堆props的修改,如果进行了修改,就会发出警告。如果业务需求的确要修改,可以先复制props的内容到data中再修改data中的数据
mixin配置项
可以把多个组件共用的配置提取成一个混入对象
第一步:定义
{
data(){xxx}
methods:{xxx}
}
第二部:使用
全局汇入:Vue.mixin(xxx)
局部混入:mixins:['xxx']
插件
用于增强Vue
包含install方法的一个对象,install的第一个参数是Vue,第二个及以后的参数是插件使用者床底的数据
定义插件:对象.install=function(Vue,options){
Vue.filter(…)(添加全局过滤器)
…
}
使用插在这里插入图片描述
件:Vue.use()
scoped样式
让样式在局部生效,防止冲突
< style scoped>
组件化编码流程
- 组件化编码流程
- 拆分静态组件:组件要按照功能点拆分,命名不啊哟与html元素冲突
- 实现动态组件:考虑好数据的存放 位置,数据是一个组件在用还是一些组件在用
- 一个组件在用:放在组件自身即可
- 一些组件在用:放在他们共同的父组件上(状态提升)
- 实现交互:从绑定事件开始
- props适用于:
- 父组件==>子组件通信
- 子组件==>父组件通信(要求父组件献给子组件一个函数)
- 使用 v-model时要切记:v-model绑定的值是不能props传过来的值,因为props时不可以修改的
- props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做
webStorage
- 存储内容大小一般支持5MB左右(不同浏览器可能不一样)
- 浏览器通过
window.sessionStorage和window.localStorage
属性来实现本地存储机制。 - 相关API
xxxxxStorage.setItem('key','value')
;接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值xxxxxStorage.getItem('key')
;接受一个键名最为参数,返回键名对应的值xxxxxStorage.removeItem('key')
;接受一个键名作为参数,并把该键名从存储中删除xxxxxStorage。clear()
;清空存储中的所有数据
- 备注
SessionStorage存储的内容会随着浏览器的窗口关闭而消失
LocalStorage存储的内容需要手动清除才会消失
xxxxxStorage.getItem()
如果对应的value获取不到,则会返回null
JSON.parse(null)
的结果依然时null
组件自定义事件
-
一种组件间通信方式,适用于:子组件==>父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件回调在A中)
-
绑定自定义事件:
-
第一种方式,在父组件中:
<Demo @xxx="yyy" />
或<Demo v-on:xxx="yyy"/>
-
第二种方式,在父组件中:
<Demo ref="demo"> ······· mounted(){ this.$ refs.xxx. $on('xxx',this.yyy) }
-
若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法
-
-
触发自定义事件:
this.$emit.('xxx',数据)
-
解绑自定义事件
this.$off('xxx')
-
组件上也可以绑定原生DOM事件,需要使用
native
修饰符。 -
注意:通过
this.$refs.xxx.$on.('xxx',回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数 ,否则this指向会出现问题。
全局事件总线
-
任意组件间通信
-
安装全局事件总线
new Vue({ ------- beforeCreate(){ Vue.prototype.$bus = this }, ------- })
-
使用事件总线
-
接收数据:A组件想要接受数据则在A组件中给
$bus
绑定自定义事件,事件的回调留在A组件自身methods(){ demo(data){------} } ------ mounted(){ this. $bus. $on('xxx',this.demo)}
-
提供数据:
this.$bus.$emit('xxx',this.demo)
-
-
最好在
beforeDestroy
函数中,使用$off
解绑当前组件所用到的事件。
消息的订阅与发布
- 一种组件间通信的方式,适用于任意组件间通信
- 使用步骤:
-
安装pubsub:
npm i pubsub-js
-
引入:
import pubsub from 'pubsub-js'
-
接受数据:A组件想要接受数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){ demo(data) {------} } ------ mounted(){ this.pid=pubsub.subscribe('xxx',this.demo) //订阅消息 }
-
提供数据:
pubsub.publish.('xxx',数据)
-
最好在beforeDestroy函数中,使用
Pubsub.unsubscribe(pid)
取消订阅
-
$nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 什么时候使用:当数据改变后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
Vue中的过渡与动画效果
- 在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
- v-enter-active进入 v-leave-active离开
- 写法:
-
准备好样式:
- 元素进入样式
-v-enter
:进入的起点
-v-enter-active
:进入过程中
-v-enter-to
:进入的终点 - 元素离开的样式
v-leave
:离开的起点v-leave-active
:离开过程中v-leave-to
:离开的终点
- 元素进入样式
-
使用
<transiton>
包裹要过渡的元素,并配置name属性:<transiton name='xxx'> <h1 v-show="isShow">TEXT</h1> </transiton>
- 备注:若有多个元素需要过渡,则需要使用
<transiton-group>
,并且每个元素都需要指定key
值。
-
Vue脚手架配置代理
-
在vue.config.js中添加如下配置:
devServe:{ proxy:"http://localhost:5000" }
- 优点:配置简单,请求资源时直接发给前端即可
- 缺点:不能配置多个代理,不能灵活控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求就会发给服务器(优先匹配前端资源)
-
编写Vue.config.js配置具体代理规则
module.exports = { devServer:{ proxy:{ '/api1':{ //匹配所有以/api1开头的请求路径 target:'http://localhost:5000', //代理目标的基础路径 changeOrigin:true, pathRewrite:{'^/api1:''} }, '/api2':{ //匹配所有以/api2开头的请求路径 target:'http://localhost:5000', changeOrigin:true, pathRewrite:{'^/api2:''} } } } } //changeOrigin设置为true时,服务器收到的请求头中的host为http://localhost:5000 //changeOrigin设置为false时,服务器收到的请求头中的host为http://localhost:8000 //changeOrigin默认值为true
- 优点:可以配置多个代理,并可以灵活控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀。
插槽
- 作用:让父组件可以想子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件
- 分类:默认插槽,具名插槽,作用域插槽
- 使用方式:
-
默认插槽:
父组件中: <Category> <div>html结构</div> 子组件中: <template> <div> <slot>插槽默认内容</slot> </div> </template>
-
具名插槽
父组件中: <Category> <template slot="center"> <div>jtml结构1</div> </template> </Category> 子组件中: <template> <div> <slot name="center">插槽默认内容...</slot> <slot name="center">插槽默认内容...</slot> </div> </template>
-
作用域插槽
-
理解:数据在组件自身,但根据数据生成的结构需要组件的使用者来决定。
-
具体代码
父组件中: <Category> <template scope="scopeData"> <ul> <li v-for="g in scopeData.gemes" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category> 子组件中: <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], data(){ return{ gemse:['xxx','xxx','xxx'] } } } </script>
-
-