Two-way binding and common instructions of Vue.js data

Two-way binding of data (ES6 writing method)

Effect:

When the value in the input box is not changed:

When clearing the value in the input box:

# Re-enter the input box. After Doudou, the value bound to {{testData.name}} in the span on the page follows the input. Changes when the box value changes.

In Vue.js, you can use the v-model directive to create two-way data binding on form elements. And the v-model directive can only be used for three tags: , , .

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>
 
 
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script>

Vue.js components can be understood as ViewModel classes with predefined behaviors. A component can predefine many options, but the core ones are the following:

Template (template): The template declares the mapping relationship between the data and the DOM that is ultimately displayed to the user.
Register components (components): After registration, you can call a child component in the form of a custom element in the parent component template.
Initial data (data): The initial data state of a component. For reusable components, this is usually private state.
Accepted external parameters (props): Data is transferred and shared between components through parameters. Parameters are bound one-way (top to bottom) by default, but can also be explicitly declared two-way.
Methods: Modifications to data are generally performed within the component’s methods. User input events and component methods can be bound through the v-on directive.
Lifecycle hooks: A component will trigger multiple lifecycle hook functions, such as created, attached, destroyed, etc. In these hook functions, we can encapsulate some custom logic. Compared with traditional MVC, it can be understood that the logic of the Controller is dispersed into these hook functions.
Private resources (assets): User-defined instructions, filters, components, etc. are collectively called resources in Vue.js. Since globally registered resources can easily lead to naming conflicts, a component can declare its own private resources. Private resources can only be called by the component and its subcomponents.

Commonly used instructions:

The so-called instructions are actually special tags that appear in the template. Based on these tags, the framework knows what operations need to be performed on the DOM elements here.

Commonly used instructions:

v-if instruction

v-show instruction

v-else instruction

v-for instruction

v-bind directive

v-on directive

v-if directive:

v-if renders elements based on the true or false condition of the value of an expression . The element and its data bindings/components are destroyed and recreated on switch. If the element is