Vue.js First day Learning notes (two-way binding of data, common instructions) _javascript tips

bidirectional binding of data (ES6 notation)

Effect:

When the value in the input box is not changed:

When the value in the input box is emptied:

Re-input the input box the value of the binding {{Testdata.name}}} in the span of the page changes with the value of the input box.

You can use the V-model directive in Vue.js to create bidirectional data binding on form elements. And the V-model directive can only be used for:<input>, <select>, <textarea> these three kinds of labels.

<template>
<div>
 <div class= "Form-inline mg-top" >
  <div class= "Form-group" >
   <label class= "Control-label" > Name:</label>
   <input type= "text" v-model= ' Testdata.name ' class= "Form-control" >
   <span class= "Control-span" > name changed to:{{testdata.name}}</span>
  </div>
 </div>
</div>
</template>


<script>
export Default {
 Components: {}
 ,
 ready:function () {
 },
 methods: {
 },
 data () {return
 {
  testdata:{
  ID: ' 1 ',
  name: ' John ', Age
  : ' {
}}
}} </script>

Vue.js components can be understood as ViewModel classes that have predefined behavior. A component can be predefined for many options, but the core is the following:

Template (Template): the template declares the mapping relationship between the data and the DOM that is eventually presented to the user.
Registration Component (components): Once registered, you can call a subassembly in the parent component template as a custom element.
Initial Data: The initial data state of a component. This is usually a private state for reusable components.
accepted external parameters (props): data is passed and shared between components through parameters. The parameter defaults to a one-way binding (from top to bottom), but can also be explicitly declared as a two-way binding.
Method (Methods): changes to the data are generally performed within the method of the component. You can bind user input events and component methods through the v-on directive.
Life cycle hook function (lifecycle hooks): A component triggers multiple lifecycle hook functions, such as created,attached,destroyed, and so on. In these hook functions, we can encapsulate some custom logic. Compared with traditional MVC, the logic that can be understood as controller is dispersed into these hook functions.
Private Resources (assets): In Vue.js , user-defined directives, filters, components, etc. are collectively referred to as resources. A component can declare its own private resources because it is easy to cause naming conflicts with global enrollment resources. Private resources can be invoked only by the component and its subcomponents.

Common instructions:

Instructions, in essence, are special tags that appear in templates that let the framework know what to do with the DOM elements here.

Common instructions:

• V-if directives
• V-show directives
• V-else directives
• V-for directives
• V-bind directives
• v-on directives

V-IF directive:

V-if renders an element based on the true or false condition of the value of the expression. The element and its data bindings/components are destroyed and rebuilt at the time of the switch. If the element is <template>, its contents are presented as a conditional block.

Labelshowflag is an expression that returns a bool value that can be either a bool attribute or a formula that returns BOOL.

Html:

<label class= "Control-label" v-if= ' Labelshowflag ' > Meow mic </label> <label class=
"Control-label" v-if= "testdata.name== ' John '" > John </label>

Js:

<script>
Export Default {
 components: {
 },
 ready:function () {
 },
 methods: {
 },
 data () {return
 {
  labelshowflag:true,
  testdata:{
  ID: ' 1 ',
  name: ' John ', Age
  : ' 18 '
  }
 }
 }
}
</script>

V-show directive:

V-show is also conditional rendering instructions, unlike v-if directives, elements that use v-show directives are always rendered to html,v-show just a simple toggle element of CSS attribute display.

Html:

<label class= "Control-label" v-show= ' Labelshowflag ' > Meow mic </label> <label class=
"Control-label" v-show= "testdata.name== ' John '" > John </label>

Js:

<script>
Export Default {
 components: {
 },
 ready:function () {
 },
 methods: {
 },
 data () {return
 {
  labelshowflag:true,
  testdata:{
  ID: ' 1 ',
  name: ' John ', Age
  : ' 18 '
  }
 }
 }
}
</script>

V-ELSE directive:

You can add an "else block" to v-if or v-show with the V-else directive, and the V-else element must immediately follow the V-if or v-show element-otherwise it cannot be recognized.

<label class= "Control-label" v-if= ' Labelshowflag ' > Meow mic </label> <label class=
"Control-label" v-if= "testdata.name== ' John" "> John </label>
<label class=" Control-label "v-else> not John </label>

V-FOR directive:

You can use the V-FOR directive to render a list based on an array. This instruction uses a special syntax, in the form of item in Items,items is an array of data, and item is an alias for the current array element:

Html:

<ul>
 <li v-for= "item in Items" >
 {item.message}}
 </li>
</ul>

Js:

<script>
Export Default {
 components: {
 },
 ready:function () {
 },
 methods: {
 } ,
 data () {return
 {
  labelshowflag:true,
  testdata:{
  ID: ' 1 ',
  name: ' John ', Age
  : '
  Items: [{message
  : ' Doug '
  }, {message
  : ' Fluffy '
  }],
 }}
< /script>

V-bind directive:

V-bind directives are used in response to update HTML attribute forms such as: V-bind:class

Html:

<label class= "Control-label" v-bind:class= "{' Pink-label ': Labelshowflag}" > I'm pink </label>
<label class= "Control-label" > Default </label>

v-on directive:

The v-on directive is used to listen for DOM event forms such as: V-on:click abbreviated to @click;

Html:

<input type= "button" class= "Form-control btn btn-primary" value= "submit" @click = ' Savefun ' >

Js:

<script>
Export Default {
 components: {
 },
 ready:function () {
 },
 methods: {
 Savefun:function () {
  alert (' Commit ');
 }
 },
 data () {return
 {
  labelshowflag:true,
  testdata:{
  ID: ' 1 ',
  name: ' John ', age
  : '% '
  },
  items: [{message
  : ' Doug '
  }, {
  Message: ' Fluffy '
  }],}}
</script>

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.