• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

I met the Vue

<div id="app">
    <! You can write simple expressions as well as variables directly.
    <h2>{{message+name}}</h2>
    <h2>{{mesage+' '+neme}}</h2>
    <h3>{{message}}</h3>
    <h1>{{name}}</h1>
  </div>

<script>
    //let(variable)/const(constant)
    // Programming paradigm: declarative programming
    const app = new Vue({
      el: "#app".// Used to mount the element to be managed
      data: {// Define data
        message: 'hello'.name: "zaima"}})// The programming paradigm of JS is imperative programming, which is explicitly specified step by step
  </script>
Copy the code

Through the array

<div id="app">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
  </div>

<script>
    const app = new Vue({
      el: "#app".data: {
        message: 'hello'.movies: ['the sea king'.'Interstellar'.Life of PI.Inception]}})</script>
Copy the code

v-bind

The basic use

<! Vue can't be accessed dynamically without v-bind -->
  <div id="app">
    <! -- v-bind = v-bind -->
    <a :href="aHref"></a>
    <img v-bind:src="Corresponding picture address" alt="">
  </div>

<script>
    / / hook hook
    const app = new Vue({
      el: '#app'.data: {
        message: 'Hello acridine'.aHref: "www.baidu.com"}})</script>
Copy the code

V-bind Dynamically binds classes (object syntax)

<div id="app">// Add any class whose name is true<! - < h2 v - bind: class = "{name of the class 1: true, the name of the class 2: Boolean}" > {{message}} < / h2 > -- >
    <! -- Class name can be added at the same time -->
    <! -- <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2> -->
    <! You can also add a function to it.
    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  </div>

<script>
    / / hook hook
    const app = new Vue({
      el: '#app'.data: {
        message: 'Hello acridine'.isActive: true.isLine: true
      },
      // Put events inside the function
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        },
        // Call all methods in data with this
        getClasses:function(){
          return {active:this.isActive,line:this.isLine}
        }
      }
    })
  </script>
Copy the code

V-bind Dynamic binding style (object syntax)

<div id="app">
    <! - < h2 v - bind: style = "{key (the property name) : the value (attribute values)}" > {{message}} < / h2 > -- >
    <! Attribute value variables do not need single quotation marks, fixed values are single quotation marks, not single quotation marks will be treated as variables.//fontSize = font size = vue<h2 :style="{fontSize:finalSize + 'px',backgroundColor: finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
  </div>
  <script>
   const app = new Vue({
      el: '#app'.data: {
        message:'Hello acridine'.finalSize:50.finalColor:'red'
      },
      methods: {getStyles:function(){
          return {fontSize:this.finalSize + 'px'.backgroundColor: this.finalColor}
        }
      }
    })
</script>
Copy the code

Computed properties

The basic use

<div id="app">
   <h2>{{totalPrice}}</h2>
  </div>
  <script>
   const app = new Vue({
      el: '#app'.data: {
        books:[
        {id:110.name:"Programming art".proce:119},
        {id:111.name:"Complete Code".proce:119},
        {id:112.name:"Deep understanding of computer principles.".proce:119},
        {id:113.name:"Modern operating systems.".proce:119}},],// Computed attributes
      computed: {// Calculate the total price
        totalPrice:function(){
          let result=0;
          for(let i=0; i<this.books.length; i++){
            result += this.books[i].proce
          }
          return result
        }
      }
    })
  </script>
Copy the code

Listening for V-ON events

Parameter problem of V-ON

<div id="app">
    <! -- 1. The event calls a method with no arguments -->
    <button @click="btn1Click()">Button a</button>
    <button @click="btn1Click">Button a</button>
    <! By default, Vue passes a browser-generated event object to the method as an argument. If the method does not need an argument, you can omit the parentheses.
      <! < button@click ="btn2Click(123)"> </ button@click ="btn2Click(123)">
      <button @click="btn2Click">Button 2</button>
      <! 3. We need the event object for the method definition, as well as other parameters.
      <! $event --> $event --> $event -->
                               <! -- ABC is used as a variable without quotes -->
      <button @click="btn3Click(abc,$event)">Button three</button>
  </div>
  <script>
  const app = new Vue({
      el: '#app'.data: {
        message:'Hello acridine'.abc:123
      },
      methods: {btn1Click(){
          console.log("btn1Click");
        },
        btn2Click(event){
          console.log("-- -- -- -- -- -",event);
        },
        btn3Click(abc,event){
          console.log('+ + + + +',abc,event); }}})</script>
Copy the code

Modifier for V-ON

<div id="app">
    <! -- 1.stop decorator, which prevents bubbling of the following events -->
    <div @click="divClick">
      <button @click.stop="btnClick">button</button>
    </div>
    <! -- 2. Prevent modifier, prevent the following events to be submitted to Baidu -->
    <form action="baidu">
      <input type="submit" value="Submit" @click.prevent="submitClick">
    </form>
    <! -- 3. Listen on the keycap of a keyboard,enter only one key -->
    <input type="text" @keyup.enter="keyUp">
    <! -- 4. The once modifier can only be executed once -->
    <button @click.once="btn2Click">Button 2</button>
  </div>
  <script>
   var vm = new Vue({
      el: '#app'.data: {},methods: {
        btnClick() {
          console.log("btnclick");
        },
        divClick() {
          console.log("divclick");
        },
        submitClick() {
          console.log("submitclick");
        },
        keyUp() {
          console.log("keyup");
        },
        btn2Click() {
          console.log("btn2click"); }}});</script>
Copy the code

conditional

Use of V-if and V-else

