VUE的总结(2)

时间  2019-11-10
标签 vue 总结 繁體版
原文   原文链接

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

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：能够用@代替。vue

点击按钮，数字自增

<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>

点击按钮数字增长git

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>

这样就是每点击一次增长2github

获取事件源用$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.pngapi

冒泡

<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 再点击div1app

clipboard.png

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

阻止冒泡

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

clickDiv2(e){dom

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){ui

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只渲染一次

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程