零基础学习vue-01-案例

1. 买水果

提示： v-model="变量" 输入框的值会绑定给vue的这个变量(别忘了在data里先声明哦)

<template><div class="box"><table><caption>欢迎光临_vue开发的收银系统_水果店</caption><thead><tr><th>苹果{{price}}￥/ 斤数，折扣 {{discount}}</th></tr></thead><tbody><tr><td><span>请输入你要购买的斤数</span><input type="number" v-model="num"></td></tr><tr><td><button @click="btnFn">结账买单~</button></td></tr><tr><td><span>结账单: 总价: {{total}}￥元</span> &nbsp;<span>折价后: {{newTotal}}￥元</span>  &nbsp;<span>省了: {{save}}￥元</span></td></tr></tbody></table></div>
</template>

<style>
table {width: 500px;height: 200px;border: 1px solid #000;margin: 50px auto;text-align: center;
}
th,
tr,
td {border: 1px solid #000;height: 50px;
}</style>

<script>
export default {data() {return {price: 10,discount: '< 8折 >',total: 0,newTotal: 0,save: 0,num: 0}},methods: {btnFn() {this.total = this.num * this.pricethis.newTotal = this.total * 0.8this.save = this.total - this.newTotal}}}
</script>

2. 请选择您的爱好

目标：用户选择栏目, 把用户选中的栏目信息在下面列表显示出来

数据：["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"]

提示：vue变量是数组类型, 绑定在checkbox标签上

