vue basic notes

1: v-bind bind variable (part of string)

<div id="app-9">
  <p v-bind:id="'list-'+num">
    v-bind binds part of variable
  </ p>
</div>


  var app9 = new Vue({
    el: "#app-9",
    data: {
      num: 1
    }
  })

2: v-on:click shorthand @click


    .stop - calls event.stopPropagation() .
    .prevent - call event.preventDefault().
    .capture - use capture mode when adding event listeners.
    .self - The callback is only fired if the event was fired from the element itself to which the listener was bound.
    .{keyCode | keyAlias} - The callback is only fired if the event was fired from the element itself to which the listener was bound.
    .native - listens for native events on the component's root element.


3: Call the calculation expression If the message does not change, the cache will be called

<div id="app-1">
  <p>


  var app1 = new Vue({
    el: "#app-1",
    data: {
      message: "date"
    },
    computed: {
      getDate: function(){
        return this.message + ": " + Date.now()
      }
    }
  })

When app1.getDate is called multiple times, the cache is called. If the value of message changes, the return value of app1.getDate will be updated.

4: Add set and get methods in computed to customize assignment and read expressions

<div id="app-1">
  <p>{{fullName}}</p>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      firstName: "zhang",
      lastName : "cai yan"
    },
    computed: {
      fullName: {
        get: function(){
          return this.firstName + "  1   " + this.lastName
        },
        set: function(newValue){
          this.firstName = newValue.split(" ")[0]
          this.lastName = newValue.split(" ")[1]
        }
      }
    }
  })

5: watch

<div id="app-1">
  你来自什么星球： <input v-model="question"><br/>

  <span>{{answer}}</span>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      question: "",
      answer: "请回答问题...."
    },
    watch: {
      question:function(){
        this.answer = "回答中...."
      }
    }
  })

6: v-bind:class 传入对象

1):
<div id="app-1">
  <div class="star" v-bind:class="{active: isActive, current: isCurrent}">对象语法</div>
</div>

  var app2 = new Vue({
    el: "#app-1",
    data: {
      isActive: true,
      isCurrent: true
    }
  })

2):
<div id="app-1">
  <div class="name" v-bind:class="classObject">对象语法</div>
</div>


  var app1 = new Vue({
    el: "#app-1",
    data: {
      classObject: {
        'active': true,
        'text-danger': true
      }
    }
  })

3):
<div id="app-1">
  <div class="name" v-bind:class="classObject">对象语法</div>
</div>


  var app1 = new Vue({
    el: "#app-1",
    data: {
      classObject: {
        'active': true,
        'current': true
      }
    },
    computed: {
      classObject: function(){
        return{
          active: this.isActive,
          current: this.isCurrent
        }
      }
    }
  })


4)：

<div id="app-1">
  <div class="name" v-bind:class="[active, {blue: isBlue}, isCurent ? 'current' : '']">Object syntax</div>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      active: 'active',
      isBlue: true,
      isCurrent: true
    }
  })


7: Component Note: When using a component, the component adds After the class style is set, it will be added to the template class in the component, as follows

<div id="app-2">
  <my-template class="blue" v-bind:class="{green: isGreen}"></ my-template>
</div>

  Vue.component("my-template", {
    template: "<p class='red' style='color:red;'>Component</p>"
  })

  var app2 = new Vue({
    el: "#app-2"
  })

8: v-bind:style is used in the same way as v-bind:class. There are arrays and hashes in the object, and expressions can be used in the array. The difference is that the hash in v-bind:class is the style name. Corresponds to Boolean data, and the hash in v-bind:style is the correspondence between the style name and value of the style, the elements of the array in the class are the variables of the class style name, and the array elements in the style are objects, and the style objects in the class is added directly.


<div id="app-2">
  <p v-bind:style="[sizeObject, weightObject, {color: red, height: height+'px'}]">object</p>
</div>


  var app1 = new Vue({
    data: {
      red: 'green',
      height: 25,
      sizeObject: {
        fontSize: '20px'
      },
      weightObject: {
        fontWeight: 'bold'
      }
    },
    el: "#app-1"
  })

9: The difference between v-if, v-else-if, v-else, v-show, v-show and v-if is that v-if only renders if true, false will not render, v-show is display , whether true or not will render

<div id="app-3">
  <p v-if="isSmall">small</p>
  <p v-else-if="isMiddle">middle</p>
  < p v-else>big</p>
</div>

  var app3 = new Vue({
    el: "#app-3",
    data: {
      isSmall: false,
      isMiddle: true
    }
  })

10: vue reuse as much as possible Elements, so you can improve rendering efficiency, if you do not reuse, but force re-rendering.

<div id="key-example" class="demo">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <


    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
  </template>
  <button v-on:click="toggleLoginType">切换</button>
</div>

  new Vue({
    el: '#key-example',
    data: {
      loginType: 'username'
    },
    methods: {
      toggleLoginType: function () {
        return this.loginType = this.loginType === 'username' ? 'email' : 'username'
      }
    }
  })


11: v-for: 数组、对象


1）<li v-for="item in items">{{item.message}}</li>

