Vue基础知识系列(二)Vue指令集合

时间  2020-01-13
标签 vue 基础 知识 系列 指令 集合 栏目 快乐工作 繁體版
原文   原文链接

一、插值表达式(mastach语法)、v-text、v-html、v-cloak

<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<!--{{}} 这个是插值表达式，使用v-cloak，再给定一个display：none,能够解决在F12-Network-slow3G 下{{}}出现闪烁的问题-->
<div id="app">
    <p v-cloak>{{msg}}</p>
    <!--v-text 后面跟data，能够不使用插值表达式 同时v-text是没有闪烁的问题的-->
    <!--v-text会覆盖元素中本来的内容，可是插值表达式 只会替换本身的占位符，不会把 整个元素的内容所有清空-->
    <h4 v-text="msg2"></h4>
    <div v-html="msg2"></div>
    <!--v-bind: 是Vue中提供的用于绑定属性的命令-->
    <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show1">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "123",
            msg2:"<h1>这是一个很大的h1</h1>",
            mytitle:"这是一个本身定义的title"
        },
        methods: {
            show1:function () {
                alert("Hello")
            }
        }
    })
</script>
复制代码

脚下留心

插值表达式{{}}和v-text，v-html，v-cloak的区别
  • {{}}大括号的方法叫作插值法，也就是Mustache读做mastchi，这是最经常使用的。插值表达式是Vue中最广泛的写法，用法。插值表达式 只会替换本身的占位符，不会把 整个元素的内容所有清空
  • v-text后面跟data，直接给属性，是没有闪烁的问题会覆盖元素中本来的内容，可是插值表达式 只会替换本身的占位符，不会把 整个元素的内容所有清空。v-text用的不是特别灵活
  • v-html：至关于带标签的，可是服务器有时候直接给咱们返回带标签的数据，若是咱们想要展现的话，会带标签，咱们不要标签，直接用v-html，去掉标签进行解析v-html=""
  • v-cloak +插值表达式{{}}的写法，会有闪烁问题，直接给【v-cloak】一个display：none 就行了

二、v-bind和v-on的用法

  • v-bind是Vue提供的属性绑定机制，简写为 :html

    常见的状况是，src属性，若是直接给src一个图片的连接地址，那么会把src后面的当成一个字符串处理。vue

    <div id="app">   
<input type="text" v-model="msg"> <p>Hello{{msg}}</p> <img src="imgUrl" alt=""></div>//这种会当作字符串处理，想要引用，必须使用v-bind属性绑定机制 <img :src="imgUrl" alt=""></div> <script> const vm = new Vue({ el: '#app', data: { msg: 'Vue...', imgUrl: 'https://pics1.baidu.com/feed/e824b899a9014c08235e06b0789f460d7af4f4a3.jpeg?token=b81b371198390d35dfca4c7701405c49&s=B481B557D08F5EEE084DB46B03003070' } }) </script> 复制代码

  • v-on是Vue提供的事件绑定机制，常见的有click，dbclick，mouseover，mouseout，mouseenter，mouseleave等；可是要在后面加一个methods 能够参考下面代码块数组

    <body>
<div id="app"> <p>{{msg}}</p> <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show"> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "123" }, methods: { show:function () { alert("Hello") } } }) </script> 复制代码

三、事件修饰符--.stop、.prevent、.capture 、.self、.once

  • .stop：阻止事件冒泡行为：从内到外有多个事件，当你点击最里面的盒子的时候，它的事件会触发，会继续一次冒泡到最外面的盒子的事件，这样的行为叫作冒泡
  • .prevent：阻止事件的默认行为：事件自己有一个行为，可是经过点击等事件，还会有其余事件
  • .capture：添加事件监听器时使用事件捕获模式
  • .self：只触发本身的事件
  • .once：数据只能使用一次。直接在想要使用一次的标签里面写上v-once
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        #app {
            width: 100%;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--stop阻止事件冒泡-->
        <!--<div  @click="divHanlder">
            <input type="button" id="inner" value="inner按钮" @click.stop="btnHanlder">
        </div>-->
        <!--prevent 阻止事件的默认行为-->
        <a href="http://www.baidu.com" @click="linkClick">有问题，先百度</a>
    </div>
    <script>
        var vm =new Vue ({
            el:"#app",
            data:{},
            methods:{
                divHanlder(){
                    console.log("这是出发了div的事件");
                },
                btnHanlder(){
                    console.log("这是出发了btn的事件");
                },
                linkClick (){
                    console.log("有问题，先百度")
                }
            }
        })
    </script>
</body>
</html>

复制代码

脚下留心

  • 注意事件修饰符的位置，修饰谁，就放到哪里

四、v-model 的数据双向绑定

<body>
    <div id="app"> <!--v-bind 能够实现属性的绑定，可是绑定数据是单向的，这里可使用v-model进行数据的双向绑定--> <h4>{{msg}}</h4> <input type="text" style="width: 100%;" v-model="msg"> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"v-model实现数据的双向绑定" } }) </script> 复制代码
脚下留心
  • v-bind 能够实现属性的绑定，可是绑定数据是单向的；这里可使用v-model进行数据的双向绑定
  • v-model 后面没有: 号，直接跟的等号来进行数据的双向绑定
  • 数据的双向绑定：在V层也能够修改数据，普通的v-bind绑定数据只能经过修改M层的数据才能够修改数据，v-model能够在V层修改数据，同时M层数据也会获得相应的修改，这就是数据的双向绑定
  • 注意v-bind 和v-model的区别

