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”跟 ...
随机推荐
- Windows10关闭系统自动更新--专业版
当你正在跑项目,cpu负荷,内存负荷,这时候Windows服务模块没有人情味滴突然来个更新撑爆你的磁盘读写,那感觉简直炸锅 像这样: 什么?加个固态就好了 你要是上了固态,就不应该看到这篇文章,相见即 ...
- mac 系统使用vscode 创建c/c++ 工程项目 并配置断点调试
mac 使用vsCode 创建c/c++ 工程项目 并配置断点调试 使用vscode 创建c/c++工程项目 准备工作 使用 vscode 下载插件 C/C++ Project Generator 开 ...
- ABC365(D,E)
ABC365(D,E) D - AtCoder Janken 3 石头剪刀布,给出对手的出招,问在保证不败的情况下最多能赢多少回 记 \(f_i,{0/1/2}\) 表示第 \(i\) 局出石头/剪刀 ...
- SpringBoot必须掌握的常用注解！
Spring Boot 提供了大量的注解,用于简化配置和加速程序开发. 那么接下来,咱们就一起来看下 Spring Boot 中的常用注解有哪些?及其这些注解的具体使用. 1.Bean相关 @Comp ...
- vue遇到Conflicting order. Following module has been added:（加载顺序冲突）
其中article.vue和topGroup.vue这两个文件在模块unitTest和wrongBook上出现加载冲突 其中一个文件先加载topGroup.vue文件其中一个文件先加载article. ...
- 一条语句查看web日志排名前十的IP/URL页面及总数
查看 Nginx web 访问日志访问量前十的ip 以及访问的网站页面地址 ,可以分析网站哪些页面受欢迎,以及访问量大的ip在干什么! 标签: <无> 代码片段(3)[全屏查看所有代码] ...
- 方法的虚分派(virtual dispatch)和方法表（method table）
Java方法调用的虚分派 JUN 2ND, 2013 | COMMENTS 本文通过介绍 Java 方法调用的虚分派,来加深对 Java 多态实现的理解.需要预先理解 Java 字节码和 JVM 的基 ...
- 开发Git分支管理
目前分支管理 AngularJS在github上的提交记录被业内大多数开发人员认可,逐渐被广泛引用. 代码提交Message格式 type (scope): message 参数介绍: 1.type: ...
- 销讯通CRM系统如何确保拜访数据的真实有效
销讯通CRM系统如何确保并检查拜访过程数据的真实性,是一个值得深入探讨的课题. 01 在信息化高度发达的今天,我们拥有GPS定位.AI人脸识别等先进技术,这些技术无疑为数据的真实有效性提供了强有力的保 ...
- C#使用CsRedis操作Redis
C#使用CsRedis操作Redis 转:脚本之家(https://www.jb51.net/article/201034.htm) 现在流行的redis连接客户端有StackExchange.Red ...