vue官方文档上的小实例
- v-on:submit.prevent=“addNewTodo”,指在该表单中的任何提交按钮都可以触发该事件
- is=“todo-item” attribute。这种做法在使用 DOM 模板时是十分必要的,因为在 ul元素内只有 li元素会被看作有效内容。这样做实现的效果与 todo-item相同,但是可以避开一些潜在的浏览器解析错误。
- vm.$emit( event, arg ) //触发当前实例上的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="addNewTodo">
<!-- v-on:submit.prevent="addNewTodo",指在该表单中的任何提交按钮都可以触发该事件 -->
<label for="new-todo">Add a todo</label>
<input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
<button>Add</button>
</form>
<ul>
<!-- 这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item>相同,但是可以避开一些潜在的浏览器解析错误。 -->
<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"></li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
template: `
<li>
{{ title }}
<button v-on:click="$emit('remove')">Remove</button>
</li>
`,
props: ['title']
})
const vm = new Vue({
el: '#app',
data: {
newTodoText: '',
todos: [{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
</script>
</body>
</html>