VUE的总结(2)

头像
李钢铁
    阅读 11 分钟
    40

    用到的代码： https://github.com/liyang1234...
    vue.js API传送门： https://cn.vuejs.org/v2/api/

    v-on指令

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
</head>
<body>
    <div id="app">
        <button v-on:click="clickhandler">btn</button>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                clickhandler(){
                    console.log(Math.random());
                }
            }
        });
    </script>
</body>
</html>

    clipboard.png

    点击按钮产生了随机数，v-on：可以用@代替。

    点击按钮，数字自增

        <div id="app">
        <button v-on:click="clickhandler">btn</button>
        <h1>{{num}}</h1>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                clickhandler(){
                    this. num++;
                }
            }
        }); 
    </script>

    点击按钮数字增加

    clipboard.png

    但是有时候我们是要传参数的

    <div id="app">
    <button v-on:click="clickhandler(2)">btn</button> <!-- 相当于函数调用 2是实参  -->
    <h1 v-text="num"></h1>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//相当于函数声明
            clickhandler(n){
                this. num += n;
            }
        }
    });
</script>

    这样就是每点击一次增加2

    获取事件源用$event

    <div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 相当于函数调用 2是实参  -->
    <h1 v-text="num"></h1>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//相当于函数声明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            }
        }
    });
</script>

    clipboard.png

    可以在按钮上绑定多个事件

    <div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 相当于函数调用 2是实参  -->
    <h1 v-text="num"></h1>

    <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//相当于函数声明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            },
            doThis(e){
                console.log('doThis');
            },
            doThat(e){
                console.log('doThat');
            }
        }
    });
</script>

    按下鼠标输出doThis 放开鼠标输出doThat
    clipboard.png

    冒泡

    <style>
    #div1{
        width: 400px;
        height: 400px;
        background: red;
    }
    #div2{
        width: 200px;
        height: 200px;
        background: green;
    }
</style>

    </head>
    <body>

    <div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 相当于函数调用 2是实参  -->
    <h1 v-text="num"></h1>
    <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button>

    <div id="div1" @click="clickDiv1">
        <div id="div2" @click="clickDiv2"></div>
    </div>
</div>


<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//相当于函数声明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            },
            doThis(e){
                console.log('doThis');
            },
            doThat(e){
                console.log('doThat');
            },
            clickDiv1(){
                console.log('div1');
            },
            clickDiv2(){
                console.log('div2');
            }
        }
    });
</script>

    点击div2 再点击div1

    clipboard.png

    先捕获后冒泡，冒泡从里往外，先输出div2，再输出div1。

    阻止冒泡

    <div id="div1" @click="clickDiv1">
        <div id="div2" @click="clickDiv2($event)"></div>
</div>
clickDiv1(){
                console.log('div1');
            },

    clickDiv2(e){

                    console.log('div2');
                e.stopPropagation();
            }

    点击div2,只输出div2
    clipboard.png

    使用vue的方法 @click.stop

    <div id="div1" @click="clickDiv1">
    <div id="div2" @click.stop="clickDiv2($event)"></div>
</div>
clickDiv1(){
                console.log('div1');
            },

    clickDiv2(e){

                    console.log('div2');
            }

    同样可以阻止冒泡
    clipboard.png

    阻止浏览器默认行为

    baidu
    点击超链接会默认跳转到百度网页，

    <a href="http://www.baidu.com" @click="baidu($event)">baidu</a>
baidu(e){
             e.preventDefault();
        }

    点击超链接之后不会跳转了
    clipboard.png

    vue提供的修饰符 .prevent

    <a href="http://www.baidu.com" @click.prevent="baidu($event)">baidu</a>

    同样能阻止默认行为

    两个修饰符可以连着写

    <a href="http://www.baidu.com" @click.stop.prevent="baidu($event)">baidu</a>


    <input type="text" @keyup="keyuphandler($event)">
keyuphandler(e){
     if(e.keyCode == 13){//13是回车
         console.log('hahahahh');
     }
}
当在输入框中按回车键时，输出一串 。。。

    clipboard.png

    keyCode总结：https://www.cnblogs.com/daysm...

    .once修饰符表示只能一次

    <button v-on:click.once="clickhandler(2,$event)">btn</button>
    按钮只能点击一次
    clipboard.png

    v-model指令

    原理

        <div id="app">
        用户名: <input type="text" v-model="username">
        <h4>用户名是：{{username}}</h4>
    </div>

    <script src=vue.min.js></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: ''
            }
        });
    </script>

    input框里输入什么就显示什么
    clipboard.png

    原理:<input>相当于View层，通过v-model绑定上data里面的username,将数据自动同步到Model层,双花括号将两者联系起来，Model层将数据同步到“用户名是：”的View层，这就是双向数据绑定。

    clipboard.png

    v-model只限制于能使用的标签：<input><select><textarea>

    v-model自动将radio设成单选

     性别: <input type="radio">男
 <input type="radio">女

    现在是单选框可以多选
    clipboard.png

    性别: <input type="radio" name="sex">男