案例--简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="clac">
    <input type="text" v-model="result">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: "-"
        },
        methods: {
            clac() { //计算器算术方法
                // 逻辑
                switch (this.opt) {
                    case "+":
                        this.result=parseInt(this.n1)+parseInt(this.n2)
                        break;
                    case "-":
                        this.result=parseInt(this.n1)-parseInt(this.n2)
                        break;
                    case "*":
                        this.result=parseInt(this.n1)*parseInt(this.n2)
                        break;
                    case "/":
                        this.result=parseInt(this.n1)/parseInt(this.n2)
                        break;
                }
            }
        }
    })
</script>
</body>
</html>
复制代码

五、Vue中使用样式

使用class样式

  1. 数组：使用v-bind进行数据绑定，属性须要使用单引号来引发来
  2. 数组中使用嵌套对象的方式来代替三元表达式，三元表达式代码不易读
  3. 直接使用对象，属性名能够带引号，也能够不带引号
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的样式操做-class</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<style>
    .thin {
        font-style: italic;
    }
    .active {
        color: red;
    }
</style>
<body>
<div id="app">
    <!--第一种使用方式，直接传递一个数组，注意：这里的class须要使用v-bind进行单向的数据绑定，下面的：就是使用的v-bind的缩写，数组里面的class须要使用单引号-->
    <!--<h1 :class="['thin']">这是一个很大的h1，很大很大，大到你没法想象</h1>-->
    <!--在数组中使用对象来带起三元表达式，提升代码的可读性-->
    <!--<h1 :class="['thin',{'active':flag}]">这是一个很大的h1，很大很大，大到你没法想象</h1>-->
    <!--在为class使用v-bind绑定对象的时候，对象的属性是类名，在这种状况下属性也就是类名，能够带引号，也能够不带引号；属性的值是个标识符-->
    <h1 :class="{'thin':true,'active':true}">这是一个很大的h1，很大很大，大到你没法想象</h1>
</div>
<script>
    var vm=new Vue ({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
        }
    })
</script>
</body>
</html>
复制代码

使用内联样式

  1. 直接在元素上经过 :style的形式，书写样式对象
<h1 :style="{'color':'green','font-weight':'700'}">这是一个很大的h1，很大很大，大到你没法想象</h1>
复制代码
  1. 将样式对象，定义到data中，并直接引用到 :style中
<h1 :style="objStyle">这是一个很大的h1，很大很大，大到你没法想象</h1>
var vm=new Vue ({
        el:"#app",
        data:{
            objStyle:{'color':'red','font-weight':'400'}
        },
        methods:{
        }
    })
复制代码
  1. 在 :style中经过数组，引用多个data上的样式对象 这个和上面 :style经过数组引用一个方法同样，只是多增长了对象，对象之间使用逗号隔开
脚下留心

经过数组的方式添加多个对象，不能使用{}，须要使用[]服务器

<h1 :style="[objStyle1,objStyle2]">这是一个很大的h1，很大很大，大到你没法想象</h1>
<script>
    var vm=new Vue ({
        el:"#app",
        data:{
            objStyle:{'color':'red','font-weight':'400'},
            objStyle1:{'color':'red','font-weight':'400'},
            objStyle2:{'font-size':"12px"}
        },
        methods:{
        }
    })
</script>
复制代码

五、v-for和key属性

  • 循环普通数组
<div id="app">
        <p v-for="item in list">{{item}}</p>
    </div>
    <script>
        var vm =new Vue({
            el:"#app",
            data:{
                list:[1,2,3,4,5,6,7,8]
            },
            methods:{
            }
        })
    </script>
复制代码
  • 循环复杂数组
<div id="app">
    <p v-for="usr in list">ID:{{usr.id}}---名字:{{usr.name}}</p>
</div>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:"zs1"},
                {id:2,name:"zs2"},
                {id:3,name:"zs3"},
                {id:4,name:"zs4"},
                {id:5,name:"zs5"},
                {id:6,name:"zs6"},
                {id:7,name:"zs7"}
            ]
        },
        methods:{
        }
    })
</script>
复制代码
  • 循环对象
<div id="app">
        <p v-for="(val,key,i) in user">值是：{{val}}---键是：{{key}}，索引：{{i}}</p>
    </div>
    <script>
        var vm =new Vue ({
            el:'#app',
            data:{
               user:{
                   id:1,
                   name:'托尼',
                   gender:'男'
               }
            },
            methods:{
            }
        })
    </script>
复制代码
  • 迭代数字
<div id="app">
    <p v-for="qqq in 10">这是第{{qqq}}次循环</p>
</div>
<script>
    var vm =new Vue ({
        el:'#app',
        data:{
        },
        methods:{
        }
    })
</script>
复制代码
脚下留心
  • in 后面能够放普通数组，数组对象，对象，还能够放数字，数字是从1开始的
  • v-for 迭代数字的时候，in后面的数字，起始位置是从1开始的，和索引不同，索引是从0开始的

六、v-if和v-show

  • v-if 每次都会删除元素，而后从新建立元素
  • v-show 每次不会从新进行DOM的删除和建立操做，只是切换属性，将display设置成none
  • v-if 有较高的切换性能；v-show 有较高的初始渲染消耗。若是涉及到元素的频繁切换，最好不要使用v-if，使用v-show
<div id="app">
    <!-- v-if 每次都会删除元素，而后从新建立元素 v-show 每次不会从新进行DOM的删除和建立操做，只是切换属性，将display设置成none v-if 有较高的切换性能，v-show 有较高的初始渲染消耗，若是涉及到元素的频繁切换，最好不要使用v-if，使用v-show --> <input type="button" value="toggle" @click="flag=!flag"> <h3 v-if="flag">这是一个v-if控制的元素</h3> <h3 v-show="flag">这是一个v-show控制的元素</h3> </div> <script> var vm = new Vue({ el: '#app', data: { flag: true }, methods: { // toggle() { // this.flag = !this.flag // } } }) </script> 复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程