vue-day03第三天
vue-day03
1跨越
定义：协议，域名，端口号只要有一个不一致就叫做跨域
// jsonp解决跨域问题
// 1.动态创建script标签 var os = document.createElemnt('script')
// 2.设置src os.src = '地址' http://suggestion.baidu.com/su?cb=aa&wd=123
// 3.添加到页面 document.body.appendChild(os)
// 4.设置回调函数 aa
// function aa(res) {
// console.log(res)
// }
2.watch的使用
语法:
<body>
<div id="app">
{{msg}}
<input type="text" v-model='msg'>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
let vn = new Vue({
el:'#app',
data:{
msg:'hello'
},
// 监听器
watch: {
// msg必须是声明后的
msg(newVal,oldVal){
console.log(newVal,oldVal)
}
},
})
</script>
2.watch项目的注意点:
a.如果监听的数据是对象，那么只能深监听 也就是用handler函数，需要配合deep属性
b.includes indexOf Math.random()
c.百度案例
<body>
<div id="app">
<input type="text" v-model='kw' @keydown.up = 'up' @keydown.down='down' @keydown.enter = 'enter'>
<ul>
<li v-if='4>index' v-for = '(item,index) in arr' :class='[index==n?"active":""]'>{{item}}</li>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
let vm = new Vue({
el:'#app',
data:{
kw:'',//这是关键字
arr:[],//这是请求回来的数据
n:-1//上下切换的标识
},
methods: {
// 向上
up(){
this.n--;
if(this.n<0){
this.n = 3
}
},
// 向下
down(){
this.n++;
if(this.n>=4){
this.n=0
}
},
// 回车
enter(){
if(this.n!=-1){
window.open('https://www.baidu.com/s?wd='+this.arr[this.n],'_self')
}else{
window.open('https://www.baidu.com/s?wd='+this.kw)
}
}
},
watch: {
kw(){
//1.创建标签
var os = document.createElement('script');
// 2.设置连接 http://suggestion.baidu.com/su?cb=callback&wd=234
os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.kw
// 3.添加页面
document.body.appendChild(os)
}
},
})
function aa(res){
console.log(res)
vm.arr = res.s
}
</script>
3.filter的使用
语法:
全局:Vue.filter('过滤器名称',fn)
局部: 与data同级，定义一个filters：{ 过滤器名称：fn}
<body>
<div id="app">
<!-- | 管道符 -->
电话号码:{{tel | filterTel}}
价格:{{price | filterPrice}}
</div>
<div id="box">
<!-- | 管道符 -->
电话号码:{{mytel | filterTel}}
价格:{{price | filterPrice }}
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
// 2.filter过滤器
Vue.filter('filterPrice',(price)=>{
// toFixed 补零
return price.toFixed(2)
})
let vm = new Vue({
el:'#app',
data:{
tel:'13858585858',
price:90.00
},
methods: {
},
// 局部过滤器
filters:{
filterTel:function(tel){
return tel.slice(0,3)+'****'+tel.slice(7)
}
}
})
let vn = new Vue({
el:'#box',
data:{
mytel:'13858585858',
price:199.8
},
})
</script>
格式化时间案例
<body>
<div id="app">
<table border="1" style="border-collapse: collapse;" width='500'>
<tr>
<th>姓名</th>
<th>日期</th>
</tr>
<tr v-for='item in list' :key='item.id'>
<td>{{item.name}}</td>
<td>{{item.time | formatTime}}</td>
</tr>
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
// 2.filter过滤器
Vue.filter('formatTime',(time)=>{
// 获取时间
var data = new Date(time);
var year = data.getFullYear();
// var month = (data.getMonth()+1)<10?"0"+(data.getMonth()+1):(data.getMonth()+1);
var month = (data.getMonth()+1+'').padStart(2,'0')
var day = data.getDate();
var hours = data.getHours();
var minutes = data.getMinutes();
var seconds = (data.getSeconds()+'').padStart(2,'0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})
let vn = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'高衍锋',
time:1602486061690
},
{
id:2,
name:'乐乐',
time:1602383061690
},
{
id:3,
name:'丁有欣',
time:1602493061690
},
{
id:4,
name:'刘坤',
time:1602483061490
}
]
},
methods: {
},
})
</script>
4.computed使用
语法:
<body>
<div id="app">
{{a}}
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
// 2.filter过滤器
// 3.computed 计算属性
let vn = new Vue({
el:'#app',
data:{
},
methods: {
},
computed: {
a:function(){
return 10
}
},
})
</script>
购物车案例:
<div id="app" class="container">
<!-- <i class="glyphicon glyphicon-search"></i> -->
<h3 class="text-center text-success">购物车</h3>
<table class="table table-hover table-bordered">
<tr>
<th><input type="checkbox" @click = 'changeAll' v-model='allCheck'>全选</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for='(item,index) in goods' :key='item.id'>
<td><input type="checkbox" v-model='item.check' @click = 'changeOne(index)'></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button class="btn btn-warning" @click = 'sub(index)'>-</button>
{{item.num}}
<button class="btn btn-success" @click='add(index)'>+</button>
</td>
<td>{{item.price*item.num}}</td>
<td>
<button class="btn btn-primary" @click = 'del(index)'>删除</button>
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="5">{{total}}</td>
</tr>
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.监听器
// 2.filter过滤器
// 3.computed 计算属性
let vn = new Vue({
el:'#app',
data:{
allCheck:false,
goods:[
{
id:1,
name:'手机',
price:1999,
num:1,
check:false,
},
{
id:2,
name:'电脑',
price:3999,
num:1,
check:true,
},
{
id:3,
name:'平板',
price:999,
num:1,
check:false,
}
]
},
methods: {
// 减
sub(index){
if(this.goods[index].num>0){
this.goods[index].num--;
}
},
// 增加
add(index){
if(this.goods[index].num<5){
this.goods[index].num++;
}
},
// 删除
del(index){
this.goods.splice(index,1)
},
// 全选
changeAll(){
this.allCheck = !this.allCheck
// console.log(this.allCheck)
this.goods.forEach((item)=>{
item.check = this.allCheck
})
},
// 选中某一个
changeOne(index){
this.goods[index].check = !this.goods[index].check
this.allCheck = this.goods.every(item =>{
console.log(item.check)
return item.check
})
// console.log(this.allCheck);
}
},
computed: {
total(){
var sum = 0;
this.goods.forEach((item)=>{
if(item.check){
sum+=item.price*item.num
}
})
return sum
}
}
})
</script>
5.动画
<button @click="show=!show">切换</button>
<transition>
<div v-show="show" class="box">hello</div>
</transition>
注意：想要给谁添加动画就给谁用 包裹起来，然后通过时间触发即可，那么需要增加类名
.v-enter {
opacity:0 ;
}
.v-enter-active {
transition: opacity 2s;
}
.v-enter-to {
opacity: 1;
}
.v-leave {
opacity: 1;
}
.v-leave-active {
transition: opacity 2s;
}
.v-leave-to {
opacity: 0;
}
</style>
注意：页面中给谁包裹起来那么动画就在谁身上执行
面试题：
1.说明watch和computed的作用与区别
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()
watch 属性监听 监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用
computed:计算属性通过属性计算而得来的属性，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
watch擅长处理的场景：一个数据影响多个数据；
computed擅长处理的场景：一个数据受多个数据影响。
2.说明watch和methods的作用与区别
watch .是观察的动作，自动执行
methods 是方法，主动调用
3.Vue中过滤器如何定义和使用？
4.使用过滤器实现实现日期的格式化，只显示年月日。
6.vue中遇到bug？
1.如果使用{{}}，首屏会出现闪屏，用v-clock解决
2.使用深度监听，可能会造成页面卡顿。解决：转成简单类型，进行监听
3.在vue中，不推荐v-for和v-if同时使用。如果需要同时使用，记得使用computed解决
7 常用的事件修饰符都有哪些？分别说明它们的作用。
8 什么是Vue的生命周期？
Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
浙公网安备 33010602011771号