脚手架文件结构
├─node_modules
├─public
│ ├─favicon.ico: 页签图标
│ └─index.html: 主页面
├─src
│ ├─ assets: 存放静态资源
│ │ └─logo.png
│ │─ component: 存放组件
│ │ └─HelloWorld.vue
│ │─ App.vue: 汇总所有组件
│ │─ main.js: 汇总所有组件
│─ .gitignore: git版本管制忽略的配置
│─ babel.config.js: babel的配置文件
│─ package.json: 应用包配置文件
│─ README.md: 应用描述文件
│─ package-lock.json: 包版本控制文件
关于不同版本的Vue
- vue.js与vue.runtime.xxx.js的区别
- vue.js是完整版的Vue,包含:核心功能+模板解析器。
- vue.runtime.xxx.js是运行版的Vue。只包含:核心功能;没有模板解析器。
- 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到点的createElement函数去指定具体内容。
vue.config.js配置文件
使用vue inspect > output.js
可以查看到Vue脚手架的默认配置。
使用vue.config.js
可以对脚手架进行个性化定制。详情见: https://cli.vuejs.org/zh
ref属性
-
被用来给元素或子组件注册引用信息(id的替代者)
-
应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
-
使用方法:
打标识:
<h1 ref="xxx">...</h1>
或<School ref="xxx"></School>
获取:
this.$refs.xxx
配置项props
功能:让组件接收外部传过来的数据
-
传递数据:
<Demo name="xxx">
-
接收数据:
第一种方式(只接收);
props:['name']
第二种方式(限制类型)
props:{name:Number}
第三种方式(限制类型、限制必要性、指定默认值):
props:{ name:{ type:String,//类型 required:true,// 必要值 default:'xx' // 默认值 } }
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警报,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
mixin(混入)
功能:可以把多个组件共用的配置提取成一个混入对象
使用方法:
第一步定义混合,例如:
{
data(){...},
methods:{...}
...
}
第二步使用混合,例如:
- 全局混入:
Vue.mixin(xxx)
- 局部混入:
mixins:['xxx']
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
定义插件:
对象.install = function(Vue.option){
// 1.添加全局过滤器
Vue.fulter(...)
// 2.添加全局指令
Vue.directive(...)
// 3.配置全局混入(合)
Vue.mixin(...)
// 4.添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = xxx
}
使用插件:Vue.use()
scoped样式
作用:让样式在局部生效,防止冲突。
写法:<style scoped>
webStorage
-
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
-
浏览器端通过
Window.sessionStorage
和Window.localStorage
属性来实现本地存储机制。 -
相关API:
-
xxxxStorage.setItem('key','value')
;该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
-
xxxxStorage.getItem('person')
;该方法接受一个键名作为参数,返回键名对应的值。
-
xxxxxStorage.removeItem('key')
;该方法接受一个键名作为参数,并把该键名从存储中删除。
-
xxxxxStorage.clear()
该方法会清空存储中所有的数据
-
-
备注:
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容,需要手动清除才会消失。
xxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。JSON.parse(null)
的结果依然是null。
组件的自定义事件
-
一种组件间通信的方式,适用于:子组件===>父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(
事件的回调在A中
)。 -
绑定自定义事件:
-
第一种方式,在父组件中:
<Demo @test="test"/>
或<Demo v-onn:test="test"/>
-
第二种方式,在父组件中:
<Demo ref="demo"/> ... mounted(){ this.$refss.xxx.$on('test',this.test) }
-
-
触发自定义事件:
this.$emit('test',value)
-
解绑自定义事件:
this.$off('test')
-
组件上也可以绑定原生DOM事件,需要使用native修饰符。
-
注意:通过
this.$refs.xxx.$on('test',callback)
绑定自定义事件时,回调要么配在methods中,要么用箭头函数
,否则this指向会出现问题!
全局事件总线(GlobalEventBus)
-
一种组件间通信的方式,适用于
任意组件间通信
。 -
安装全局事件总线:
new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, .... })
-
使用事件总线:
-
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的
回调留在A组件自身
。methods(){ demo(data){.....} } ... mounted(){ this.$bus.$on('xxx',this.demo) }
-
提供数据:
this.$bus.$emit('xxx',value)
-
-
最好在beforeDestroy钩子中,用$off去解绑
当前组件所用到的
事件。