<input type="radio" name="sex">女

    添加name属性可以实现单选
    clipboard.png

    现在用v-model试一下

    性别: <input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
<h4>用户的性别是:{{sex}}</h4>

    后台接收数据接的是value

    clipboard.png

    多选框

    爱好:<input type="checkbox" value="篮球" v-model="hobbys">篮球
     <input type="checkbox" value="足球" v-model="hobbys">足球
     <input type="checkbox" value="排球" v-model="hobbys">排球
     <h4>用户的爱好是:{{hobbys}}</h4>
data: {
            hobbys:[]
        }

    clipboard.png

    下拉列表

     公司:<select name="" id="" v-model="company">
         <option value="百度">百度</option>
         <option value="百度">阿里巴巴</option>
         <option value="百度">腾讯</option>
     </select>
<h4>用户的公司是:{{company}}</h4>
data:{
        company:' ' 
     }

    clipboard.png

    textarea

     <textarea value="自我介绍" cols="30" rows="10" id="" v-model="description"></textarea>
 <h4>我的描述是：{{description}}</h4>
 data: {
     description:''
     }

    clipboard.png

    几个修饰符

    .lazy 当鼠标挪出input框的时候才回显

                用户名: <input type="text" v-model="username">
            <h4>用户名是：{{username}}</h4>

            用户名lazy: <input type="text" v-model.lazy="username">
            <h4>用户名是：{{username}}</h4>

    clipboard.png
    clipboard.png

    .number

                 年龄:<input type="text" v-model="age">
            <h4>用户的年龄是:{{age}}</h4>

    clipboard.png
    clipboard.png

    得到的数据类型是 string

                年龄:<input type="text" v-model.number="age">
            <h4>用户的年龄是:{{age}}</h4>

    clipboard.png
    clipboard.png

    得到的数据类型是 number

    将type改成number,输入框可以有增加减少功能

                年龄:<input type="number" v-model.number="age">
            <h4>用户的年龄是:{{age}}</h4>

    clipboard.png

    .trim去掉首尾空格

              用户名trim: <input type="text" v-model.trim="username">
          <h4>用户名是：{{username}}</h4>

    clipboard.png

    v-bind绑定属性

    <body>
<div id="app">
    <img src="imgSrc" alt="">
</div>

<script src="vue.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://cn.vuejs.org/images/logo.png'
        }

    });

    想把ImgSrc的地址作为img标签中的图片，但是会报错：

    clipboard.png

    <img v-bind:src="imgSrc" alt="">OK了

    clipboard.png

    v-bind的简写形式是冒号:

    小例子

        .aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }
    <div class="aa"></div>

    clipboard.png

     
         .aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }

    v-bind的方式

            .aa{
            width: 100px;
            height: 100px;
            background: #F00;
        }
        <div :class="className"></div>
        data:{
            className:'aa'
            }

    值控制是否显示

        .aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }
    <div :class="className"></div>
    <div :class="{aa:isAA}"></div>
    data:{
        isAA: true
        }

    意思是样式显示取决于isAA是否为true
    clipboard.png

    样式写在对象中

    <div :style="styleObj"></div>
 styleObj: {
                width: '100px',
                height: '100px',
                background: '#0f0'

            }

    clipboard.png

    其他指令

    v-pre指令原样输出

    <body>
<div id="app">
    <h1>{{msg}}</h1>

</div>

<script src="vue.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        }
    });
</script>

    clipboard.png

    <h1 v-pre>{{msg}}</h1>

    clipboard.png

    v-cloak指令渲染完成后显示

    v-once只渲染一次

    vue.js
    李钢铁
    830 声望47 粉丝

    简单粗暴

    « 上一篇
    VUE的总结(1)
    下一篇 »
    /*eslint-disable*/

    引用和评论

    推荐阅读
    头像
    picture-in-picture

    李钢铁阅读 3.5k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.3k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 562评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 979

    0 条评论
    得票最新