Article From:

Data and methods

  1:Only whenWhen an instance is createddata The attribute in it is the responseYou can also predefine some empty attributes. The only exception is Object.freeze (obj), which prevents the modification of existing properties.

//The existing attribute is responsive, and predefined empty attributes.
//Object.freeze(obj) No longer respond
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
     foo: 'bar'  
  error: null

Note: VueIt is not allowed to dynamically add new root level response attributes on instances that have been created.(root-level reactive properties)。However, it can be usedVue.set(object, key, value) Method add response properties to nested objectsupper

//A response property is added


Template syntax

  1:Original HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

//rawHtml :It's a HTML code. Double v-html will output it as a text, and v-html will use it as a code.

  2:{{}}The syntax does not affect the properties of the HTML tag, and the v-bind directive can bind the label’s characteristics.

  3:Whether it is the binding of the label text, or the binding of the feature,They are all supported expressions, but can contain only one expression.


Instruction: the value of the instruction feature is expected to beA single JavaScript expression (result is a value).(v-for It is an exception.)

<p v-if="seen">Now you see me, < /p> //seen is the expression.

  1:Some instructions can take parameters and modifiers

//Band parameters
//v-bindThe parameter of the instruction is the feature of the label
<a v-bind:href="url">...</a>
//v-onThe parameter of the instruction is the name of the event
<a v-on:click="doSomething">...</a>

//Belt modifier
<form v-on:submit.prevent="onSubmit">...</form>


Computing attributes and listeners

  The purpose of computing properties: both text and label features are bound to the template, and can be a single JS expression, but it is not easy to maintain the logic of the expression when it is too complex.

  1:Computing attribute vs method

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageA() }}"</p>
//The effect is the same, one is the calculation attribute, the other is the method.Except for the different methods of callingIn addition, the biggest difference isComputing attributes are cached based on their dependencies. In short, the value of message does not change.
So reversedMessage will not change,But the method is different. Each rendering is done once.
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }, computed: { // Getter of computing attributes reversedMessageA: function () { // `this` Point to an instance of VM return this.message.split('').reverse().join('') } } })


  2:Computing attributes appear to be passive only depending on the value of the attributes they rely on, because the computing property is only getter by default, and you can provide him with setter.

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
vm.fullName = 'pan rui'; In general, there is no effect, but when setter is set, the value of the calculated attribute will be changed.

  3:The listener watch uses only data changes and performs asynchronous or expensive operations.


 classBinding to style

  1:Object syntax:The effect seems to be with addCLass and removeClassIt works very well.Instead of calling the method, switching the Boolean value directly can switch the class of the tag.

  The method of combining the calculated attribute of the return object is more,That is to set classObject to a calculated attribute, and the return value is an object.

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
data: {
  isActive: true,
  hasError: false
//{ active: isActive, 'text-danger': hasError } It can be replaced by an object.
<div v-bind:class="classObject"></div>  So data also uses classObject

  2:Array syntax:It feels like no eggs.

<div v-bind:class="[activeClass, errorClass]"></div>
//It seems that this is just to set up class, so I can simply write calss, and I don't know what it is for.
data: {
  activeClass: 'active',
  errorClass: 'text-danger'


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
<div v-bind:style="styleObject"></div>
//Referring to the object syntax above, you can also use the calculated attributes of the returned object to use more.



Leave a Reply

Your email address will not be published. Required fields are marked *