javascript 之Vue框架和Vue框架下的ajax

1.概述

Vue是一个优秀的前端javascript框架, html+jquery不能满足所有的客户需求; 我们还需要学习Vue框架,在实际工作中用到的也很多;Vue的对象参数都是json格式;

2.Vue介绍

2.1 Vue的引入

开发者vue环境引入

生产者vue环境引入, 可以把对用的.min版本的js引入, 可以提前下载下来然后引用

<script type="text/javascript" src="/web/resources/js/axios-0.18.0.js"></script>

2.2 Vue的简单使用举例

<div id="id">
{{message}}  //插值表达式,输入data中的键名, 显示123 (键值)
</div>
//先引入Vue框架的js文件
//再引入第三方的ajax , axios ;
<script type="text/javascript">
new Vue({
      el:"#id ",    //html标签id
      data:{
                message:123,
                person:{}
                   //person对象被赋值后, 在html中使用插值表达式提取person数据
       },
       methods:{
                axios.get("/ajax").
                then(
                         response=>{ this.person=response.data; }
                        //请求成功调用then函数, response包含了服务器返回
                       //的数据, response.data才是Servlet响应回来的resultVO ;                     
                    
                                  将返回数据的data数据赋值给Vue中data标签方法中的  person对象;
                   ).
                  catch();
       },
       mounted:function(){
           //当el加载后,自动调用这个钩子函数
          
       }
});
</script>

2.3 Vue常用指令

1. v-text , v-html
   例1:

将Vue的data方法签名中键为text的值 在p标签体中显示;

2. v-if , v-show

我是if

如果isShow为false, 页面不显示, 如果为true,页面显示 "我是if" v-show类似, 区别: 为false时, v-if 页面和源代码都不显示.

3.v-on
按钮
加事件调用Vue中method中的方法; 可以简写为@click=

4. v-for
   遍历Vue标签方法data中的数据
   数组遍历:

5. //e和i可以随便起名,e是数组元素,i为索引, arr为数组名; {{e}} {{i}}

6. 对象遍历:

7. // abc为对象中的元素,person为data中定义的对象名 {{a}} {{b}} {{c}}

8. 数组元素为对象遍历:

9. {{e.name}} {{e.age}} //e为数组的元素,即person对象, i为数组索引.

10. v-bind指令
    操作html标签的属性值;
    //url为Vue中data签名方法中元素的键名, 简写可以省略v-bind
    百度
    

11. v-model
    双向绑定, 即页面数据和Vue中数据同步变化;这里数据就是标签的value值;
    如
    
    页面中数据变化, Vue中数据变化
    Vue中数据变化,页面中数据变化;