A, JS syntax

The syntax is similar to that of small programs, combined with vue syntax sugar, and can use ES6 syntax, more silky

Second, the directory structure of the project

Data binding

html

<div onclick="changeText">
  <text> {{content[1]}} </text>
</div>
Copy the code

js

export default {
  data: {
    content: ['Hello World! '.'Welcome to my world! ']},changeText: function() {
    this.content.splice(1.1.this.content[0]); }}Copy the code

Common event binding

Events are bound to components via ‘on’ or ‘@’, and when the component fires the event, the corresponding event handler in the JS file is executed.

Event support can be written as follows:

  • “FuncName” : funcName is the name of the event callback function (define the corresponding function implementation in the JS file).
  • “FuncName (a,b)” : function parameters such as a and b can be constants or variables defined in data in the JS file (this. Is not needed).

html

<div class="container">
    <text class="title">{{count}}</text>
    <div class="box">
        <input type="button" class="btn" value="increase" onclick="increase" />
        <input type="button" class="btn" value="decrease" @click="decrease" />
        <! -- Pass extra parameters -->
        <input type="button" class="btn" value="double" @click="multiply(2)" />
        <input type="button" class="btn" value="decuple" @click="multiply(10)" />
        <input type="button" class="btn" value="square" @click="multiply(count)" />
    </div>
</div>
Copy the code

js

export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  decrease() {
    this.count--;
  },
  multiply(multiplier) {
    this.count = multiplier * this.count; }};Copy the code

5. List rendering

html

<div class="array-container">
  <! Div list render -->
  <! $idx = $idx;
  <div for="{{array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{$item.name}}</text>
  </div>
  <! -- Custom element variable name -->
  <div for="{{value in array}}" tid="id" onclick="changeText">    
    <text>{{$idx}}.{{value.name}}</text>
  </div>
  <! -- Custom element variables, index names -->
  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
    <text>{{index}}.{{value.name}}</text>
  </div>
</div>
Copy the code

js

export default {
  data: {
    array: [{id: 1.name: 'jack'.age: 18}, 
      {id: 2.name: 'tony'.age: 18},],},changeText: function() {
    if (this.array[1].name === "tony") {this.array.splice(1.1, {id:2.name: 'Isabella'.age: 18});
    } else {
      this.array.splice(2.1, {id:3.name: 'Bary'.age: 18}); }}},Copy the code

The TID attribute is mainly used to speed up the re-rendering of the for loop, aiming to improve the efficiency of re-rendering when the data in the list changes. The TID attribute is used to specify the unique identity of each element in the array. If not specified, the index of each element in the array is the unique ID of that element. For example, tid=” ID “indicates that the ID attribute of each element in the array is unique to that element. For loop support is written as follows:

  • For =”array” : Array is an array object. The default element variable of array is $item.
  • For =”v in array” : v is a user-defined element variable, and the element index is $idx by default.
  • For =”(I, v) in array” : The element index is I, the element variable is v, and the array object is traversed.

Each element in the array must have a data attribute specified by TID, otherwise it may cause an exception at runtime. The tiD-specified properties in the array are guaranteed to be unique. If they are not, performance will suffer. For example, only ID and name can be used as tid fields in the example because they are unique. Tid does not support expressions.

Six, conditional rendering

Conditional rendering is divided into two types: if/elif/else and show. In the first version, if is false, the component will not be built in vDOM and will not be rendered. In the second version, if is false, the component will not be rendered but will be built in vDOM. Also, when using the if/elif/else notation, the node must be a sibling or the compilation will fail. Such as

html

<div class="container">
  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
  <text if="{{show}}"> Hello-TV </text>
  <text elif="{{display}}"> Hello-Wearable </text>
  <text else> Hello-World </text>
</div>
Copy the code

js

export default {
  data: {
    show: false.display: true,},toggleShow: function() {
    this.show = !this.show;
  },
  toggleDisplay: function() {
    this.display = !this.display; }}Copy the code

Optimize render optimization: show method. When show is true, the node renders normally. When false, simply set the display style to None.

html

<div class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{{visible}}" > Hello World </text>
</div>
Copy the code

js

export default {
  data: {
    visible: false,},toggle: function() {
    this.visible = !this.visible; }},Copy the code

Do not set both the for and if attributes on the same element.