Vue学习笔记(二)-Vue指令的学习

插值表达式

正常情况我们在页面取值都是通过来取值

1
2
3

<div id="app">
	<p>{{ msg }}</p>
</div>

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

页面显示效果
在这里插入图片描述

Vue指令之v-cloak

在使用插值表达式的时候，如果将项目发布到服务器上，出现网速慢的情况，浏览器不能及时接收到vue.js，这个时候会出现闪烁现象，即这个符号会出现在网页上，等到浏览器接收完数据后，才会将替换成真正的数据。如下图：
在这里插入图片描述
解决这个问题，可以使用v-cloak指令解决：

<style>
    [v-cloak]{
        display: none;
    }
</style>

1
2
3

<div id="app">
	<p v-cloak>{{ msg }}</p>
</div>

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

Vue指令之v-text和v-html

v-text：默认v-text没有闪烁问题，于插值表达式不同的是v-text会覆盖元素中原本的内容，而插值表达式只会替换自己的占位符，不会把整个元素的内容清空。
v-html：于v-text不同的是，v-html会识别输出html标签，而v-text会将内容完整的输出不识别标签。
1
2
3
4
5
<div id="app">
<div v-cloak>{{ msg2 }}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg2:'<h1>我是一个h1</h1>'
        }
    })
</script>

效果如下图：
在这里插入图片描述

Vue指令之v-bind

v-bind 是一个vue中提供的用于绑定属性的指令
v-bing: 指令可以被简写为 :要绑定的属性

v-bind 中，可以写合法的表达式

<div id="app">
	<input type="button" value="按钮1" v-bind:title="mytitle + '123'">
	<input type="button" value="按钮2" :title="mytitle + '123'">
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            mytitle:'这是自己定义的一个title'
        }
    })
</script>

效果图下图：
在这里插入图片描述

Vue指令之v-on和事件修饰符

Vue中提供了v-on:事件绑定机制，缩写为@

<div id="app">
    <input type="button" value="按钮" v-on:click="show">
    <input type="button" value="按钮" @click="show">
</div>

<script>
    new Vue({
        el:'#app',
        methods:{ //这个methods属性中定义了当前Vue实例中所有可用的方法
            show: function(){
                alert('Hello');
            }
        }
    })
</script>

效果如下图：
在这里插入图片描述
事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器的使用事件捕获模式
.self 只当前事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

.stop和.self的区别是：.self只会阻止自己身上的冒泡行为并不会真正的阻止冒泡行为的触发。
示例代码：

<!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>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用.stop阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div> -->

        <!-- 使用 .prevent 阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->

        <!-- 使用 .capture 实现捕获触发的机制 -->
        <!-- <div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div> -->

        <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
        <!-- <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div> -->

        <!-- 使用 .once 只触发一次事件处理函数 -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

        <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为 -->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{ 
                div1Handler(){
                    console.log('这是触发了 inner div 的点击事件')
                },
                btnHandler(){
                    console.log('这是出发了 button 的点击事件')
                },
                linkClick(){
                    console.log('这是触发了连接的点击事件')
                }
            }
        });
    </script>
</body>
</html>

跑马灯效果实现

分析：

给开启跑马灯效果的按钮绑定一个时间 v-on或@
在按钮的时间处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符串截取下来，放到最后一个位置即可；

为了实现点击一下按钮，自动截取的功能，需要把上一个步骤的代码，放到一个定时器中去；

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 2.创建一个要控制的区域 -->
    <div id="app">
    <div>{{ msg }}</div>
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="stop">
    </div>
    <script>
        //注意在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或者this.方法名进行访问，这里的this就表示我们new出来的vm实例对象
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪~~~~！',
                intervalId:null //在data上定义一个定时器id
            },
            methods:{
                lang(){
                    if(this.intervalId!=null)return;
                    this.intervalId = setInterval(()=>{
                        //获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到后面的所有字符
                        var end = this.msg.substring(1);
                        //重新拼接得到新的字符串并赋值给this.msg
                        this.msg = end + start;
                        //注意：vm实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面
                    },400)
                },
                stop(){
                    clearInterval(this.intervalId);
                    //每当清除了intervalId之后重新赋值null
                    this.intervalId=null;
                }
            }
        })
    </script>
