找回密码
当前位置：前端开发者 > Vue.js > 正文

Vue 学习笔记（一）

2018-07-22 分类：Vue.js 阅读(640) 评论(0)
如何开发构建前端框架|网页前端开发后端开发框架|前端 web app开发框架
vue 主要应用html 和json + vue实例
mvc 轻型框架 比较小巧 易上手 比较实用移动端 spa首选框架
国人编写文档清晰 资料较多
缺点 需要配合其他组合搭配库
官网 http://cn.vuejs.org/
创建vue实例 new vue({
el:”, el 外围盒子元素 vue的应用范围（id class 标签名皆可）
data:{}, data 主要存储数据
methods:{} methods 存储方法
})
指令 封装好的标签的扩展
v-model 双向数据绑定 多用于表单元素 input中输入可以实时改变显示内容
<inputtype=”text”v-model=”message” />
**html 代码**
<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发学哪个框架</title>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
</head>
<body>
    <div id=”app”>
        <input type=”text” v-model=”message” />
        <input type=”text” v-model=”message” />
        <p>{{message}}</p>
    </div>
    <script>
        var vue = new Vue({
            el: ‘#app’,
            data: {
                message: ‘Hello Vue！’
            }
        })
    </script>
</body>
</html>
v-for 循环数据
v-for=’name in arr’ 循环数组 自带 {{$index}} 索引
v-for=’name in json’ 循环json 自带 {{$index}} 索引 {{$key}} key值
v-for='(key,val) in json’ 循环json key键值 val值
html 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        li {
            list-style: none;
        }
    </style>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
</head>
<body>
    <div id=”app”>
        <ul v-for=’name in json’>
            <li>{{name}} {{$index}} {{key}}</li>
        </ul>
        <hr>
        <ul v-for='(name,value) in json’>
            <li>{{name}} {{value}}</li>
        </ul>
        <hr>
        <ul v-for=’name in arr’>
            <li>{{name}} {{$index}} {{key}}</li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            el: ‘#app’,
            data: {
                arr: [‘a’, ‘b’, ‘c’, ‘d’],
                json: { ‘a’: ‘apple’, ‘b’: ‘orange’, ‘c’: ‘pear’ }
            }
        })
    </script>
</body>
</html>
v-on 事件绑定 v-on:click/mouseover/…. 简写@click/mouseover/….
**html 代码**
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
    </style>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
</head>
<body>
    <div id=”app”>
        <input type=”button” v-on:click=”show()” value=”点击” />
        <ul v-for=”item in arr”>
            <li>{{item}}</li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            el: ‘#app’,
            data: {
                arr: [‘a’, ‘b’, ‘c’, ‘d’]
            },
            methods: {
                show: function () {
                    this.arr.push(‘e’);
                }
            }
        })
    </script>
</body>
</html>
v-show 显示/隐藏
**html 代码**
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发建立框架代码</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
</head>
<body>
    <div id=”app”>
        <input type=”button” v-on:click=”show()” value=”点击” />
        <div class=”box” v-show=’a’></div>
    </div>
    <script>
        var vue = new Vue({
            el: ‘#app’,
            data: {
                arr: [‘a’, ‘b’, ‘c’, ‘d’],
                a: true
            },
            methods: {
                show: function () {
                    this.a = !this.a;
                }
            }
        })
    </script>
</body>
</html>
$event 事件对象 @click=’show($event)’
stop 阻止事件冒泡 @click.stop=’show()’ event.stopPropagation()
prevent 阻止默认行为 @click.prevent=’show()’ event.preventDefaault()
键盘事件 .+键码 @keyup.13=’show’ @keyup.enter 或者通过event.keyCode判断键码
vue采用数据驱动的写法和jquery的事件驱动想法还是有些差异的,下面上个综合点的例子
引用了两个线上地址较慢，稍等。。。。
**html 代码**
<!DOCTYPE html>
<html lang=”en”>
<title>app开发的前端框架有哪些问题:vue留言板</title>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .mark {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10086;
            height: 100%;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: all ease 0.3s;
            background: rgba(0, 0, 0, .6);
        }
        .model {
            z-index: 1008611;
            position: fixed;
            top: 0;
            left: 50%;
            -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
            visibility: hidden;
            width: 240px;
            height: 60px;
            transition: all .3s;
            opacity: 0;
            background: #344;
            border-radius: 2px;
        }
        .model>h4 {
            padding-left: 8px;
            color: #fff;
            margin-top: 3px;
            text-align: left;
        }
        .dialog-show .model {
            visibility: visible;
            opacity: 1;
            -webkit-transform: translate3d(-50%, 100px, 0) scale(1);
            -moz-transform: translate3d(-50%, 100px, 0) scale(1);
            -ms-transform: translate3d(-50%, 100px, 0) scale(1);
            transform: translate3d(-50%, 100px, 0) scale(1);
            opacity: 1;
        }
        .dialog-show .mark {
            opacity: 1;
            visibility: visible;
        }
        .close {
            position: absolute;
            top: 4px;
            right: 10px;
            width: 10px;
            border-radius: 50%;
            border: 1px solid #000;
            z-index: 222;
            text-decoration: none;
            color: #fff;
            line-height: 12px;
        }
        body {
            height: 800px;
        }
        .dialog-show {
            overflow-y: hidden;
        }
        button {
            line-height: 20px;
            border-radius: 2px;
            display: inline-block;
            text-shadow: 0px 0px 1px #fff;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #ccc;
            padding: 0 3px;
        }
        .ok {
            background: green;
        }
        .cancle {
            background: red;
            margin-left: 3px;
        }
        .btnbox {
            position: absolute;
            bottom: 4px;
            right: 15px;
        }
        .form {
            width: 400px;
            margin: 0 auto;
            position: relative;
        }
        .form>div {
            margin-top: 10px;
            text-align: center;
        }
        .form input {
            border-radius: 2px;
            border: 1px solid #ccc;
            width: 210px;
            line-height: 20px;
            padding-left: 4px;
        }
        .form .table {
            margin-top: 20px;
            box-sizing: border-box;
            border: 1px solid #000;
            border-radius: 10px;
        }
        .head,
        .showlist li {
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .head>p {
            display: box;
            width: 100px;
            text-align: center;
            color: #399;
            text-shadow: 0px 0px 1px #396;
        }
        .head {
            margin-top: 10px;
        }
        .showlist {
            margin-bottom: 10px;
        }
        .showlist li {
            margin-top: 10px;
        }
        .showlist li p {
            width: 100px;
            text-align: center;
            display: box;
            color: #000;
            text-shadow: 0px 0px 1px #999;
        }
    </style>
    <script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
    <script>
        $(function () {
            var vue = new Vue({
                el: ‘.form’,
                data: {
                    dataArr: [],
                    name: ”,
                    age: ”,
                    nowIndex: -1
                },
                methods: {
                    //添加
                    add: function () {
                        if (!this.age || !this.name) {
                            alert(‘请填写完整的信息’);
                            return;
                        }
                        this.dataArr.push({
                            name: this.name,
                            age: this.age
                        })
                        this.reset();
                    },
                    //重置
                    reset: function () {
                        this.name = ”;
                        this.age = ”;
                    },
                    //确认
                    ok: function (index) {
                        if (index != -2) {
                            this.dataArr.splice(index, 1);
                        } else {
                            this.dataArr = [];
                        }
                        this.close();
                    },
                    //删除
                    del: function (index) {
                        $(“body”).addClass(‘dialog-show’);
                        $(document).on(‘touchmove’, preventDefault);
                        this.nowIndex = index;
                    },
                    //关闭
                    close: function () {
                        $(document).off(‘touchmove’, preventDefault);
                        $(“body”).removeClass(‘dialog-show’);
                    }
                }
            })
            function preventDefault(e) {
                e.preventDefault();
            }
        })
    </script>
</head>
<body>
    <div class=”form”>
        <div>名字：
            <input type=”text” id=”name” v-model=”name” placeholder=”请输入名称” />
        </div>
        <div>年龄：
            <input type=”text” id=”name” v-model=”age” placeholder=”请输入年龄” />
        </div>
        <div class=”btnbox2″>
            <button class=”ok” @click.stop=’add()’>确认</button>
            <button class=”cancle” @click.stop=’reset()’>重置</button>
        </div>
        <div class=”table”>
            <div class=”head”>
                <p>序号</p>
                <p>名字</p>
                <p>年龄</p>
                <p>操作</p>
            </div>
            <ul class=”showlist”>
                <li v-for='(item,index) in dataArr’>
                    <p>{{index+1}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.age}}</p>
                    <p>
                        <button class=”dialog” @click=’del(index)’>删除</button>
                    </p>
                </li>
                <li v-show=”dataArr.length>0″>
                    <p @click=”del(-2)”>
                        <button>清空全部</button>
                    </p>
                </li>
                <li v-show=’dataArr.length==0′>
                    <p>暂无数据</p>
                </li>
            </ul>
        </div>
        <div class=”model”>
            <a href=”javascript:;” class=”close” @click=”close”>×</a>
            <h4>您确认删除吗</h4>
            <div class=”btnbox”>
                <button class=”ok” @click=”ok(nowIndex)”>确认</button>
                <button class=”cancle” @click=’close’>取消</button>
            </div>
        </div>
    </div>
    <div class=”mark”></div>
</body>
</html>
管理系统前端开发框架|前端在项目开发中如何选择框架|ui设计web前端开发框架
赞(0)
前端开发者 » Vue 学习笔记（一）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论