My Little World

指令

发表于

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

简单指令

v-if 条件指令，绑定值为真时构建DOM,假时bu构建或者删除已存在DOM

1
2
3
4
5
6
7
8
9
10
<p v-if="seen">现在你看到我了</p>

export default {
    name: 'vpc',
    data () {
      return {
        seen: true
      }
   }
}

v-for 循环指令，根据绑定值，循环输出DOM元素

1
2
3
4
<div v-for="(item, index) in modalFooter">
  <button  @click="customFunc(item.Func)" type="button" class="btn btn-primary" v-if='item.name'>{{item.name}}</button>
</div>
//根据数据modalFooter数组循环出多个数组

v-on 监听 DOM 事件的指令,触发事件的回调函数放在method中，可以简写成‘@事件名’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
 //或者 <button @click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model 双向绑定指令,绑定的值在页面更改后js可以及时更改，js改变该值后,页面能马上渲染响应

1
2
3
4
5
6
7
8
9
10
11
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

v-bind 绑定HTML标签属性,响应式地更新 HTML 特性 缩写形式” :属性名=’响应函数名’ “

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app-2">
  <span v-bind:title="message">
  //或者<span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
//在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

自定义指令