<template><div><div><p>{{ msg }}</p><!-- 遍历写在父级身上，若写在子级身上会报错 --><span v-for="(item,index) in arr" :key="index"><!-- 子级身上再进行取值 v-model实现双向绑定 v-model遇到复选框vue变量 非数组类型 关联复选框 checked属性（结果：true/false）vue变量 数组类型 关联复选框 value属性值（使用v-model获取表单的value值）--><input type="checkbox" v-model="hobby" :value="item"/>{{item}}<!-- 取出的item放在data中的hobby空数组中; 插入表达式--{{vue变量}}进行填充 --></span></div><div><ul><!-- 使用v-for变量hobby；插入表达式--{{vue变量}}进行填充 --><li v-for="(item,index) in hobby" :key="index">{{item}}</li></ul></div></div>
</template><script>
export default {data() {return {msg: "请选择喜欢化的专栏",hobby: [],arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"]};},
};
</script><style>
</style>

3. 购物车

目标

完成商品浏览和删除功能, 当无数据给用户提示
需求如下:

需求1: 根据给的初始数据, 把购物车页面铺设出来
需求2: 点击对应删除按钮, 删除对应数据
需求3: 当数据没有了, 显示一条提示消息

<template><div id="app"><table class="tb"><tr><th>编号</th><th>品牌名称</th><th>创立时间</th><th>操作</th></tr><!-- 循环渲染的元素tr --><!-- 为了防止报错：带上 :key="index" --><tr v-for="(obj,index) in list" :key="index"><!-- 对象.属性 可以访问到对应的属性值 --><!-- v-for遍历：每次遍历数组里每个值，创建一次当前所在标签结构每次遍历执行时，都是独立执行的 --><td>{{obj.id}}</td><td>{{obj.name}}</td><td>{{obj.time}}</td><td><!-- 给标签绑定事件：无值：@事件名="methods中的函数"传值：@事件名="methods中的函数(实参)" --><button @click='btnFn(index)'>删除</button></td></tr><!-- v-if="vue变量或表达式"，""中的判断结果为true或false，为true显示，为false隐藏 --><tr v-if="list.length === 0"><td colspan="4">没有数据咯~</td></tr></table></div>
</template><script>
export default {data() {return {// isShow: false,list: [{ id: 1, name: "奔驰", time: "2020-08-01" },{ id: 2, name: "宝马", time: "2020-08-02" },{ id: 3, name: "奥迪", time: "2020-08-03" },],};},methods: {// 带上形参btnFn(num) {// 数组删除指定索引位置上的数组元素：数组.splice(索引下标,删除个数)this.list.splice(num,1)}}
};
</script><style>
#app {width: 600px;margin: 10px auto;
}.tb {border-collapse: collapse;width: 100%;
}.tb th {background-color: #0094ff;color: white;
}.tb td,
.tb th {padding: 5px;border: 1px solid black;text-align: center;
}.add {padding: 5px;border: 1px solid black;margin-bottom: 10px;
}
</style>

4. 点名系统

目标：点击开始, 随机显示名字, 点结束暂停

<template><div><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">{{msg}}</div></div><div class="btns"><button class="start" @click="startFn">开始</button><button class="end" @click="endFn">结束</button></div></div>
</template><script>
export default {data() {return {msg: '这里显示名字',arr: ["黄忠","马超","张飞","超云","关羽",'云揽星河'],timer: null}},methods: {// data中的变量，都得使用this.进行调用data中的数据最终挂载在this对象身上startFn() {// 先清除定时器，否则点击开始按钮后，再点击结束按钮不会马上结束clearInterval(this.timer)this.timer=setInterval(()=> {let index = Math.floor(Math.random() * this.arr.length)// 将随机获取的名字赋值给 data中 msg变量this.msg = this.arr[index]},200)},endFn() {// 清除定时器clearInterval(this.timer)}}
};
</script><style>
* {margin: 0;padding: 0;
}h2 {text-align: center;
}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;
}.qs {width: 450px;height: 40px;color: red;
}.btns {text-align: center;
}.btns button {width: 120px;height: 35px;margin: 0 50px;
}
</style>

5. 协议倒计时

目标：打开网页, 做一个协议倒计时的效果

<template><div><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br /><!-- 属性不给值, 默认就是true值 --><!-- :属性名="vue变量"--给dom标签的属性设置vue变量 --><button class="btn" :disabled="status" @click="btnFn">我已经阅读用户协议({{count}})</button></div>
</template><script>
export default {data() {return {status: false,count: 60,timer: null}},methods: {btnFn() {this.status = truethis.timer = setInterval(() => {this.count--// 若倒计时显示为0if(this.count === 0) {// 清除定时器clearInterval(this.timer)// 设置初始状态this.status = false// 回到初始值this.count = 60}},1000)  // 隔一秒倒计时进行自减}}
};
</script>

6. 随机数生成和删除

目标：点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

提示：数组渲染列表, 生成和删除都围绕数组操作

<template><div id="app"><ul><li v-for="(item,index) in arr" :key="index"><span>{{item}}</span><!-- 给按钮标签添加点击事件，并传入实参 --><button @click="delFn(index)">删除</button></li></ul><button @click="btnFn">生成</button></div>
</template><script>
export default {data() {return {arr: [],};},methods: {btnFn() {// 生成0~50之内的随机数let num = Math.floor(Math.random() * 50)// 将随机生成的随机数追加到arr数组中this.arr.push(num)},// 形参delFn(a){this.arr.splice(a,1)}},}
</script>

7. 点击"走一走"按钮换位置

目标：点击按钮, 改变3个li的顺序, 在头上的就到末尾.

提示：操作数组里的顺序, v-for就会重新渲染li

<template><div id="app"><!-- 使用v-for变量myArr数组，每次遍历数组里每个值，创建一次当前所在标签结构 --><ul v-for="(item,index) in myArr" :key="index"><!-- {{}}--每遍历一次，使用插值表达式进行数据填充--><li>{{item}}</li></ul><button @click="btnFn">走一走</button></div>
</template><script>
export default {data() {return {myArr: ["帅哥", "美女", "程序猿"],};},methods: {btnFn() {let a = this.myArr[0]this.myArr.splice(0,1)this.myArr.push(a)}}
}
</script>

8. 点击切换笑话

<template><div><p>{{ word }}</p><button @click="btnFn">点击说笑话</button></div>
</template><script>
// 需求: 点击切换随机笑话
// 1. 准备标签和变量
// 2. 绑定点击事件
// 3. 点击产生随机数, 换出对应笑话, 设置给word变量影响页面// 注意: jokeArr拼写
// data里变量, 都得用this.来调用
export default {data(){return {word: '这是一个笑话',jokeArr: ['最近感觉记忆力下降得厉害', '于是就找了一个记事本','把每天重要的事情都记下来' , '可是今天早上起来, 差不多把床都拆了', '愣是没找到记事本.....']}},methods: {btnFn(){let num = Math.floor(Math.random() * this.jokeArr.length)this.word = this.jokeArr[num]}}
}
</script><style></style>

9. 翻转"世界"

提示：
字符串 -> 数组：.split()
数组 -> 字符串：.join()

<template><div><h1>{{ message }}</h1><button @click="btnFn">逆转世界</button></div>
</template><script>
// 目标: 点击翻转地球
// 1. 准备标签和变量初始值
// 2. 绑定点击事件
export default {data(){return {message: "Hello, World"}},methods: {btnFn(){// 3. 转成数组let arr = this.message.split("") // ["H", "e", "l", "l", ...]// 4. 数组翻转元素arr.reverse() // ["d", "l", "r", "o", "W", ...]// 5. 数组转回字符串this.message = arr.join("")// this.message = this.message.split("").reverse().join('')}}
}
</script><style></style>

10. 折叠面板

目标: 点击展开或收起时，把内容区域显示或者隐藏

<template><div id="app"><h3>案例：折叠面板</h3><div><div class="title"><h4>芙蓉楼送辛渐</h4><!-- // 3. span绑定-点击事件 --><span class="btn" @click="btnFn">收起</span></div><!-- // 4. 控制下面v-show显示 --><div class="container" v-show="isShow"><p>寒雨连江夜入吴,</p><p>平明送客楚山孤。</p><p>洛阳亲友如相问，</p><p>一片冰心在玉壶。</p></div></div></div>
</template><script>
// 目标: 折叠面板
// 1. 准备标签+样式(less)
// 2. 下载less和less-loader(注意版本号)
// yarn add less@3.0.4 less-loader@5.0.0 -D
// 注意: webpack在使用时, 版本一定要对应, 否则一个新的一个旧的(旧的里面没有另外一个新的包方法就报错)
// 脚手架用的是webpack4.x版本 -> less-loader8.0以下的版本
// 昨天webpack5.x -> 最新的less-loader8和8以上的版本
export default {data() {return {isShow: true}},methods: {btnFn(){// 5. 把变量值改变, 影响v-show的效果if (this.isShow === true) {this.isShow = false;} else if (this.isShow === false) {this.isShow = true;}// this.isShow = !this.isShow;}}
}
</script><style lang="less">
// 这里的样式代码, 都是less语法的
// webpack内置了less的配置-(less-loader配置好了，只配置未下载)
// 但是: webpack没给你下less和less-loader2个包
body {background-color: #ccc;#app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em;h3 {text-align: center;}.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {/* 鼠标改成手的形状 */cursor: pointer;}}
}
</style>

ps：生活不总是彩虹和蝴蝶那般理想美好，你改变不了昨天，但如果你过于忧虑明天，将会毁了今天。加油人。

零基础学习vue-01-案例相关推荐

[转载] Python Web开发—进阶提升 490集超强Python视频教程真正零基础学习Python视频教程
参考链接: 在Python中创建代理Web服务器 2 Python Web开发-进阶提升 490集超强Python视频教程真正零基础学习Python视频教程 [课程简介] 这是一门Python We ...
零基础学习嵌入式入门以及项目实战开发【手把手教+国内独家+原创】
零基础学习嵌入式入门以及项目实战开发[手把手教+国内独家+原创] 独家拥有,绝对经典创科之龙嵌入式开发经典系列教程 [第一期] 主讲人: ...
零基础学python 视频_全网最全Python视频教程真正零基础学习Python视频教程 490集...
Python Web开发-进阶提升 490集超强Python视频教程真正零基础学习Python视频教程 [课程简介] 这是一门Python Web开发进阶课程,手把手教你用Python开发完整的商业 ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
python零基础实例-零基础学习Python开发练习100题实例（1）
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2864浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
python基础代码事例-零基础学习Python开发练习100题实例（2）
零基础学习Python开发练习100题实例(2) 2018-02-26 13:11:39 1934浏览 11.题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个 ...
python零基础能学吗知乎-Python零基础学习能学好吗?老男孩Python面授班
零基础学习Python真的可以学习好吗?我想对于这个问题,是大部分想要学习Python的人都会纠结考虑的问题吧,也是很多小白最关注的的问题,今天为大家详细的解释一下. Python语言因为具有一定的独 ...
零基础可以学python吗-初学者必知：零基础学习Python真的能学会吗？
零基础学习Python真的可以学习好吗?我想对于这个问题,是大部分想要学习Python的人都会纠结考虑的问题吧,也是很多小白最关注的的问题,今天为大家详细的解释一下. Python语言因为具有一定的独 ...
适合零基础学python的书籍_适合零基础学习Python的书籍
Python 编程语言是容易学习且功能强大的语言,只要会用微信聊天.懂一点英文单词即可学会.另外,面对同样一个功能,其他编程语言的代码行数可能是几十行,甚至几百行,而Python 语言只要几行代码即可 ...
明日科技的python书籍怎么样_零基础学习Python不可错过的5本书籍
3.Python基础教程(第3版) 作者:[挪]芒努斯·利·海特兰德(Magnus Lie Hetland) 出版社:人民邮电出版社 Python3.5编程从入门到实践,Python入门佳作,机器学习 ...

零基础学习vue-01-案例

1. 买水果

2. 请选择您的爱好

3. 购物车

4. 点名系统

5. 协议倒计时

6. 随机数生成和删除

7. 点击"走一走"按钮换位置

8. 点击切换笑话

9. 翻转"世界"

10. 折叠面板

零基础学习vue-01-案例相关推荐

最新文章

热门文章