vue directive

The difference between v-text and v-html:
v-text: will be translated
v-html: will not be translated

v-html demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> vue entry </ title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-html="content"></div>
  </div>
  <script>
      new View({
        //Binding the above id el refers to which dom node the vue instance is bound to
        el:"#first",

        data:{
         content:"<h1>May all efforts not be let down</h1>"
        }
      })
  </script>
</body>
</html>

　　Effect:

v-text demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> vue entry </ title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-text="content"></div>
  </div>
  <script>
      new View({
        //Binding the above id el refers to which dom node the vue instance is bound to
        el:"#first",

        data:{
         content:"<h1>May all efforts not be let down</h1>"
        }
      })
  </script>
</body>
</html>

　　Effect:

v-on: Bind the click event to the element, trigger the handleClick method, defined in the methods of the vue instance

v-on: bind the click event to the element
v-on:click="handleClick": trigger the handleClick method
methods: the methods defined in the vue instance are called
through this.content to change the data in the instance vue instance listens to the change of the data and updates the template
this.content="Come on yes"

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> vue entry </ title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">

        <div v-on:click="handleClick">{{content}}</div>
  </div>
  <script>
      new   Vue({
         // Binding the above id el refers to which dom node the vue instance is bound to 
        el: " #first " ,
        data:{
              content: " Tomorrow will be better "
        },
        methods: {
          handleClick: function(){
             this .content= " Come on, yes "
          }
        }
      })
  </script>
</body>
</html>

Effect:

2018-05-01 11:59:31

Guess you like