Vue学习笔记(七)

·  阅读 479

Vue脚手架(续)

3.8 TodoList案例

实现一个简单的记事本小Demo:Github仓库

image.png

  1. 组件化编码流程:

    ​ (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。

    ​ (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:

    ​ 1).一个组件在用:放在组件自身即可。

    ​ 2). 一些组件在用:放在他们共同的父组件上(状态提升)。

    ​ (3).实现交互:从绑定事件开始。

  2. props适用于:

    ​ (1).父组件 ==> 子组件 通信

    ​ (2).子组件 ==> 父组件 通信(要求父先给子一个函数,然后子调用这个函数去传递数据给父组件)

   1. 在父组件定义函数
 methods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
  },
   2.将父组件函数传递给子组件 
        <MyHeader :addTodo="addTodo"></MyHeader>
   3.子组件接收父组件传递的函数
  props: ["addTodo"],
   4.调用这个函数,通知App组件去添加一个todo对象
      this.addTodo(todoObj);      
复制代码
  1. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!

  2. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。

3.9 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. 备注:

  •  SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    复制代码
  • LocalStorage存储的内容,需要手动清除才会消失。
    复制代码
  •  ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到,那么getItem的返回值是null。
    复制代码
  •  ```JSON.parse(null)```的结果依然是null。
    复制代码
  • 这两者的API用法一致
    复制代码

    一个localStorage.html文件:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>localStorage</title>
</head>

<body>
	<h2>localStorage</h2>
	<button onclick="saveData()">点我保存一个数据</button>
	<button onclick="readData()">点我读取一个数据</button>
	<button onclick="deleteData()">点我删除一个数据</button>
	<button onclick="deleteAllData()">点我清空一个数据</button>

	<script type="text/javascript">
		let p = { name: '张三', age: 18 }

		function saveData() {
			localStorage.setItem('msg', 'hello!!!')
			localStorage.setItem('msg2', 666)
			localStorage.setItem('person', JSON.stringify(p))
		}
                
		function readData() {
			console.log(localStorage.getItem('msg'))
			console.log(localStorage.getItem('msg2'))
			const result = localStorage.getItem('person')
			JSON.parse(result)
			// console.log(localStorage.getItem('msg3'))
		}
                
		function deleteData() {
			localStorage.removeItem('msg2')
		}
                
		function deleteAllData() {
			localStorage.clear()
		}
	</script>
</body>
</html>
复制代码

一个sessionStorage.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>
复制代码

3.10 组件的自定义事件

  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。

  3. 绑定自定义事件:

    1. 第一种方式,在父组件中:<Demo @atguigu="test"/><Demo v-on:atguigu="test"/>

    2. 第二种方式,在父组件中:

      <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',回调)绑定自定义事件时,回调要么配置在methods中要么用箭头函数,否则this指向会出问题!

App.vue

<template>
  <div class="app">
    <h1>{{ msg }},学生姓名是:{{ studentName }}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(方法一,使用@或v-on) -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
    <!-- 方法一:2.给student组件的实例对象vc绑定一个事件 -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(方法二,使用ref) -->
    <Student ref="student" @click.native="show" />
    <!-- 方法二:2.给student绑定ref获取组件实例对象 -->
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好啊!",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名:", name);
    },
    getStudentName(name, ...params) {
      //方法一/二:1.定义一个方法
      console.log("App收到了学生名:", name, params);
      //   接收name和一个数组对象,数组内存储着其余参数
      this.studentName = name;
    },
    m1() {
      console.log("demo事件被触发了!");
    },
    show() {
      alert(123);
    },
  },
  mounted() {
    // 方法二:3.App.vue挂载完毕,获取student的组件实例对象,绑定自定义事件
    this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
    // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件(一次性)
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
复制代码

student.vue

<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>当前求和为:{{ number }}</h2>
    <button @click="add">点我number++</button><!-- 方法一:3.定义 sendStudentlName点击事件-->
    <button @click="sendStudentlName">把学生名给App</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="death">销毁当前Student组件的实例(vc)</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    add() {
      console.log("add回调被调用了");
      this.number++;
    },
    sendStudentlName() {
      //方法一/二:4.触发Student组件实例身上的atguigu事件
      this.$emit("atguigu", this.name, 666, 888, 900);
      // this.$emit("demo");
      // 触发Student组件实例身上的demo事件
      // this.$emit('click')
    },
    unbind() {
      this.$off("atguigu"); //解绑一个自定义事件
      // this.$off(['atguigu','demo']) //解绑多个自定义事件
      // this.$off() //解绑所有的自定义事件
    },
    death() {
      this.$destroy();
      //销毁了当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效,
      // 原生DOM事件不受影响,但页面响应式丢了。
    },
  },
};
</script>

<style scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>
复制代码

