[Vue]: Vue directive

Vue's instructions `v-cloak`

v-cloakIt is to solve the flicker problem solving interpolation expression.

To add an element interpolation expressionv-cloak

<p v-cloak>{{ msg }}</p>

To v-cloakdefine a style

[v-cloak] {
    display: none;
}

Vue's instructions`v-text`

usage:

<h4 v-text="msg"></h4>

v-textAnd the same as the difference between the interpolation expression

v-textInterpolation and similar expressions, but without flicker problem
v-textWill cover the elements of the original content, but just substitute your own interpolation expression of this placeholder will not empty the entire contents of the elements

<!-- 输出时，插值表达式前后的字符会保留 -->
<p v-cloak>++++{{msg }}----</p>
<!-- 输出时，msg会替换掉其他符号 -->
<h4 v-text="msg">-------</h4>

Vue's instructions`v-html`

If you need to msg output in the form of html is required v-html, v-htmlit will overwrite the contents of the original elements

E.g:msg: '<h3>这是一个h3标签</h3>'

<p v-html="msg"></p>

Vue's instructions`v-bind`

v-bindIs an instruction for binding properties when used v-bind:titlelater, will be "title" is used as a variable, as a character in quotation marks js code to handle, and therefore also supports the calculation expressions.

<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" v-bind:title="mytitle + ‘123’">
<input type="button" value="按钮" :title="mytitle + ‘123’">
...
data: {
    mytitle:'这是自定义的title'
}

Direct use instructionsv-bind
Using a Reduced Instruction:
When binding, stitching the binding elements::title="btnTitle + ', 这是追加的内容'"

Vue's instructions`v-on`

Vue provides v-onevent binding mechanism, v-on:it can be shortened to@

  <div id="app">
    <input type="button" value="按钮" v-on:click="show">
    <input type="button" value="按钮" @click="show">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        show: function () {
          alert('hello')
        }
      }
    })
  </script>

Binding function, if added ()may be transmitted as a function of parameters, reference may be omitted if the transfer without()

Command `v-on`exercises - Marquee

Precautions:

Internal function will start calling setInterval this point the problem, use the arrows to change the function of this point, this point is setInterval inside of Vue examples
Should use a global intervalID, stop function can ensure access to
Click the Start button to prevent the continuous, start multiple timers

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <h4>{{msg}}</h4>
    <input type="button" value="启动" @click="start">
    <input type="button" value="停止" @click="stop">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是一个跑马灯',
        intervalID: null
      },
      methods: {
        start: function () {
          if (this.intervalID != null) return
          
          this.intervalID = setInterval(() => {
            // 在vm实例中访问data中的数据，必须是this.的方式
            var head = this.msg.substring(0, 1)
            var end = this.msg.substring(1)
            this.msg = end + head
          }, 400)
        },
        stop() {
          clearInterval(this.intervalID)
          this.intervalID = null
        }
      }
    })
  </script>
</body>

</html>

Event Vue command of the modifier

.stop stop bubbling
.prevent prevent the default event
Use event capture mode .capture add event listeners
.self only trigger a callback when the event occurs in the element itself (for example, not a child element), it will only prevent the trigger himself bubble behavior, not really prevent bubbling behavior
.once event fires only once

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="inner" @click="div1Handler">
      <!-- 使用.stop阻止冒泡 -->
      <input type="button" value="按钮" @click.stop="btnHandler">
    </div>
    <!-- 使用.prevent阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
    <!-- 使用.capture实现捕获触发的机制，点击按钮，先输出div的点击事件，在输出btn的事件 -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="按钮" @click="btnHandler">
    </div>
    <hr>
    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click.self="div1Handler">
      <input type="button" value="按钮" @click="btnHandler">
    </div>

    <!-- 使用.once 只触发一次，第一次阻止默认行为，以后不再阻止 -->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        btnHandler() {
          console.log('btn点击事件')
        },
        div1Handler() {
          console.log('div1点击事件')
        },
        linkClick() {
          console.log('a链接的点击事件')
        }
      }
    })
  </script>
</body>

</html>

Vue's instructions `v-model`and`双向数据绑定`

Use v-modelcommand, you can achieve bi-directional data form elements and Model data binding. v-bindWe can only achieve one-way data binding, automatically bound from M to V, not two-way data binding.