<div id="app">
    <! When the condition is false, the element containing the v-if directive does not appear in the DOM at all -->
    <! -- v-show when the condition is false, only the element containing the v-show directive is not visible, but still exists in the page code -->
    <! Like the js if statement, we can also use function judgment to determine which is true -->
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
    </h2>
    <h1 v-else>If isShow is false, show me</h1>
  </div>
  <script>
  const app = new Vue({
      el: '#app'.data: {
        isShow:false,},methods: {}});</script>
Copy the code

User login switching case

<div id="app">
    <span v-if="isUser">
      <! -- The label username attribute points to the INPUT ID, so that clicking on the label text can also get the focus -->
      <label for="username">The user account</label>
      <! If you don't want the contents of the text box to be reused, set a different value with key, so that the text box will be re-rendered -->
      <input type="text" id="username" placeholder="User Account" key="username">
    </span>
    <span v-else>
      <label for="email">User mailbox</label>
      <input type="text" id="email" placeholder="User email" key="email">
    </span>
    <button @click="isUser = ! isUser">Switch type</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        isUser: true,},methods: {}});</script>
Copy the code

V-for loop traversal

The basic use

 <div id="app">
   <ul>
     <! -- <li v-for="item in info">{{item}}</li>
     <! -- value gets the value, key gets the name info traversal object -->
     <li v-for="(value,key) in info">{{value}}-{{key}}</li>
     <! -- index fetch subscript -->
     <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        info: {name:'why'.age:18.height:1.88}},methods: {}});</script>
Copy the code

Add: those methods in the array are reactive

<div id="app">
    <ul>
      <! Key ="item "-->
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">button</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        letters: ['a'.'b'.'c'.'d']},methods: {
        btnClick() {
          // 1. Push method, add multiple elements from the end
          // this.letters.push('aaa','bbb')
          // 4.unshift(), add more elements from the front of the array
          // this.letters.unshift('aaa')
          // 2.pop(), removed from the end
          // this.letters.pop();
          // 3. Shift (), delete from first
          // this.letters.shift();
          // splice() deletes/inserts/replaces elements
          // Delete element: The second argument is passed in how many elements you want to delete (if not, delete all the rest).
          // Replace elements: The second argument, indicating how many elements we want to replace, is followed by the previous element
          // Add the value to the list.
          / / this. Letters. Splice (1, 2, 'm', 'n', 'l', 'o')
          // Insert element: Write 0 for the second, and keep up with the element to insert
          / / this. Letters. Splice (1, 0, 'ha', 'he')
          / / 5. Sort () sort
          / / 6. Reverse () inversion
          // this.letters.reverse()
          // The internal function in vue
          // Vue. Set (object to be modified, index value, modified value)
          // Vue.set(this.letters,0,'bbb')

          // 2. The page does not refresh automatically if you modify an element in the array by index value
          // this.letters[0]='bbb';
          // function sum(... num){
          / /... Multiple elements can be added
          // }
          / / sum (1, 2, 3, 4);}}});</script>
Copy the code

Click to switch color cases

<div id="app">
    <ul>       <! Use this class if active in class is true, click the subscript -->
      <li v-for="(item,index) in movies"
       :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        movies: ['the sea king'.One Piece.Haier Brothers.Pirates of the Caribbean].currentIndex: 0
      },
      methods: {
        liClick(index) {
          // Set currentIndex equal to the index clicked so that the index changes color
          this.currentIndex = index
        }
      }
    });
  </script>
Copy the code

V-mode (bidirectional binding)

V-mode basic use

 <div id="app">
    <! -- v-mode is used for bidirectional binding of forms, where the value of the text box changes and the corresponding value of data changes -->
    <label for="male">
      <! Add the name attribute to input and they can only select one option if the value is the same, mutually exclusive -->
      <! -- The same value of the V-model will also be mutually exclusive -->
    <input type="radio" id="male" value="Male" v-model="sex">male</label>
    <label for="female">
      <input type="radio" id="female" value="Female" v-model="sex">female</label>
      <h2>The gender you have selected is: {{sex}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        // The default value is value
        sex:'male'
      },
      methods: {}});</script>
Copy the code

V – mode combining the checkbox

<div id="app">
    <! -- 1. Checkbox,v-model = Boolean -->
    <! -- <label for="agree"> -->
    <! -- Click on isAgree to make it true because disabled is reversed -->
    <! -- <input type="checkbox" id="agree" V-model ="isAgree">
    <! -- </label> -->
    <! {{isAgree}}</h2> -->
    <! -- disabled (true) -->
    <! -- <button :disabled="! </button> -->

    <! Select * from v-model where v = 1;
    <! Select value ();
    <input type="checkbox" value="Basketball" v-model="hobbies">basketball<input type="checkbox" value="Football" v-model="hobbies">football<input type="checkbox" value="Table tennis" v-model="hobbies">Table tennis<input type="checkbox" value="Badminton" v-model="hobbies">badminton<h2>Your hobbies are :{{hobbies}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        isAgree: false./ / radio buttons
        hobbies: []  / / check boxes
      },
      methods: {}});</script>
Copy the code

V – mode modifier

<div id="app">
    <! -- 1. Modifier: lazy This modifier is passed to vue value after mouse focus is gone -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>
    <! -- 2. Modifier: number changed to a string. Type ="number"; type="number";
    <input type="number" v-model.number="age">
    <h2>{{age}}-{{typeof age}}</h2>
    <! -- 3. Modifier: trim trim trim -->
    <input type="text" v-model.trim="name">
    <h2>The name you entered: {{name}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app'.data: {
        message:'Hello acridine'.age:0.name:' '
      },
      methods: {}});</script>
Copy the code

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

It’s all real. You can startcollectionGet up, as soon as you use VUE you definitely use the trick inside