What binding data does vue use?

Vue binding data method: 1. Use double braces "{{}}" to give the data to the page; 2. Use the vue instruction, the v-bind instruction can achieve one-way data binding, v -model directive can realize two-way data binding; 3. Use ":", just add ":" before the label attribute for binding; 4. Use "${}", just splice the string before the data Use "${}".

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Several ways for Vue to bind data

1. Use Double braces '{{}}' give data to the page

<template>

  <div>
      <h3>{{ msg }}</h3>
  </div></template><script>export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }}}</script>

2. Use the vue command

<template>

  <div>
       <input>
  </div></template><script>export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;
     }}}</script>

The v-model is used here to bind the value of the input box to msg, or it can also be v-text v-html v-bind, etc.

1. One-way data binding (v-bind): Data can only flow from data back to the page (one-way transfer)

2. Two-way data binding (v-model): Data can not only flow from data to page, but also from page to data

(1) Two-way data binding is generally applied to form elements (such as input select checkbox, etc.)

( 2) v-model:value can be abbreviated as v-model because v-model collects value by default

3. Add ':' before the label attribute to bind

<template>

  <div>
    <cellgroup>
      <cell></cell>
    </cellgroup>

  </div></template><script>export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }}}</script>

Bind the value of msg to the title of the cell cell through:title. If you forget to add ':' in front of the title attribute, the page display will change. Like this:

The value given to title is not the variable msg in data() but the string "msg"

4. Use `${}` to splice strings before data

<template><!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
  <div>
    <cellgroup>
      <cell></cell>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <cell></cell>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <cell></cell>
    </cellgroup>

  </div></template><script>export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
       color:&#39;aqua&#39;
     }}}</script>

##[Related recommendations:

vuejs video tutorial 、web front-end development】

The above is the detailed content of What binding data does vue use?. For more information, please follow other related articles on the PHP Chinese website!