Vue.js的学习1.2

Vue.js的学习1.2

1.模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出

  <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'abc'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg">
        <br>
        {{msg}}   <!--这里会跟着input里面的内容改变-->
        <br>
        {{*msg}}   <!--这里不会跟着input里面的内容改变-->
    </div>
</body>

2.交互:
$http (ajax)

如果vue想做交互
引入: vue-resouce

get:

获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
    a:1,
    b:2
}).then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

post:

this.$http.post('post.php',{
    a:1,
    b:20
},{
    emulateJSON:true
}).then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

jsonp: 说实在….这个我还是有点没整明白…em…

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    wd:'a'
},{
    jsonp:'cb'  //callback名字,默认名字就是"callback"
}).then(function(res){
    alert(res.data.s);
},function(res){
    alert(res.status);
});

猜你喜欢

转载自blog.csdn.net/Srain13/article/details/79462903
今日推荐