1.App.js import ‘./App.css’ import ‘./app copy.js’ import React from ‘react’ class Content extends React.Component {<!– –> constructor(props) {<!– –> super(props) this.state = {<!– –> tabs: [ {<!– –> title: ‘all’, type: ‘all’, id: 0 }, {<!– –> title: ‘Unfinished’, type: ‘unfin’, id: 1 }, {<!– –> title: ‘Complete’, type: ‘fin’, id: 2 }, ], inputvalue: […]
Tag: todo
Vue2-global event bus, message subscription and publishing, TodoList editing function, $nextTick, animation and transition
: A high degree of self-discipline means freedom For more Vue knowledge, please click – Vue.js VUE2-Day9 global event bus 1. Install the global event bus 2. Use event bus (1) Receive data (2) Provide data (3) It is best to unbind the component before destroying it 3. Sun Chuanfu in TodoList (1) First install […]
Vue2-Browser local storage (WebStorage) and improved TodoList cases, component custom events and improved TodoList cases
: If the mountain does not come to me, I will go to it For more Vue knowledge, please click–Vue.js VUE2-Day8 1. Browser local storage (WebStorage) 1. Related APIs 2. Some points for attention 3. Local storage in TodoList 2. Component custom events 1. Export component custom events 2. Bind custom events to components (1) […]
Vue CLI Todo-List case
Vue CLI Todo-List Case 1. Effect display 2. Project structure & interface component split 3. Finished product code Ideas: Store the data in APP.vue. Because data needs to be added to TodoHeader and TodoList also needs to display data, the data is stored in APP to facilitate communication between components. In TodoList, use v-for =TodoItem […]
Vue 09 multi-component project todolist, component programming trilogy, function way to pass messages, ref, custom event to pass messages
Analysis project component composition: Component programming trilogy: The first step. First create four components that need to be used Since the header, footer, list, and item all conflict with the keywords of the html file or js, it is recommended to change the name to two words, MyHeader, MyFooter, MyList, MyItem 02. Complete the relevant […]
Basic steps of using Autodock
1. File preparation Before docking, we must ensure that these five files are in the working directory. Where hsg represents the receptor and ind represents the ligand. 2. Import the pdb file as the acceptor molecule, remove free O atoms (water), add H atoms, and save it as a pdbqt file 1>Select File–>Read Molecule to […]
There may be precision loss solution when jdk8 stream stream mapToDouble calculation
jdk8 stream stream mapToDouble calculates the sum summation or average calculation, and the precision loss problem occurs Questions Calculations such as mapToDouble sum are based on the double type. Since the computer uses binary calculation and storage, the decimal number will be converted into a binary number when the computer calculates and stores data, and […]
Todo-List case version three
(160 messages) Todo-List case version 2_bubbleJessica’s Blog-CSDN Blog Introduced custom events to make the case more complete src/App.vue <template> <div id=”root”> <div class=”todo-container”> <div class=”todo-wrap”> <MyHeader @addToDo=”addToDo” /> <MyList :todos=”todos” :checkTodo=”checkTodo” :deleteTodo=”deleteTodo” /> <MyFooter :todos=”todos” @checkAllTodo=”checkAllTodo” @clearAllTodo=”clearAllTodo” /> </div> </div> </div> </template> <script> import MyHeader from ‘./components/MyHeader’ import MyList from ‘./components/MyList’ import MyFooter from ‘./components/MyFooter’ […]
Todo-List case version four
Global event bus Steps 1. Define the global event bus new Vue({ … beforeCreated(){ Vue.prototype.$bus=this //Install the global event bus, $bus is the vm of the current application } … }) 2. Using the event bus a. Receive data: A component wants to receive data, then bind a custom event to $bus in the A […]
Todo-List case version five
Install library npm i pubsub-js Subscription and publication of news src/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’, data() { return { msg: ‘Hello! ‘ } }, components: { Student, School } } </script> <style scoped> .app […]