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

豆沙小饼干
487 阅读10分钟

1、插值表达式(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 就好了

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

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

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

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

3、事件修饰符--.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>

脚下留心

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

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

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

5、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开始的

6、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>
avatar
文章
阅读
粉丝