Detailed explanation of Vue form binding and components

Detailed explanation of Vue form binding and components

1. What is two-way data binding

Vue.js is an MV VM framework, which means two-way data binding. When the data changes, the view also changes, and when the view changes, the data will also change synchronously. This is the essence of Vue.js.
It is worth noting that the so-called two-way data binding must be for UI controls. Non-UI controls will not involve two-way data binding. One-way data binding is a prerequisite for using state management tools. If we use vue x, the data flow is also unidirectional, which will conflict with two-way data binding.

1. Why do we need to implement two-way data binding?

In Vue.js, if you use vuex, the data is actually one-way. The reason why it is called two-way data binding is that it uses UI controls. For us to process forms, the two-way data binding of Vue.js is particularly comfortable to use. That is, the two are not mutually exclusive. Using unidirectional in global data flow is convenient for tracking; using bidirectional in local data flow is simple and easy to operate.

2. Use two-way data binding in forms

You can use the v-model directive to create two-way data binding on forms and elements. It automatically picks the correct method to update the element based on the control type. Despite its magic, v-model is essentially just syntactic sugar. It is responsible for listening to user input events to update data and performing some special processing for some extreme scenarios.
Note: v-model will ignore the initial values ​​of the value, checked, and selected attributes of all form elements and always use the data of the Vue instance as the data source. You should declare initial values ​​in the component's data option via JavaScript!

1. Single line text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  Input text: <input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      message:""
    }
  });
</script>
</body>
</html>

2. Multi-line text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  Multi-line text: <textarea v-model="pan"></textarea>&nbsp;&nbsp;Multi-line text is: {{pan}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      pan:"Hello hello!"
    }
  });
</script>
</body>
</html>

3. Single checkbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  Single checkbox:
  <input type="checkbox" id="checkbox" v-model="checked">
  &nbsp;&nbsp;
  <label for="checkbox">{{checked}}</label>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      checked:false
    }
  });
</script>
</body>
</html>

4. Multiple checkboxes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  Multiple checkboxes:
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="jack">Jack</label>
  <input type="checkbox" id="join" value="Join" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="join">Jack</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="mike">Mike</label>
  <span>Checked value: {{checkedNames}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      checkedNames:[]
    }
  });
</script>
</body>
</html>

5. Radio Buttons

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  Radio button <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <span>Selected value: {{picked}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      picked:'Two'
    }
  });
</script>
</body>
</html>

6. Drop-down box

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  Drop-down box:
  <select v-model="pan">
    <option value="" disabled>---Please select---</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
  <span>value:{{pan}}</span>



</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      pan:"A"
    }
  });
</script>
</body>
</html>

Note: The initial value of the v-model expression fails to match any option, and the element will be rendered as "unselected". In iOS, this prevents the user from selecting the first option because iOS does not trigger the change event in this case. Therefore, it is more recommended to provide a disabled option with an empty value as shown above.

3. What is a component?

  • Components are reusable Vue instances, which are basically a set of reusable templates. They are similar to JSTL's custom tags, Thymeleal's th:fragment, and other frameworks. Usually an application is organized as a nested component tree:

  • For example, you might have components like a header, a sidebar, and a content area, each of which contains other components like navigation links, blog posts, etc.

1. The first Vue component

Note: In actual development, we will not develop components in the following way, but will use vue-cli to create and develop using vue template files. The following method is just to help you understand what components are.
Use the Vue.component() method to register components in the following format:

<div id="app">
 <pan></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  //Register component first Vue.component("pan",{
    
    template:'<li>Hello</li>'

  });
  //Re-instantiate Vue
  var vm = new Vue({
    el:"#app",
  });
</script>

illustrate:

  • Vue.component(): Register components
  • pan: Custom component name
  • template: component template

2. Use props attributes to pass parameters

It doesn’t make sense to use components like above, so we need to pass parameters to components, and this is where we need to use the props attribute!
Note: Under the default rules, the value in the props attribute cannot be uppercase;

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<div id="app">
  <!--Component, value passed to the component: props-->
  <cpn v-for="item in items" v-bind:itemChild="item"/>
</div>


<!--1. Import vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // Define a vue component component Vue.component("cpn",{
    props: ['itemChild'],
    template: `<li>{{itemChild}}</li>`
  })
  var vm = new Vue({
    el: '#app',
    data: {
      items: ['One Piece', 'Naruto', 'Sword Art Online']
    }
  });
</script>
</body>
</html>

illustrate:

  • v-for="item in items": traverses the array named items defined in the Vue instance and creates an equal number of components
  • v-bind:itemChild="item": bind the traversed item to the property named item defined in props in the component; the itemChild on the left side of the = sign is the property name defined in props, and the one on the right side is the value of the traversed item in item in items

The above is a detailed explanation of Vue form binding and components. For more information about Vue form binding and components, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue form dynamically add components practical example
  • Vue loop component plus validate multi-form validation example
  • Detailed explanation of Vue form event data binding
  • Vue form input binding v-model
  • Do you know Vue's double binding of forms and components?

<<:  Tutorial on installing mysql5.7.18 on mac os10.12

>>:  Nginx installation and environment configuration under Windows (running nginx as a service)

Recommend

Example of implementing a seamless infinite loop of background using CSS animation

1. Demand A picture moves from left to right in a...

HTML Tutorial: Ordered Lists

<br />Original text: http://andymao.com/andy...

JavaScript Document Object Model DOM

Table of contents 1. JavaScript can change all HT...

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...

How to remove inline styles defined by the style attribute (element.style)

When modifying Magento frequently, you may encount...

Implementation of the function of the vue circular percentage progress bar component

Anyone in need can refer to it. If you have tried...

Top 10 Js Image Processing Libraries

Table of contents introduce 1. Pica 2. Lena.js 3....

SpringBoot integrates Activiti7 implementation code

After the official release of Activiti7, it has f...

Detailed steps to build an NFS file sharing server in Linux

Linux builds NFS server In order to achieve data ...

Detailed explanation of server-id example in MySQL master-slave synchronization

Preface When we build a MySQL cluster, we natural...

Docker removes abnormal container operations

This rookie encountered such a problem when he ju...

Border-radius IE8 compatible processing method

According to canisue (http://caniuse.com/#search=...

HTML meta usage examples

Example Usage Copy code The code is as follows: &l...

Button is stretched on both sides in IE

When you write buttons (input, button), you will f...

Detailed explanation of MySQL database index

Table of contents 1. Introduction to MySQL Index ...