组件注册有三种组件模板的编辑方式
1，直接在Vue.component()方法的template属性中编辑html字符串如例子0
2，使用script标签封装 type = text/template ，需要有id，共组件注册使用
3，使用template标签封装 ，需要有id，共组件注册使用
注意点：
1，其实 组件注册时是使用css选择器选取的DOM树，所有使用什么标签封装都是可行的，
但是script标签和template标签封装的好处是可以直接隐藏自定义组件内容
2，自定义组件时官方要求组件顶层应只有一个元素封装内容。
Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if to chain them instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADD DOTO</title>
<script src = "../../lib/vue.js">
</script>
</head>
<body>
<div id = "todo-list-example">
<input
v-model="newTodoText"
@keyup.enter = "addNewTodo"
placeholder="Add a todo"
>
<ul>
<li is = "todo-item"
v-for ="(todo,index) in todos"
:key = "index"
:title="todo"
@remove="removeTodo(index)">
</li>
</ul>
</div>
<!--<div id = "app">-->
<!--{{msg}}-->
<!--</div>-->
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:111
}
})
Vue.component('todo-item',{
template:'\
<li>\
{{title}}\
<button @click ="$emit(\'remove\')">X</button>\
</li>\
' ,
props:['title']
})
new Vue({
el:'#todo-list-example',
data:{
newTodoText:'',
todos:[
"do the disehes",
"thalll",
"nowddd"
]
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADD DOTO</title>
<script src = "../../lib/vue.js">
</script>
<script type="text/x-template" id = "addtodoctrl">
<li>
{{title}}
<button @click ="$emit('remove')">X</button>
</li>
</script>
</head>
<body>
<div id = "todo-list-example">
<input
v-model="newTodoText"
@keyup.enter = "addNewTodo"
placeholder="Add a todo"
>
<ul>
<todo-item
v-for ="(todo,index) in todos"
:key = "index"
:title="todo"
@remove="removeTodo(index)">
</todo-item>
</ul>
</div>
<!--<div id = "app">-->
<!--{{msg}}-->
<!--</div>-->
</body>
<script>
// var vm = new Vue({
// el:"#app",
// data:{
// msg:111
// }
// })
Vue.component('todo-item',{
template:"#addtodoctrl",
props:['title']
})
new Vue({
el:'#todo-list-example',
data:{
newTodoText:'',
todos:[
"do the disehes",
"thalll",
"nowddd"
]
},
methods:{
addNewTodo:function () {
this.todos.push(this.newTodoText)
this.newTodoText = ''
},
removeTodo:function (index) {
this.todos.splice(index, 1)
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADD DOTO</title>
<script src="../../lib/vue.js">
</script>
</head>
<body>
<template id="addtodoctrl">
<li>
{{title}}
<button @click="$emit('remove')">X</button>
</li>
<li1>
{{title}}
</li1>
</template>
<!--<div id="addtodoctrl">-->
<!--<li>-->
<!--{{title}}-->
<!--<button @click="$emit('remove')">X</button>-->
<!--</li>-->
<!--</div>-->
<div id="todo-list-example">
<input
v-model="newTodoText"
@keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<todo-item
v-for="(todo,index) in todos"
:key="index"
:title="todo"
@remove="removeTodo(index)">
</todo-item>
</ul>
</div>
</body>
<script>
Vue.component('todo-item', {
template: "#addtodoctrl",
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
"do the disehes",
"thalll",
"nowddd"
]
},
methods: {
addNewTodo: function () {
this.todos.push(this.newTodoText)
this.newTodoText = ''
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
</script>
</html>
methods:{
addNewTodo:function () {
this.todos.push(this.newTodoText)
this.newTodoText = ''
},
removeTodo:function (index) {
this.todos.splice(index, 1)
}
}
})
</script>
</html>
浙公网安备 33010602011771号