Vue white entry

Recommended Mu class network Vue.js video teaching, simple, easy to learn, time is short, white essential to start
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <Title> Getting Started with Vue </ title>
   <script src="Vue.js"></script>
</head>
<body>
<! - 1, mount points (equivalent to about bindings can choose the equivalent class or id selector), the template can be written in Vue in tempate can also write mount point, the relationship between instances - >
<-! 2, Vue example data DATA functions, methods, and event method this.content ->
<-! Vue properties in the binding and two-way data binding ->
<-! Todolist Function Development ->
<div id="root">
   <div @click="handleClick" :title="title">
      <-! @ Equal to v-on: ->
      <-:! Equal to v-bind: ->
      <- v-model:! Way binding ->
      <!--{{content}}-->
      hello world
   </div>
   <input v-model="content"/>
   <div :value="content">{{content}}</div>
   姓：<input v-model="firstName"/>
   名：<input v-model="lastName"/>
   <div>{{fullName}}</div>
   <div>{{count}}</div>
   <div v-if="show">hello world</div>
   <button @click="handleClick">toggle</button>
   <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
   </ul>
   <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
      <ul>
         <li v-for="(item,index) of list" :key="index">{{item}}</li>
      </ul>
   </div>


</div>
<! - the difference between v-text of the v-html
v-text interpretes, v-html not escape, for example, the same content <h1> Hello </ h1> v-text displays <h1> Hello </ h1> v-html displays Hello - >
<-! V-show with v-if the difference
 Using the v-show property just gave control to add a style = "display: none" css property values
 Using the v-if the label is removed
 v-show performance better point, if the frequency of use big words to use v-show, not using v-if ->


<script>
   new view ({
      el: "# root", // taking over the elements, bound as the id of the element root
      data:{
          content:"this is content",
         title:"this is hello world",
         firstName:'',
         lastName:'',
         count:0,
         show:true,
         list:[],
         inputValue:"",
      },
      // Vue complex arithmetic calculation property
      computed:{
          fullName:function () {
            return this.firstName + '' + this.lastName
            }
      },
      // use change listener content
      watch:{
          fullName:function () {
            this.count++
            },
      },
      methods:{
         // handleClick:function () {
            // this.content = "world"
            // }，
            handleClick:function () {
                this.show = !this.show
            },
            handleSubmit:function () {
            this.list.push(this.inputValue)
            this.inputValue=''
            }
      }
   })
</script>
</body>
</html>
This article is an article when I am learning, for reference only
Guess you like
