vue的简单记录

Posted 72 months ago vue linux javascript

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!'
  }
})

点击评论