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