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">
        {{12|currency '￥'}}
    </div>
</body>

　　　系统提供一些过滤器:

　　　　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>

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

posted on 2018-10-09 17:31 天然灰阅读(145) 评论(0) 收藏举报

刷新页面返回顶部