</body>
</html>

Vue指令之v-model和双向数据绑定

v-bind 只能实现数据的单向数据绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
使用 v-model 指令，可以实现表单元素和Model中数据的双向数据绑定

注意：v-model 只能运用在表单元素中使用
示例代码：

<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'大家都是好孩子，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
        },
        methods:{ 
        }
    });
</script>

效果：
在这里插入图片描述

简易计算器案例

<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="calc">

    <input type="text" v-model="result">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
        },
        methods:{ 
            calc(){ //计算器算数的方法
                //逻辑：
                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;
                }
                // var cadeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                // this.result = eval(cadeStr);
            }
        }
    });
</script>

在Vue中使用样式

使用class样式

数组

1	<h1 :class="['red','thin']">这是一个H1标签</h1>

数组中使用三元表达式

1	<h1 :class="['red','thin'],isactive?'active':''">这是一个H1标签</h1>

数组中嵌套对象

1	<h1 :class="['red','thin'],{'active':isactive}">这是一个H1标签</h1>

直接使用对象

1	<h1 :class="{red:true,italic:true,active:true,thin:true}">这是一个H1标签</h1>

样例代码：

<style>
   .red{
        color:red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <!-- <h1 class="red thin">这是一个很大很大的一个H1，大到你无法想象！！！</h1> -->

    <!-- 第一种使用方式，直接传递一个数组，注意：这里的class需要用 v-bind做数据绑定 -->
    <!-- <h1 :class="['thin','italic']">这是一个很大很大的一个H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用三元表达式 -->
    <!-- <h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的一个H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用对象来代替三元表达式，来提高代码的可读性 -->
    <!-- <h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的一个H1，大到你无法想象！！！</h1> -->

    <!-- 在为 class 使用 v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号,也可以不带引号；属性的值是一个标识符 -->
    <h1 :class="calssObj">这是一个很大很大的一个H1，大到你无法想象！！！</h1>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,
            calssObj:{'red':true,'thin':true,active:true,italic:true}
        },
        methods:{ 
        }
    });
</script>

使用内联样式

直接在元素上通过 :style 的样式，书写样式对象

1	<h1 :style="{color:'red','font-size':'40px'}">这是一个H1</h1>

将样式对象，定义到 data 中，并直接引用到 :style 中

//在data上的定义样式
data:{
	h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
}
//在元素中，通过属性绑定的样式，将样式对象应用到元素中
<h1 :style="h1StyleObj">这是一个H1</h1>

在 :style中通过数组，引用多个 data 上的样式对象

//在data上定义样式
data{
	h1StyleObj:{color:'red',''font-size':'40px','font-weight':'200'},
	h1StyleObj2:{font-style:'italic'}
}
//在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="[h1StyleObj,h1StyleObj2]">这是一个H1</h1>

Vue指令之v-for和key属性

迭代数组

1
2
3

<ul>
	<li v-for="(item,i) in list">索引：{{ i }} --- 姓名：{{ item.name }} ---年龄：{{ item.age }}</li>
</ul>

迭代对象中的属性

1 2	<!-- 遍历对象身上的属性 --> <div v-for="(val,key,i) in userInfo">{{ val }} --- {{ key }} --- {{ i }}</div>

迭代数字

1	<p v-for="i in 10">这是第{{ i }}个p标签</p>

** 2.2.0+的版本里，当在组件中使用v-for时，key现在是必须的。**
当vue.js用v-for正在更新以渲染过的元素列表时，它默认用“就她复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染的每个元素。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每一项提供一个唯一key属性。

Vue指令之v-if和v-show

一般来说，v-if有更高的切换消耗而v-show有更高的渲染消耗，因此，如果需要频繁切换v-show较好，如果运行时条件不大可能改变v-if较好。

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- v-if 的特点：每次都会重新删除或创建元素 -->
    <!-- v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if ，推荐使用v-show -->
    <!-- 如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if -->
    <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:{ 
        }
    });
</script>