最近跟着视频教学学习vue.js。
说真的，我觉得vue.js应该算作后端，函数，循环，增删改查功能。
一遍遍的跟着练习，回放练习，真的想哭脸。
头部的js，可以直接去vue.js官方下载也可以引用链接。
链接：https://cdn.staticfile.org/vue/2.4.2/vue.min.js
以下的代码是根据教学内容来编写的。
之后在学习几次，才来进行项目的编写，到时候可能会分享上来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TooList</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handlesubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item" :index="index" @delete="handleDelete"></todo-item>
<!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
</ul>
</div>
<script>
// 创建组件的方法 全局组件
Vue.component('todo-item',{
// 接收
props:['content','index'],
template:'<li @click="handclick">{{content}}</li>',
methods:{
handclick:function(){
this.$emit('delete',this.index)
}
}
// 模板
})
// 局部组件
// var todoitem={
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
// 调用局部组件
// components:{
// 'todo-item':todoitem
// },
data:{
inputValue:"",
list:[]
},
// template:'',
methods:{
handlesubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
