this.name = e.target.value）自定义组件的 v-model
Vue 对原生组件进行了封装，所以
<input> 在输入的时候会触发
input 事件。但是自定义组件应该怎么呢？这里不妨借助 JsFiddle Vue 样板的 Todo List 示例。JsFiddle 的 Vue 样板
点击 JsFilddle 的 Logo，在上面弹出面板中选择 Vue 样板即可
样板代码包含 HTML 和 Vue(js) 两个部分，代码如下：
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox"
v-on:change="toggle(todo)"
v-bind:checked="todo.done"> <del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
] },
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})定义 Todo 组件
JsFiddle 的 Vue 模板默认实现一个 Todo 列表的展示，数据是固定的，所有内容在一个模板中完成。我们首先要做事情是把单个 Todo 改成一个子组件。因为在 JsFiddle 中不能写成多文件的形式，所以组件使用
Vue.component() 在脚本中定义，主要是把
<li> 内容中的那部分拎出来：
Vue.component("todo", {
template: `
<label>
<input type="checkbox" @change="toggle" :checked="isDone">
<del v-if="isDone">
{{ text }}
</del>
<span v-else>
{{ text }}
</span>
</label>
`,
props: ["text", "done"],
data() {
return {
isDone: this.done
};
},
methods: {
toggle() {
this.isDone = !this.isDone;
}
}
});原来定义在 App 中的
toggle() 方法也稍作改动，定义在组件内了。
toggle() 调用的时候会修改表示是否完成的
done 的值。但由于
done 是定义在
