脚手架
脚手架文件结构
- 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>
-
-
1483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
