Vue初始了解
1.Vue是一个用于 构建用户界面 的 渐进式 框架
2.构建：
代码 ：alt + shift +a 注释代码(不需要导入axios)
3.注意点
4.响应式特征
5.开发者工具安装和测试
6.指令：
v-html
v-show和v-if
v-else 和 v-else-if
v-on (v-on: 这么多可以替换成@ 绑定事件有：click,mouseenter等等等）
第一种用法：表达式
第二种用法：写在函数中
无参
有参
v-bind:
代码示例：
v-for:
使用v-for删除的时候，最好是传递一个唯一标识的键，比如：id,语法在下面的代码中，写的时候注意查看。
7.综合案例：
js素组增加元素：
js素组删除元素：
所有
单项
拿数据一定要用 ：this.属性名
8.代码区：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="stylefile\index.css" />
<title>记事本</title>
</head>
<body>
<!-- 主体区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model="work" class="new-todo" />
<button class="add" @click="add()">添加任务</button>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for= "(item,index) in List" :key = "item.id">
<div class="view">
<span class="index">{{index+1}}</span> <label>{{item.name}}</label>
<button class="destroy" @click="del(item.id)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="flag">
<!-- 统计 -->
<span class="todo-count">合 计:<strong>{{List.length}}</strong></span>
<!-- 清空 -->
<button class="clear-completed" @click="delAll()" >
清空任务
</button>
</footer>
</section>
<!-- 底部 -->
<script src="flash\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
work:"",
flag:true,
List: [{ "id": 0, "name": '喝酒五分钟' }, { "id": 1, "name": '吹牛两小时' }, { "id": 2, "name": '后悔一整天' }],
},
methods:{
del(id){
this.List = this.List.filter(item =>item.id !==id)
if(this.List.length ==0){
this.flag = false
}
},
add(){
//unshift:在表头增加项目
if(this.work==""){
alert("请输入任务名称")
return
}
this.List.unshift({
//时间作为id标识
id:+new Date(),
"name":this.work,
}),
this.flag = true
//增加值以后又让他变为原来的数据
this.work=""
},
delAll(){
this.List=[]
this.flag=false
}
}
})
</script>
</body>
</html>
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
