Vue commands

<span v-text="msg"></span>

<span>{{msg}}</span>

<div v-html="rawHtml"></div>

<div >
  <span v-pre>{{message}}</span> //This statement is not compiled  <span>{{message}}</span>
</div>

<div  v-cloak>
  <div>
    {{message}}
  </div>
</div>
<script type="text/javascript">
  new Vue({
   el:'#app',
   data:{
    message:'hello world'
   }
  })
</script>

<div>
  {{message}}
</div>

<div>
  hello world!
</div>

<span v-once>This will never change:{{msg}}</span> //Single element<div v-once>//There are child elements  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //Component<ul>
  <li v-for="i in list">{{i}}</li>
</ul>

<a v-if="ok">yes</a>

<a v-if="ok">yes</a>
<a v-else>No</a>

<div v-if="type==='A'">
  A
</div>
<div v-if="type==='B'">
  B
</div>
<div v-if="type==='C'">
  C
</div>
<div v-else>
  Not A,B,C
</div>

<h1 v-show="ok">hello world</h1>

<div v-for="(item,index) in items"></div>  //Use in, index is an optional parameter that represents the index of the current item<div v-for="item of items"></div>  //useof

<ul >
  <li v-for="item in items">
    {{parent}}-{{}}
  </li>
</ul>
<script type="text/javascript">
  var example = new Vue({
   el:'#app',
   data:{
    parent:'Parent scope'
    items:[
     {text:'Text 1'},
     {text:'Text 2'}
    ]
   }
  })
</script>

<ul >
  <li>Parent scope-text1</li>
  <li>Parent scope-text2</li>
</ul>

//Example of class switching<div >
  <!--whendataThe definition in itisActiveequaltruehour，is-activeThis class will be added to work-->
  <!--whendataThe definition in ithasErrorequaltruehour，text-dangerThis class will be added to work-->
  <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true, 
      hasError: false
    }
  })
</script>

<!--becausehasError: false，sotext-dangerNot rendered-->
<div class = "is-active"></div>

<div >
  <!--Array Syntax：errorClassexistdataThe corresponding class will definitely be added-->
  <!--is-activeIt's object syntax，according toactiveClassThe corresponding value determines whether to add it-->
  <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      activeClass: false,
      errorClass: 'text-danger'
    }
  })
</script>

<!--becauseactiveClass: false，sois-activeNot rendered-->
<p class = "text-danger"></p>

<div >
  <!--existvueExampledataDefined inclassObjectObject，这个Object里面是所有类名及其真值-->
  <!--When the value of the class inside istrueWill be rendered when-->
  <div :class="classObject">12345</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      classObject:{
        'is-active': false,
        'text-danger':true
      }      
    }
  })
</script>

<!--because'is-active': false，sois-activeNot rendered-->
<div class = "text-danger"></div>

<div >
  <input v-model="somebody">
  <p>hello {{somebody}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      somebody:'Xiao Ming'
    }
  })
</script>

<input ="msg">

<input ="msg">

<input ="msg">

<div >
  <button @click="consoleLog"></button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    methods:{
      consoleLog:function (event) {
        (1)
      }
    }
  })
</script>

<!-- Prevent click events from continuing to spread -->
<a v-on:="doThis"></a>

<!-- Submit event no longer reloads the page -->
<form v-on:="onSubmit"></form>

<!-- Modifiers can be concatenated -->
<a v-on:="doThat"></a>

<!-- Only modifiers -->
<form v-on:></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, the events triggered by the element itself are processed here first，Then it is handed over to the internal element for processing -->
<div v-on:="doThis">...</div>

<!-- Just as  The processing function is triggered when the current element itself -->
<!-- That is, events are not triggered from internal elements -->
<div v-on:="doThat">...</div>

<!-- Click event will only trigger once -->
<a v-on:="doThis"></a>

<!-- Default behavior of scrolling events (That is, scrolling behavior) Will trigger immediately -->
<!-- And won't wait `onScroll` Finish -->
<!-- This includes `()` The situation -->
<div v-on:="onScroll">...</div>