Vue-5-模板和交互
2017-12-24 本文已影响0人
压根儿没快乐过
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模板和交互</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="box">
<!--双向绑定-->
<input type="text" v-model="msg">
<br>
<!--双向绑定-->
<p>{{msg}}</p>
<!--只绑定一次-->
<p v-once>{{msg}}</p>
<!--转义HTML-->
<p v-html="msg"></p>
<hr>
<!--过滤器-->
{{msg2 | uppercase}}
<hr>
交互
<input type="button" value="获取请求" @click="get()">
<input type="button" value="发送请求" @click="send()">
<input type="button" value="jsonp测试一" @click="jsonpDemo()">
<input type="button" value="jsonp测试二" @click="jsonpBaidu()">
</div>
<div id="box2">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData" >
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
<script>
window.onload = function () {
//自定义过滤器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1)
});
//模板
new Vue({
el:'#box',
data:{
msg:"你好",
msg2:"aaaaaa"
},
methods:{
//要放到服务器环境
get:function(){
this.$http.get("a.txt").then(function (value) {
alert(value.status + value.data);
},function (reason) {
alert(reason.status);
})
},
send:function(){
this.$http.get("get.php",{
a:1,
b:2
}).then(function (value) {
alert(value.status + value.data);
},function (reason) {
alert(reason.status);
})
},
jsonpDemo:function () {
this.$http.jsonp("https://sug.so.360.cn/suggest",{
word:"a"
}).then(function (value) {
alert(value.status + value.data.s);
},function (reason) {
alert(reason.status);
})
},
jsonpBaidu:function () {
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function (value) {
alert(value.status + value.data.s);
},function (reason) {
alert(reason.status);
})
}
}
});
// 例子
new Vue({
el:'#box2',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
}
}
});
};
</script>
</body>
</html>
