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”跟 ...
随机推荐
- Mysql导出文本文件
使用mysqldump命令导出文本文件 mysqldump -u root -pPassword -T 目标目录 dbname [tables] [option]; 其中: Password 参数表示 ...
- OAS常见错误
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px } h1, h2 { color: rgba(51, 51, ...
- "安装VMware Tools"显示灰色的解决办法
用VMware Workstation Pro好几年了,期间这个问题也遇到过好几次,这次把解决方案记录一下,若后续有其他情况其他解决方案将在此博文更新. Step1:关闭虚拟机: Step2:在虚拟机 ...
- Flink RetractStream示例及UDF函数实现
介绍 今天在Flink 1.7.2版本上跑一个Flink SQL 示例 RetractPvUvSQL,报 Exception in thread "main" org.apache ...
- java之封装日期工具类DateUtils
整合日期工具类DateUtils dateUtils日期工具类封装-各类格式方法 pom文件引入 <dependency> <groupId>cn.hutool</gro ...
- ARC127D Sum of Min of Xor
ARC127D Sum of Min of Xor 性质分析加通用套路. 思路 首先我们把这题的 \(\min\) 给去掉,那么我们按位算贡献,可以求出和.这是这种式子的通用套路. 考虑加上 \(\m ...
- 配置NVIDIA Container Runtime和容器运行GPUStack教程
GPUStack 是一个设计用于运行大模型的开源 GPU 集群管理器,提供私有部署的大模型服务,支持大语言模型.Embedding 文本嵌入模型.Reranker 重排序模型.Vision 多模态模型 ...
- 曲线救国--访问dockerhub仓库
前言 由于dockerhub也被墙了,导致基础镜像没法拉取.后面解封了,又被墙了... 在这次被墙之前,访问国外的速度也是堪忧,甚至访问不了k8s的镜像,基于此,分享一下笔者经验 使用Daocloud ...
- golang之增加版本信息功能
在实际开发中,当开发完一个 apiserver 特性后,会编译 apiserver 二进制文件并发布到生产环境,很多时候为了定位问题和出于安全目的(不能发错版本),我们需要知道当前 apiserver ...
- 使用Acme.sh免费签发SSL证书
github:https://github.com/acmesh-official/acme.sh 概述一个纯粹用Shell(Unix shell)语言编写的ACME协议客户端.完整的ACME协议实施 ...