vue的简单记录

vue的简单记录

vue的简单记录

虽然是vue的文档是中文的 但是确实蛮啰嗦

  • 数据绑定
v-bind:title="message"
{{ message }}

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'hello '
  }
})
  • 判断
v-if="ok"
v-else
v-show="ok"
  • 循环
遍历

v-for="todo in todos"
{{ todo.text }}
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})


app4.todos.push({ text: '新项目' })

遍历时提取数组索引
v-for="(item, index) in items"

遍历对象
v-for="(value, key, index) in object"
  • 事件监听
v-on:click="reverseMessage"

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


阻止单击事件冒泡
v-on:click.stop="doThis"
提交事件不再重载页面 
v-on:submit.prevent="onSubmit"
修饰符可以串联 
v-on:click.stop.prevent="doThat"
只有修饰符
v-on:submit.prevent
添加事件侦听器时使用事件捕获模式
v-on:click.capture="doThis"
只当事件在该元素本身(比如不是子元素)触发时触发回调
v-on:click.self="doThat"

按键别名

.enter
.tab
.delete (捕获 “删除”  “退格” )
.esc
.space
.up
.down
.left
.right
  • 双向绑定
v-model="message"

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