Vue进阶

一.脚手架文件结构

├── 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)
}

//获取组件的vue compone对象

<todoHeader :addTodo="addTodo" ref="todoHeader"></todoHeader>

mounted() {
    console.log("ref=>",this.$refs.todoHeader)
}

三.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>

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-混入

  1. 功能:可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式:
    • 第一步定义混合:
    • 第二步使用混入:​ 全局混入: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>

五.自定义插件

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。

八.自定义事件

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所指定的回调函数中执行。

 

posted @ 2021-10-23 16:50  清霜半落沙痕浅  阅读(103)  评论(0编辑  收藏  举报