school.vue

<template>
	<div class="school">
		<h2>学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
		<button @click="sendSchoolName">把学校名给App</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		props:['getSchoolName'],
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		methods: {
			sendSchoolName(){
				this.getSchoolName(this.name)
			}
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>
复制代码

3.11 全局事件总线(GlobalEventBus)

 1.Vue原型对象上包含事件处理的方法
     1)$on(eventName,listener):绑定自定义事件监听
     2)$emit(eventName,data):分发自定义事件
     3)$off(eventName):解绑自定义事件监听
     4)$once(eventName,listener):绑定事件监听,但只能处理一次
2.所有组件实例对象的原型对象的原型对象就是Vue的原型对象
     1)所有组件对象都能看到Vue原型对象上的属性和方法
     2)Vue.prototype.$bus=new Vue(),所有的组件对象都能看到$bus这个属性对象
3.全局事件总线
     1)包含事件处理相关方法的对象(只有一个)
     2)所有的组件都可以得到
复制代码
  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 安装全局事件总线:

    new Vue({
    	......
    	beforeCreate() {
    		Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
    	},
        ......
    }) 
    复制代码
  3. 使用事件总线:

    1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
        //回调methods提供的demo方法或直接使用箭头函数
      }
      复制代码
    2. 提供数据:

      //在提供数据的组件的methods中书写
       this.$bus.$emit('xxxx',数据)
      复制代码
  4. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})
复制代码

App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊!',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>
复制代码

Student.vue

<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  mounted() {
    // console.log('Student',this.x)
  },
  methods: {
    sendStudentName() {
      this.$bus.$emit("hello", this.name);
      //提供数据,将student组件中的数据传递给school
    },
  },
};
</script>

<style  scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>

复制代码

School.vue

<template>
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  mounted() {
    // console.log('School',this)
    this.$bus.$on("hello", (data) => {
      console.log("我是School组件,收到了数据", data);
    });
  },
  beforeDestroy() {
    this.$bus.$off("hello");
    // 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件,一定要写解绑的事件名,否则就全部解绑了
  },
};
</script>

<style scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>
复制代码

3.12 消息订阅与发布(pubsub)

1.这种方式的思想与全局事件总线很相似
2.它包含以下操作:
(1)订阅消息--对应绑定事件监听
(2)发布消息--分发事件
(3)取消消息订阅--解绑事件监听
3.需要引入一个消息订阅与发布的第三方实现库
1.在线文档
2.下载:npminstall-Spubsub-js
3.相关语法:

(1)import PubSub from 'pubsub-js'//引入
(2)PubSub.subscribe(‘msgName’,functon(msgName,data){})订阅消息
(3)PubSub.publish(‘msgName’,data):发布消息,触发订阅的回调函数调用
(4)PubSub.unsubscribe(token):取消消息的订阅

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 使用步骤:

    1. 安装pubsub:npm i pubsub-js

    2. 在订阅和发布消息的文件中引入: import pubsub from 'pubsub-js'

    3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。

   methods: {
    demo(msgName, data) {
      console.log(
        "有人发布了hello消息,hello消息的回调执行了",
        msgName,
        data,
        this
      );
    },
  },
      ......
      this.pubId = pubsub.subscribe("hello", this.demo);
复制代码
  1. 提供数据:B组件传递数据,则在B组件中发布消息
methods: {
    sendStudentName() {
      // 发布消息:pubsub.publish(事件名,参数),
      pubsub.publish("hello", 666);
    },
  },
复制代码
  1. 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)取消订阅。

Student.vue

<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
// 引入pubsub-js,pubsub是一个对象
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  methods: {
    sendStudentName() {
      // 发布消息:pubsub.publish(事件名,参数),
      pubsub.publish("hello", 666);
    },
  },
};
</script>

<style  scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>
复制代码

School.vue

<template>
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
// 引入pubsub-js,pubsub是一个对象
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  methods: {
    demo(msgName, data) {
      console.log(
        "有人发布了hello消息,hello消息的回调执行了",
        msgName,
        data,
        this
      );
    },
  },
  mounted() {
    /*订阅消息:pubsub.subscribe(消息名,回调函数function(消息名,传入的参数){
  				console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)
				   console.log(this);
				 
                                 这里this为undefined,想要避免有如下两种方法
	})
	*/

    //  方法一:this调用methods方法
    // this.pubId = pubsub.subscribe("hello", this.demo);

    // 方法二:使用箭头函数
    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
      console.log("有人发布了hello消息,hello消息的回调执行了", msgName, data);
      console.log(this);
    });
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>
复制代码

剩余文件跟全局事件总线一致,只是不需要安装全局事件总线

3.13 .sync修饰符

3.14 nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
分类:
前端
标签:
分类:
前端
标签: