Vue.js 入坑笔记

  • Cate: 笔记
  • 本文发布较早，其内容可能过时，阅读时请注意甄别。

Vue.js 入坑笔记

Part1

//阻止事件冒泡 也可使用@click.stop="show($event)"
new Vue({

el: '#box',
data:{},
methods:{
    show:function(ev){
        alert(ev.clientX); //事件对象
        ev.cancelBubble = true;
    },
    show2:function(){
        alert(2)
    }
}

})

//键盘事件 @keydown="show" @keyup
//ev.keyCode
//判断按键 @keyup.13="show()" @keyup.enter="show()"

//默认行为 禁用右键
@contextmenu="show($event)"
show:function(ev){

ev.preventDefault();

}
//@contextmenu.prevent="show()"

vue交互(vue-resource.js)
new Vue({

el:'body',
data:{

},
methods:{
    get:function(){
        this.$http.post('a.txt',{
            a:1,
            b:2
        },{
            emulateJSON:true
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.data);
        });
    }
}

});

属性绑定 v-bind:

v-for="(k,v) in json"

渲染一次 {{*msg}}
不转义标签 {{{msg}}}

过滤器 {{12|currency '￥'}}

vue.js留言板(基于1.0.21)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>VUE1.0 留言板</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="http://libs.cdnjs.net/vue/1.0.21/vue.min.js"></script>
</head>
<body>
    <div class="container" id="box">
        <form role="form">
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name" v-model="name">
            </div>
            <div class="form-group">
                <label for="age">年龄</label>
                <input type="text" class="form-control" id="age" v-model="age">
            </div>
            <div class="form-group">
                <input type="button" value="添加" class="btn btn-primary" id="age" @click="add()">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption class="h3 text-info">信息表</caption>
            <tr class="text-danger">
                <th class="text-center">序号</th>
                <th class="text-center">名字</th>
                <th class="text-center">年龄</th>
                <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="item in lists">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index">删除</button>
                </td>
            </tr>
            <tr v-show="lists.length!=0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" @click="nowIndex=-2" data-toggle="modal" data-target="#layer">删除全部</button>
                </td>
            </tr>
            <tr v-show="lists.length==0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据</p>
                </td>
            </tr>
        </table>

        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">确认<span v-show="nowIndex==-2">全部</span>删除么?</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del(nowIndex)">确认</button>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el:'#box',
                data:{
                    lists:[{name:'11', age:11},{name:'22', age:22}],
                    name:'',
                    age:'',
                    isAll:0,
                    nowIndex:-1
                },
                methods:{
                    add:function(){
                        this.lists.push({
                            name:this.name,
                            age:this.age
                        });
                        this.name='';
                        this.age='';
                    },
                    del:function(n){
                        if(n==-2){
                            this.lists = [];
                        }else{
                            this.lists.splice(n, 1);
                        }
                    }
                }
            })
        }
    </script>
</body>
</html>
Part2

Tags: vue

添加新评论