Note: The v-modelonly be used in form elements: input (radio, text, address , email ....) select checkbox textarea

<body>
  <div id="app">
    <H4>{{msg}}</H4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'v-model双向数据绑定实例'
      }
    })
  </script>
</body>

Vue instruction exercises - simple calculator Case

HTML code structure

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" @click="calc">
    <input type="text" :value="result">
</div>

Vue example code:

var vm = new Vue({
    el: '#app',
    data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt:'+'
    },
    methods:{
        calc(){
            switch (this.opt) {
                case '+':
                    this.result = parseInt(this.n1) + parseInt(this.n2)
                    break;
                case '-':
                    this.result = parseInt(this.n1) - parseInt(this.n2)
                    break;
                case '*':
                    this.result = parseInt(this.n1) * parseInt(this.n2)
                    break;
                case '/':
                    this.result = parseInt(this.n1) / parseInt(this.n2)
                    break;
            }
        }
    }
})

Using styles in the Vue

Use class style

Array Note: class here need v-bindto do data binding

<h1 :class="['red', 'thin']">这是一个H1</h1>

Ternary expression array

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>

Nested array of objects, a triplet of expressions in place of the object, to improve the readability of the code

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1</h1>

Direct use of objects, due to the properties of the object can be quoted, or without quotation marks, so here I did not write the quotes. Attribute value is an identifier

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1</h1>

Use inline styles

Directly on the element :styleforms, writing style object, if the object key is '-' connected together, the single quotation marks must

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个H1</h1>

The style object that defines the datamiddle, and direct reference to :stylethe

2.1 define styles on the data:

data: {
    h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

2.2 in the element, in the form of binding properties, the style applied to the object element:

<h1 :style="h1StyleObj">这是一个H1</h1>

In :styleby the array, a plurality of reference datapatterns on objects

3.1 define styles on data, note: fontStylecan also be written as'font-style'

data: {
    h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
    h1StyleObj2: { fontStyle: 'italic' }
}

3.2 in the element, in the form of binding properties, the style applied to the object element:

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个H1</h1>

Vue of instructions `v-for`and `key`properties

Iteration ordinary arrays

1.1 data array defined

data: {
    list: [1, 2, 3, 4, 5, 6]
}

1.2 circulating ordinary arrays

<p v-for="(item, i) in list">索引值：{{i}}, 每一项：{{item}}</p>

Iteration object attributes

2.1 In datathe definition of an array of objects

data: {
    list: [
        { id: 1, name: 'zs1' },
        { id: 2, name: 'zs2' },
        { id: 3, name: 'zs3' },
        { id: 4, name: 'zs4' }
    ]
}

2.2 cycle array of objects

<p v-for="(user, i) in list">索引值：{{i}}, id：{{user.id}}, name: {{user.name}}</p>

Traverse the object

3.1 data define objects

data: {
    user: {
        id: 1,
        name: '张三',
        gender: '男'
    }
}

3.2 traverse the object

<p v-for="(val, key, i) in user">{{key}} -- {{val}} -- 索引: {{i}}</p>

The number of iterations, attention, here iis starting from 1

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ version, when used in the appliance when the v-for, key now is necessary, key is used to identify the current cycle this one unique

When Vue.js use v-foris being updated list element has been rendered, it defaults to using " in situ reuse " strategy. If the order of the data item is changed, Vue will not move DOM element to match the order of the data items , but simply reuse each element here , and it appears to ensure that each element has been rendered in a particular index.

In order to give a prompt Vue, so that it can track the status of each node, thereby re-use and reorder existing elements , you need to provide a unique for each keyproperty.

Key must be a string or number type
key when in use, must be used v-bindin the form of binding properties, specify keythe value

In assembly, a v-forcycle time, or in some special cases, if v-forthere are problems, must be used v-forat the same time, specifying unique string / numeric :keyvalue

Vue's instructions `v-if`and`v-show`

<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

v-if features: every time to re-create or delete elements
v-show features: each will not be deleted and re-creation of the DOM, just switch elements of display:nonestyle

In general, v-ifhigher switching consumption, and v-showhigher initial rendering consumption. So, if you need frequent switching v-showis better, if the conditions are unlikely to change at runtime v-ifbetter.