Vue Scaffolding (continued)

3.8 TodoList case

Implement a simple notepad small Demo:Making the warehouse

  1. Componentized coding process:

    (1). Split static components: Components should be split according to function points, and names should not conflict with HTML elements.

    (2) Implementation of dynamic components: consider the location of data and whether the data is used by one component or some components:

    1). A component in use: Put it in the component itself.

    2). Some components in use: on their common parent (state promotion).

    (3). Implement interaction: start from binding events.

  2. Props applies to:

    (1). Parent component ==> Child component communication

    (2). Child component ==> Parent component communication (requires the parent to first give the child a function, and then the child calls the function to pass data to the parent)

   1.Define functions in the parent componentmethods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj); }},2.Pass the parent function to the child <MyHeader :addTodo="addTodo"></MyHeader>
   3.The child component receives the function passed by the parent componentprops: ["addTodo"].4.Call this function to notify the App component to add a Todo objectthis.addTodo(todoObj);      
Copy the code

  1. When using the V-Model, remember: the value of the v-Model binding cannot be the props passed in, because props cannot be modified!

  2. Vue does not give an error if you want to change a property of the object type if you pass the props. This is not recommended.

3.9 webStorage

  1. The storage content size is generally around 5MB (which may vary by browser)

  2. The browser uses window. sessionStorage and window. localStorage properties to implement the localStorage mechanism.

3. Related APIS:

1. ```xxxxxStorage.setItem('key', 'value'); This method takes a key and a value as parameters, adds the key-value pair to the store, and updates the key name if it exists. If the stored value is an object, convert it to a string and store it in 2. ' 'xxxxxstorage.getitem ('person'); This method takes a key name as an argument and returns the corresponding value. 3. ' ' 'xxxxxstorage.removeItem ('key'); This method takes a key name as an argument and removes it from storage. 4. ' 'XXXXxstorage.clear ()' 'This method will clear all the data in the storage.Copy the code

4. Note:

  • The content stored in SessionStorage disappears when the browser window closes.Copy the code
  • The content stored in LocalStorage will disappear only after being manually cleared.Copy the code
  • GetItem (XXX) If the value corresponding to XXX cannot be obtained, then the return value of getItem is null.Copy the code
  • The result of json.parse (null) is still null.Copy the code
  • Both use the same APICopy the code

    A localstorage.html file:

<! DOCTYPE html><html>

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

<body>
	<h2>localStorage</h2>
	<button onclick="saveData()">Click I save a data</button>
	<button onclick="readData()">Click on me to read a data</button>
	<button onclick="deleteData()">Click I delete a data</button>
	<button onclick="deleteAllData()">Click on me to clear a data</button>

	<script type="text/javascript">
		let p = { name: 'Joe'.age: 18 }

		function saveData() {
			localStorage.setItem('msg'.'hello!!! ')
			localStorage.setItem('msg2'.Awesome!)
			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>
Copy the code

An sessionstorage.html file

<! DOCTYPE html><html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">Click I save a data</button>
		<button onclick="readData()">Click on me to read a data</button>
		<button onclick="deleteData()">Click I delete a data</button>
		<button onclick="deleteAllData()">Click on me to clear a data</button>

		<script type="text/javascript" >
			let p = {name:'Joe'.age:18}

			function saveData(){
				sessionStorage.setItem('msg'.'hello!!! ')
				sessionStorage.setItem('msg2'.Awesome!)
				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>
Copy the code

3.10 User-defined Events of components

  1. A communication mode between components. It is applicable to: Child component ===> Parent component

  2. Usage scenario: A is the parent component and B is the child component. If B wants to send data to A, it will bind A custom event to B in A (the callback of the event is in A).

  3. Bind custom events:

    1. or

    2. The second way, in the parent component:

      <Demo ref="demo"/ >...mounted(){
   this.$refs.xxx.$on('atguigu'.this.test)
}
Copy the code

    3. To make custom events only fire once, use the once modifier, or the $once method.

  4. Emit custom event: this.$emit(‘atguigu’, data)

  5. Unbind custom event this.$off(‘atguigu’)

  6. Native DOM events can also be bound to components, using the native modifier.

  7. $on(‘atguigu’, callback) is either configured in the methods or the arrow function, otherwise this will point to a problem!

3.11 GlobalEventBus

  1. A communication mode between components. It can be used for communication between any components.

  2. Install the global event bus:

    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this // Install the global event bus. $bus is the current vm},... })Copy the code

  3. Using the event bus:

    1. Receive data: Component A wants to receive data, then $bus is bound to A custom event in component A, and the callback to the event is left in component A itself.

      methods(){
  demo(data){... }}...mounted() {
  this.$bus.$on('xxxx'.this.demo)
}
Copy the code

    2. $emit(‘ XXXX ‘, data) $emit(‘ XXXX ‘, data)

  4. It is better to use $off in the beforeDestroy hook to unbind the events used by the current component.