Vue 3
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
}
]
},