Vue.js的学习1.2

最新推荐文章于 2024-01-09 09:44:36 发布

Srain13

最新推荐文章于 2024-01-09 09:44:36 发布

阅读量595

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/Srain13/article/details/79462903

版权

Vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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);
});

Srain13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的学习1.2

Vue.js的学习1.21.模板: {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 &lt;script src="vue.js"&gt;&lt;/script&gt; &lt;script&gt; window.onload=function(){ ...
复制链接

扫一扫