一.脚手架文件结构
├── 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:包版本控制文件
二.ref属性
2.1作用及使用方式
1. 被用来给元素或子组件注册引用信息(id的替代者)
2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
3. 使用方式:
1. 打标识:```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 获取:```this.$refs.xxx```
2.2实例代码
//获取dom元素
<h1 v-text="msg" ref="title"></h1>
mounted() {
console.log("ref=>",this.$refs.h1)
}
![](https://img2020.cnblogs.com/blog/1158689/202110/1158689-20211023153156762-992297330.png)
//获取组件的vue compone对象
<todoHeader :addTodo="addTodo" ref="todoHeader"></todoHeader>
mounted() {
console.log("ref=>",this.$refs.todoHeader)
}
![](https://img2020.cnblogs.com/blog/1158689/202110/1158689-20211023153358538-1420153706.png)
三.props配置
1. 功能:让组件接收外部传过来的数据
2. 传递数据:```<Demo name="xxx"/>```
3. 接收数据:
1. 第一种方式(只接收):```props:['name'] ```
2. 第二种方式(限制类型):```props:{name:String}```
3. 第三种方式(限制类型、限制必要性、指定默认值):
```js
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
```
> 备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
3.1父组件向子组件传递数据
//1.父组件定义数据
data(){
return{
time:new Date(),
msg:"hello vx"
}
}
//2.在父组件的容器中向引用的子组件传递数据
<div id="root">
//不带:的话, 不会对数据进行解析
<vx msg1="msg" :msg2="msg"></vx>
</div>
//3.在子组件中定义props, 接收父组件的数据
const vx = {
template: "#vx",
props:['msg1','msg2']
}
//4.子组件展示数据
<h1>我是子组件,收到父组件的内容{{msg1}}</h1>
<h1>我是子组件,收到父组件的内容{{msg2}}</h1>
![](https://img2020.cnblogs.com/blog/1158689/202110/1158689-20211025155826172-73393693.png)
3.2子组件向父组件回传数据
//1.父组件定义数据和方法
data(){
return{
num:0,
}
},
components:{
vx
},
methods:{
sup(){
this.num++
}
}
//2.在父组件的容器中向子组件添加对应的方法
<vx :num="num" @sup="sup" @sub="sub"></vx>
//3.在子组件中的props添加接收到方法, 并在子组件的方法中回调父组件的方法
props:['num'],
methods:{
sup(){
this.$emit("sup")
}
}
四.mixin-混入
- 功能:可以把多个组件共用的配置提取成一个混入对象
- 使用方式:
- 第一步定义混合:
- 第二步使用混入: 全局混入:
Vue.mixin(xxx)
局部混入:mixins:['xxx']
//1.创建.js文件, 订阅共用的混入对象
export default {
data(){
return {
msg:"hello mixin"
}
},
methods:{
show(){
alert("hello mixin")
}
}
}
//2.在main.js导入创建的.js文件(可以采用全局导入或局部导入)
import mixin from "@/mixin";
//Vue.config.productionTip = false
Vue.mixin(mixin)
//3.在组件中输出
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
mounted(){
this.show()
}
}
</script>
![](https://img2020.cnblogs.com/blog/1158689/202110/1158689-20211025162818649-1202196373.png)
五.自定义插件
5.1使用步骤
1. 功能:用于增强Vue
2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
3. 定义插件:
```js
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
```
4. 使用插件:```Vue.use()```
5.2实例代码
//1.自定义.js文件, 创建install对象
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
...
})
//定义混入
Vue.mixin({
...
})
//给Vue原型上添加一个方法(vm和vc就都能用了)
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
//2.在main.js中导入插件
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用(使用)插件
Vue.use(plugins,1,2,3)
//3.使用
<button @click="test">点我测试一个hello方法</button>
六.scoped作用
1. 作用:让样式在局部生效,防止冲突。
2. 写法:```<style scoped>```
七.webStorage
1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API:
1. ```xxxxxStorage.setItem('key', 'value');```
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
2. ```xxxxxStorage.getItem('person');```
该方法接受一个键名作为参数,返回键名对应的值。
3. ```xxxxxStorage.removeItem('key');```
该方法接受一个键名作为参数,并把该键名从存储中删除。
4. ``` xxxxxStorage.clear()```
该方法会清空存储中的所有数据。
4. 备注:
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容,需要手动清除才会消失。
3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到,那么getItem的返回值是null。
4. ```JSON.parse(null)```的结果依然是null。
![](https://img2020.cnblogs.com/blog/1158689/202110/1158689-20211025161305960-254897619.png)
八.自定义事件
1. 一种组件间通信的方式,适用于:<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(<span style="color:red">事件的回调在A中</span>)。
3. 绑定自定义事件:
1. 第一种方式,在父组件中:```<Demo @atguigu="test"/>``` 或 ```<Demo v-on:atguigu="test"/>```
2. 第二种方式,在父组件中:
```js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次,可以使用```once```修饰符,或```$once```方法。
4. 触发自定义事件:```this.$emit('atguigu',数据)```
5. 解绑自定义事件```this.$off('atguigu')```
6. 组件上也可以绑定原生DOM事件,需要使用```native```修饰符。
7. 注意:通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时,回调<span style="color:red">要么配置在methods中</span>,<span style="color:red">要么用箭头函数</span>,否则this指向会出问题!
九.全局事件总线
9.1使用步骤
1. 一种组件间通信的方式,适用于<span style="color:red">任意组件间通信</span>。
2. 安装全局事件总线:
```js
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
```
3. 使用事件总线:
1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据:```this.$bus.$emit('xxxx',数据)```
4. 最好在beforeDestroy钩子中,用$off去解绑<span style="color:red">当前组件所用到的</span>事件。
十.消息的订阅与发布
1. 一种组件间通信的方式,适用于<span style="color:red">任意组件间通信</span>。
2. 使用步骤:
1. 安装pubsub:```npm i pubsub-js```
2. 引入: ```import pubsub from 'pubsub-js'```
3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
```
4. 提供数据:```pubsub.publish('xxx',数据)```
5. 最好在beforeDestroy钩子中,用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>
十一.nextTick
1. 语法:```this.$nextTick(回调函数)```
2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。