还有一个vue.js文件请看vue基础语法部分,注意,每个模块主讲的内容在title标签中有说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist功能开发</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
<ul>
</div>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist中的组件拆分</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
组件就是页面的一部分
定义组件,各个组件通信
component是全局组件页面都可以用该组件
还有局部组件定义TodoItem此时需要做组件声明components
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">
{{item}}
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示组件从外边接收一个数据
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content'],/*表示组件从外边接收一个数据*/
template:'<li>{{content}}</li>'
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件和实例的关系</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
组件就是一个实例,一个大的项目就是由万万千千的实例组成
如果一个实例没有template就会去找挂载点,次处为root把root标签的所有内容
当成模板使用,模板就是挂载点内的内容
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">
{{item}}
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示组件从外边接收一个数据
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content'],/*表示组件从外边接收一个数据*/
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
alert('clicked')
}
}
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件和实例的关系</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
组件是实例的子组件,实例给子组件传值是通过属性比如上一个例子的content属性
实现点击li的内容时能够删除该li内容,显示与否取决于父组件的list里的数据
实现父组件和子组件通信,通过发布订阅模式来做这件事情
$emit触发事件,delete事件,这个事件里携带了index的值,此时子组件可以监听这个事件
@delete="handleDelete"然后在父组件中写handleDelete方法并且可以传参数index
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示组件从外边接收一个数据
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content','index'],/*表示组件从外边接收一个数据*/
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);/*在list里添加数据*/
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(index,2)/*从list里删除从最后一个数据开始数的两条数据*/
}
}
})
</script>
</body>
</html>
