vue基础2
1.表单
表单里面有单选框，多选框，下拉框，文本域
vue单页应用
SPA：signal page application（单页应用）
多页面：1个url->1个html文件 多个url->多个url
单页面:1个url->多个组件 他们之间的切换是通过路由
2.修饰符
事件修饰符
stop :阻止事件冒泡
prevent:阻止默认行为
capture:事件捕获 给谁添加谁先出来
once:只执行一次
self:只有自己才可以触发自己
鼠标修饰符
left:左键触发
right:右键触发
middle:中间滚轮
注意：对于修饰符自多只能写两个
键盘修饰符
up,down,left,right,enter ...
表单修饰符
lazy:失去焦点后获取最新数据
number:只判断第一个值是否是number类型 是number返回number 不是返回string
trim:去除用户输入内容的首位空格
3.vue生命周期
钩子函数：8个
beforeCreate : el data name 都是undefined
created：el ：undefined data：可以拿到数据
beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染
mounted:页面渲染完成
beforeUpdate:更新数据
updated：更新完成 注意：更新前后数据是一致的
beforeDestory：销毁之前
destory:销毁完成
4.动画
一,基础使用
第一步：给需要添加动画的元素用<transition>包裹起来
第二步：设置6个样式
.v-enter，.v-enter-to，.v-enter-active，.v-leave，.v-leave-to，.v-leave-active
注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可
二、动画库的使用
引入animate.css这个库
5.案例
模拟购物车的小球
一、watch
1.深浅监听
注意:1.深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式
2.需要监听的方法名一定要与data中声明的属性名保持一致
<body> <div id='app'> <input type="text" v-model='msg'> <div> {{msg}}</div> <hr> <input type="text" v-model='json.name'> <input type="text" v-model='b'> <div>{{json.name}}</div> </div> </body> <script src='./vue.js'></script> <script> let vm = new Vue({ el: '#app', data: { msg:'hello', json:{ name:'张三', age:20 }, b:'' }, methods: { // 可以通过这种方式进行深浅转换 fn(){ var a = this.json.name return a } }, watch: { // 浅监听 基本数据类型 msg(newVal,oldVal){//2.需要监听的方法名一定要与data中声明的属性名保持一致 console.log(newVal,oldVal) }, // 这种方式监听不到数据 // json(newVal,oldVal){ // console.log(newVal,oldVal) // } json:{ handler(a){ console.log(a) }, deep:true },//了解，不建议使用，因为监听不到旧数据 //1.深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式 // 监听b属性 b(a,b){ console.log(a) } }, mounted() { console.log(this.fn()) this.b = this.fn() }, }) </script>
检测一个字符串是否包含另一个字符：this.question.includes('?')||this.question.indexOf('?')!=-1（includes返回的值是true或false）
watch: { question(){ // 出现好的概率是70% 不好的概率30% Math.random 0-1 if(this.question.indexOf('?')!=-1||this.question.includes('?')){ if(Math.random()<0.7){ this.answer = '好' }else{ this.answer='不好' } } } },
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(){ // 发送数据请求 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>
二、过滤器
全局： Vue.filter('过滤器名字',回调函数) 回调函数中做的是业务逻辑
局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
案例：
1.电话号码过滤
// 局部过滤器 <body> <div id='app'> <!-- | 管道符 --> {{tel | fiterTel}} </div> </body> <script src='./vue.js'></script> <script> let vm = new Vue({ el: '#app', data: { tel:'15858589158' }, methods: { }, // 局部过滤器 filters:{ fiterTel:function(tel){ return tel.slice(0,3)+'****'+tel.slice(7) }, fiterTelb:function(tel){ return tel.slice(0,3)+'****'+tel.slice(7) } } }) </script> // 全局过滤 <body> <div id='app'> <!-- | 管道符 --> {{tel | filterTel}} </div> </body> <script src='./vue.js'></script> <script> // 全局过滤 Vue.filter('filterTel',(tel)=>{ return tel.slice(0,3)+'****'+tel.slice(7) }) Vue.filter('filterTela',(tel)=>{ return tel.slice(0,3)+'****'+tel.slice(7) }) let vm = new Vue({ el: '#app', data: { tel:'15858589158' }, methods: { }, }) let vn = new Vue({ }) </script>
2.过滤价格
<body> <div id='app'> <!-- | 管道符 --> {{price | filterPrice}} </div> </body> <script src='./vue.js'></script> <script> Vue.filter('filterPrice',(price)=>{ return price.toFixed(2) }) let vm = new Vue({ el: '#app', data: { price:29.9 }, methods: { }, }) </script>
3.过滤时间
<body> <div id='app'> <div>当前时间{{ time | filterTime}}</div> </div> </body> <script src='./vue.js'></script> <script> Vue.filter('filterTime',(time)=>{ // padStart 首位补零方法 padEnd 末尾补零 let date = new Date(time) // console.log(date) // 年 let year = date.getFullYear() // 月 ((date.getMonth()+1)+'')将数值转为字符串 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}` }) let vm = new Vue({ el: '#app', data: { time:new Date(), }, methods: { }, }) </script>
三、计算属性
1.通过计算得出来的，所以就没有初始值
computed
区别：
computed:应用场景:购物车的总价 特点：多个数据影响一个数据
watch:应用场景 特点:一个数据影响多个数据
copmuted: 方法是不需要调用的，直接在页面使用即可
methods: 必须要调用的
<tr v-else> <td colspan="4">平均分:{{avg}}</td> </tr> <script> let vm = new Vue({ el: '#app', data: { }, methods: { }, // 计算属性 computed: { avg(){ var sum=0; this.list.forEach(item=>{ sum+=item.score }) return sum/this.list.length } }, }) // computed:应用场景:购物车的总价 特点：多个数据影响一个数据 // watch:应用场景 特点:一个数据影响多个数据 // copmuted: 方法是不需要调用的，直接在页面使用即可 // methods: 必须要调用的 </script>
4.购物车案例
流程： 1.先画静态页面 利用bs ```html <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.实现点击添加，点击减少数量，点击删除功能 ```vue 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.判断选中状态完成总价的计算 ```js <tr> <td colspan="6">总价:{{total}}</td> </tr> ``` ```js computed: { total(){ var sum=0; this.list.forEach(item=>{ if(item.checked){ sum+=item.price*item.num } }) return sum } },
浙公网安备 33010602011771号