vue基础3
1.watch
案例：百度搜索框
注释的是用watch实现的
然后这个我用的是oninput事件
a.深浅监听
浅监听
深监听（不建议使用）
2.过滤器
全局： Vue.fliter('过滤器名字',回调函数) 回调函数中做的是业务逻辑
局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
过滤时间
3.计算属性
1.通过计算得出来的，所以就没有初始值
computed
4.购物车案例
vue-day03
1.watch
案例：百度搜索框
接口：百度：http://suggestion.baidu.com/su?cb=callback&wd=123
1.深浅监听
watch:{
//浅监听
msg(newVal,oldVal){
console.log(newVal,oldVal)
},
//深监听
json:{
//这个名字不能更改
handler(a){
console.log(a)
},
//主要通过deep属性
deep:true
},
注意：不建议使用深监听，通常转换为浅监听方式
}
2.百度案例
a.跨域的解决 jsonp
b.通过监听用户输入，发送请求，渲染页面
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.select{
background-color: red;
}
</style>
</head>
<body>
<div id='app'>
<input type="text" v-model='search' @keydown.up.prevent='up' @keydown.down = 'down' @keydown.enter = 'enter'>
<ul>
<li v-for='(item,index) in arr' :key='item' :class='[index==n?"select":""]'>{{item}}</li>
</ul>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
search:'',
arr:[],//请求回来的数据
n:-1,//自己定义的标识
},
methods: {
down(){
console.log(111)
this.n++;
if(this.n>this.arr.length-1){
this.n = 0
}
},
up(){
this.n--;
if(this.n<0){
this.n=this.arr.length-1
}
},
enter(){
// https://www.baidu.com/s?wd=123
//在下拉列表的范围内点击跳转到对应的搜索页面
if(this.n>=0&&this.n<=this.arr.length-1){
window.open('https://www.baidu.com/s?wd='+this.arr[this.n])
}else{
window.open('https://www.baidu.com/s?wd='+this.search)
}
}
},
watch: {
search(){
if(this.search==''){
return
}
// 发送数据请求 jsonp方式
var os = document.createElement('script');
os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.search;
document.body.appendChild(os)
}
},
})
function aa(res){
console.log(res)
// 找到与vm中data的关系，并且赋值
vm.arr = res.s
}
</script>
</html>
2.过滤器
全局： Vue.fliter('过滤器名字',回调函数) 回调函数中做的是业务逻辑
局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
案例:
1.电话号码过滤
<div id='app'>
<!-- | 管道符 -->
{{tel | filterTel}}
</div>
Vue.filter('filterTel',(tel)=>{
return tel.slice(0,3)+'****'+tel.slice(7)
})
2.过滤价格
<div id='app'>
<!-- | 管道符 -->
{{price | filterPrice}}
</div>
Vue.filter('filterPrice',(price)=>{
return price.toFixed(2)
})
3.过滤时间
<div id='app'>
<div>当前时间{{ time | filterTime}}</div>
</div>
Vue.filter('filterTime',(time)=>{
// padStart 首位补零方法 padEnd 末尾补零
let date = new Date(time)
console.log(date)
// 年
let year = date.getFullYear()
// 月
let month = ((date.getMonth()+1)+'').padStart(2,'0')
// 日
let day = (date.getDate()+'').padStart(2,'0')
// 时
let hours = (date.getHours()+'').padStart(2,'0')
// 分
let minutes = (date.getMinutes()+'').padStart(2,'0')
// 秒
let seconds = (date.getSeconds()+'').padStart(2,'0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})
3.计算属性
1.通过计算得出来的，所以就没有初始值
computed
4.购物车案例
流程：
1.先画静态页面 利用bs
<div id='app' class="container">
<h2>购物车</h2>
<table class="table table-bordered table-hover">
<tr>
<th>
<input type="checkbox" v-model='allChecked' @change='checkAll'>全选
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for='(item,index) in list' :key='item.id'>
<td>
<input type="checkbox" v-model='item.checked' @change='changeOne(index)'>
</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button type="button" class="btn btn-primary" @click= 'cut(index)'>-</button>
<span>{{item.num}}</span>
<button type="button" class="btn btn-danger" @click= 'add(index)'>+</button>
</td>
<td>小计:{{item.price*item.num}}</td>
<td><button type="button" class="btn btn-primary" @click = 'del(index)'>删除</button></td>
</tr>
<tr>
<td colspan="6">总价:{{total}}</td>
</tr>
</table>
</div>
2.实现点击添加，点击减少数量，点击删除功能
let vm = new Vue({
el:'#app',
data:{
allChecked:false,
list:[
{
id:1,
name:'手机',
price:1999.9,
num:1,
checked:false
},
{
id:2,
name:'电脑',
price:4999.9,
num:1,
checked:true
},
{
id:3,
name:'平板',
price:2999.9,
num:1,
checked:false
},
{
id:4,
name:'相机',
price:999,
num:1,
checked:false
},
]
},
methods: {
// 添加
add(index){
this.list[index].num++
},
cut(index){
this.list[index].num--
if( this.list[index].num<0){
this.list[index].num=0
}
},
del(index){
this.list.splice(index,1)
},
// 全选
checkAll(){
this.list.forEach(item=>{
item.checked = this.allChecked
})
},
//改变一个的状态
changeOne(index){
this.allChecked = this.list.every(item=>item.checked)
}
},
})
3.判断选中状态完成总价的计算
<tr>
<td colspan="6">总价:{{total}}</td>
</tr>
computed: {
total(){
var sum=0;
this.list.forEach(item=>{
if(item.checked){
sum+=item.price*item.num
}
})
return sum
}
},
bootstrap
作业：
淘宝搜索：https://suggest.taobao.com/sug?code=utf-8&q=s&callback=jsonp299
vue基础3的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- CSS动画（动态导航栏）
1.项目简介 一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力.本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现.我们提供了一键复制的代码,让 ...
- Data-Free，多目标域适应合并方案，简单又有效 | ECCV'24
来源:晓飞的算法工程笔记 公众号,转载请注明出处 论文: Training-Free Model Merging for Multi-target Domain Adaptation 论文地址:htt ...
- Python311新特性-特化指令specializing adaptive interpreter-typing-asyncio
Python3新特性 python3.11增加了许多特性,让python更快更加安全,本文从应用层面来讲一下python3.11的这些新特性 特化自适应解析器是什么,如何利用特化写出更高性能的代码 如 ...
- debug指南-基础bug
基础Bug 本章节主要阐述一些最基本的bug. 虽然这些bug看起来很弱智简单,但正是因为这些小bug,让我们调代码的时间增加至少 \(2,3\) 个小时. 本系列的宗旨就是综合这些小bug极其对应解 ...
- 使用ssh 通过ProxyCommand：利用跳板机让不在同一局域网的机器ssh直连
打开~/.ssh/config文件,如果没有则新建一个 输入以下内容并保存: Host dxx.sxx-bastion # jumpserver name hostname 54.65.xx.2xx ...
- byte,关于127+1等于多少
public class Main { public static void main(String[] args) { Integer i1 = 100; Integer i2 = 100; Int ...
- 源码开放：WebSocket应用示例
1 WebSocket概述 WebSocket是HTML5下一种新的协议(本质上是一个基于TCP的协议),它实现了浏览器与服务器之间的全双工通信,能够节省服务器资源和带宽,达到实时通讯的目的.WebS ...
- 剖析Air724UG的硬件设计，还有大发现？01部分
一.绪论 Air724UG是一款基于紫光展锐UIS8910DM平台设计的LTE Cat 1无线通信模组.支持FDD-LTE/TDD-LTE的4G远距离通讯和Bluetooth近距离无线传输技术,支 ...
- P4119 Ynoi2018 未来日记
P4119 Ynoi2018 未来日记 lxl 出的题好 duliu 啊. 感谢来自 fr200110217102 的博客 题解 P4119 [Ynoi2018未来日记]. 下标分块+值域分块+并查集 ...
- linux 自动输入密码脚本避免密码确认
有时候需要执行一个小脚本,就把一部分命令集合起来,我们可以使用 && 或者 .sh 脚本换行. 而有些时候涉及权限需要输入密码就出现了一些客户端会卡在输密码的界面让用户输入 脚本会暂停 ...