Vue.js基础（一）

  Vue.js的雏形：

　　数据绑定：

　　1，单向   {{输出}}　　　　数据=>视图

　　 2，双向   v-model              数据<=>视图

　　 3，{{*msg}} 数据只绑定一次
　 　4， {{{msg}}} HTML转意输出

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>

Vue.js指令

      相当于扩展html标签功能,属性

　　 v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；

　　v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none";

　　

实现div显示隐藏功能

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //数据
                    a:true
                },
                methods:{
                    fnShowHide() {
                        this.a=!this.a;
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="显示隐藏" @click="fnShowHide" >
        <div style="width:100px; height:100px; background: red" v-show="a"> </div>
    </div>
</body>

 循环：　

　　　数组重复，无法循环问题？

 　　　　为了保证效率它需要key和页面元素一一对应，需要每个元素有个单独的key，而数组没有key，所以把数组的元素当成默认的key而key的值不能重复。  

　　        track-by='索引' 提高循环性能也可以指定其他的数据

　　　{{$index}}    下标索引  {{$key}}     键值

可以循环数组和Json

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
        <ul>
            <li v-for="(k,v) in json">
                {{k}}   {{v}}   {{$index}}  {{$key}}
            </li>
        </ul>
    </div>
</body>　

过滤器

   　　-> 过滤模板数据

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{|currency '￥'}}
    </div>
</body>

　　　系统提供一些过滤器:

　　　　{{msg| filterA 参数}}

　　  　　uppercase      转大写字母

　　　　  lowercase       转小写字母

　　　　  currency        美元符号

属性:　

      width/height/title  　v-bind:src=""
　　简写:
　　:src="" 推荐

    　<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误

　　<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求

事件：

　　事件对象:      $event 参数可以得到一个事件对象

　　@click="show($event)"   

　　$event ev.keyCode     获得键码编号

　　键盘:
　　　　　　@keydown          @keyup

　　常用键:
　　　　回车　　a) @keyup.13              b) @keyup.enter
                         @keyup/keydown.left          @keyup/keydown.right
                         @keyup/keydown.up           @keyup/keydown.down

默认行为(默认事件):
　　　　阻止默认行为:      点击右键不会出现菜单
　　　　a). ev.preventDefault();
　　　　b). @contextmenu.prevent 推荐

阻止冒泡:

　　　　a). ev.cancelBubble=true;
　　　　b). @click.stop 推荐

数据交互：

this.$http.get()/post()/jsonp()
　　this.$http({
　　url:地址
　　data:给后台提交数据,
　　method:'get'/post/jsonp
　　jsonp:'cb' //cbName
});

     跨域访问百度URL

    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{
                },
                methods:{
                    get:function(){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:'a'
                        },{
                            jsonp:'cb'
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>

文章还有不足随时可能更新！