2）<li v-for="(item, index) in items">{{index}}  {{item.message}}</li>

3）
<li v-for="item in object">  {{item}}</li>
<li v-for="(value, key) in object"> {{key}} {{value}}</li>
<li v-for="(value, index, key) in object">{{index}} {{key}} {{value}}</li>

  var app1 = new Vue({
    el: '#app-1',
    data: {
      object: {
        firstName: "zhang",
        lastName: "san"
      }
    }
  })

4) <li v-for="n in 10">{{n}}</li>

  var app1 = new Vue({
    el: '#app-1',
    data: {
      object: {
        firstName: "zhang",
        lastName: "san"
      }
    }
  })

5) <li v-for="n in newNumbers">{{n}}</li>

var app1 = new Vue({
  el: '#app-1',
  data: {
    numbers: [1,2,3,4,5]
  },
  computed: {
    newNumbers: function(){
      return this.numbers.filter( function(number){
        return number % 2 === 0
      })
    }
  }
})

12: Methods added to the array: push, unshift, pop, shift, splice, slice, filter, sort, reverse, concat

use subscript directly Add array elements, Vue cannot detect changes in the array, you can use the set method to implement Vue.set(app1.todos, 9, "b")

13: v-mode implements two-way binding of text box data

1):
<div id ="app-1">
  <input type="checkbox" id="checkbox" v-model="checked">
  <p>{{checked}}</p>
</div>

var app1 = new Vue ({
  el: "#app-1",
  data: {
    checked: true
  }
})

2): 绑定为一个数组

<div id="app-1">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span> 3): Bind to radio button (radio) })   }     checkedNames: []   data: {   el: "#app-1", var app1 = new Vue({
</div>










<div id="app-2">
  <input type="radio" v-model="picked" value="One">
  <label>One</label>
  <br/>
  <input type="radio" v-model="picked" value="Two">
  <label>Two</label>
  <br/>
  <span>Picked: {{picked}}</span>
</div>


var app2 = new Vue({
  el: "#app-2",
  data: {
    picked: "One"
  }
})


4) select下拉框绑定值


<div id="app-1">
  <select v-model='selectValue'>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
  <span>selectValue: {{ selectValue }}</span>
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    selectValue: 'c'
  }
})


5) multiple select

<div id="app-1">
  <select v-model='selectValue' multiple>
    <option value="a" v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
  </select>
  <span>selectValue: {{ selectValue }}</span>
</div>


var app1 = new Vue({
  el: "#app-1",
  data: {
    selectValue: ['C'],
    options: [
      {text: "One", value: "A"},
      {text: "Two", value: "B"},
      {text: "Three", value: "C"}
    ]
  }
})

6) The modifier
number is automatically converted to a number
trim and the spaces on both sides are automatically filtered

<div id="app-1">
  <input v-model.number="msg">
  <span>msg: {{ msg }}</span >
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    msg: "111"
  }
})

typeof app1.msg 

14: Component global and local, template name can be used directly Or specified by is, most of the options in the Vue constructor can be used in the component, but when using data, it must be a function.

1)
Global:
<div id="app-1">
  <my-component></my-component>
</div>

Vue.component("my-component", {
  template: "<div>template</div >"










<div id="app-2">
  <my-component2></my-component2>
  或
  <div is="my-component2"></div>
</div>


var app2 = new Vue({
  el: "#app-2",
  components: {
    "my-component2": {
      template: "<div>模板2</div>"
    }
  }
})


3) 组件中使用data

<div id="app1">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click="counter+=1">{{name}}: {{ counter }}</button>',
    data: function(){
      return {
        name: "点击加一",
        counter: 0
      }
    }
  })

  new Vue({
    el: '#app1'
  })

4) props传递参数

<div id="app1">
  <my-component v-bind:message="message1" v-bind:count="count1"></my-component>
  <my-component v-bind:message="message2" v-bind:count="count2"></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click="counter+=count">{{message}} {{counter}}</button>',
    props: ["message", "count"],
    data: function(){
      return {
        counter:0     el: '#app1',   new View({   })     }
      }





    data: {
      message1: "click to add one",
      message2: "click to add two",
      count1: 1,
      count2: 2
    }
  })

5) Customize the type type in the prop, the default values ​​are String, Number, Boolean, Function, Object , Array

array/object default value should be returned by a factory function

<div id="app1">
  <input v-model="message">
  {{message}}
  <my-component v-bind:message="message" v-bind:message1="message1" v-bind:count="count1"></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click ="counter+=count">{{message}} {{message1}} {{counter}} {{names}} {{user.name}}</button>',
    props: {
      message: String,
      message1: [String, Number],
      count: {
        type: Number,
        default: 1
      },
      names: {
        type: Array,
        default: function(){
          return [1,2,3]
        }
      },
      user: {
        type: Object,
        default: function(){
          return {
            name: "zhang san"
          }
        }
      }
    },
    data: function(){
      return {
        counter: 0
      }
    }
  })

  new Vue({
    el: '#app1',
    data: {
      message: "",
      message1: "click to add one",
      count1: 1
    }
  })