Vue1--数据绑定/常用指令/自定义指令

Vue:
1.通过数据驱动界面更新，无需操作DOM更新界面
2.组件化开发：将网页拆分成一个个独立的组件编写，再通过封装好的组件拼接成一个完整的页面。

vue的基本模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js文件-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{name}}</p>
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                name:"jiaody" //要绑定的内容
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

MVVM设计模式

在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)

MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M

Vue中MVVM的划分:Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model

Vue中数据的单向传递:

“数据"交给"Vue实例对象”, “Vue实例对象"将数据交给"界面”

Model  ->  View Model                  ->   View

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "李南江"
        }
    });
</script>

Vue中数据的双向传递：

默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力

在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定

注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源

<body>
    <div id="app">
        <input type="text" v-model="msg">
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                msg:'双向绑定数据'
            }
        })
    </script>
</body>

在这里插入图片描述

v-once

只渲染一次，给标签添加v-once，当数据发生变化时，该标签中的数据不变

<body>
    <div id="app">
       <p v-once>只渲染一次：{{name}}</p>
        <p>当前数据：{{name}}</p>
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                name:'aaaaa'
            }
        })
    </script>
</body>

在这里插入图片描述

v-cloak

数据渲染之后自动显示元素

1.Vue数据绑定过程
1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上

正是在最终的HTML被生成渲染之前会先显示模板内容
所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容

2.如何解决这个问题
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
等到生成HTML渲染之后再重新显示

v-text和v-html

通过插值和v-text的方式不能解析html

<body>
    <div id="app">
       <p v-text="msg">---</p>
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                name:'aaaaa',
                msg:"<span>这是一个html标签</span>"
            }
        })
    </script>
</body>

在这里插入图片描述
通过v-html可以解析html：

<body>
    <div id="app">
       <p v-html="msg">---</p>
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                name:'aaaaa',
                msg:"<span>这是一个html标签</span>"
            }
        })
    </script>
</body>

在这里插入图片描述

v-if

条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
如果条件不满足根本就不会创建这个元素
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容
v-else不能单独出现
v-if和v-else中间不能出现其它内容

v-if可以从模型中获取数据：

<body>
    <div id="app">
        <p v-if="show">我是true</p>
        <p v-if="hidden">我是false</p> //条件不满足，不会创建该标签
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                show:true,
                hidden:false
            }
        })
    </script>
</body>

在这里插入图片描述
2. 可以直接赋值一个表达式：

<body>
    <div id="app">
        <p v-if="score >= 80">优秀</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
    </div>
    <script>
        let vue = new Vue({ //创建vue实例对象
            el:"#app", //要绑定的标签
            data:{
                score:75
            }
        })
    </script>
</body>

在这里插入图片描述

v-show

v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

v-if和v-show区别:

v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none

v-if和v-show应用场景:

由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素
由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏，不会反复创建和删除, 只是修改display的值
如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if

<body>
    <div id="app">
        <p v-show="show">我是显示</p>
        <p v-show="hidden">我是隐藏</p>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                show:true,
                hidden:false
            }
        })
    </script>
</body>

在这里插入图片描述

v-for

可以遍历数组, 字符, 数字, 对象

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in obj">{{key}}---{{value}}</li>
        </ul>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                obj:{
                    name: "lnj",
                    age: 33,
                    gender: "man",
                    class: "知播渔"
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-bind

不能通过插值给元素的属性绑定数据
通过v-model可以将数据绑定到input标签的value属性上，但v-model只适用于表单标签
v-bind专门用于给元素的属性绑定数据
格式：
v-bind:属性名称=“绑定的数据”
简写形式 :属性名称=“绑定的数据”

<body>
    <div id="app">
        <input type="text" v-bind:value="name">
        <input type="text" :value="name2">
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                name:'jiaody',
                name2:'aaaaa'
            }
        })
    </script>
</body>

在这里插入图片描述

v-bind绑定类名

:class="[‘需要绑定类名’, …]"
通过v-bind给class绑定类名, 不能直接赋值，必须把类名放在数组中
将类名放到数组中之后, 还需要利用引号将类名括起来才会去style中查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js文件-->
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .size{
            font-size: 100px;
        }
        .color{
            color: red;
        }
        .active{
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <p :class="['size','color','active']">ppppp</p>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                name:'jiaody',
                name2:'aaaaa'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
可以通过对象来决定是否需要绑定–》格式: {‘需要绑定的类名’ : 是否绑定}

    <div id="app">
        <p :class="['size','color',{'active':false}]">ppppp</p>
    </div>

在这里插入图片描述
可以使用Model中的对象来替换数组

<body>
    <div id="app">
        <p :class="obj">ppppp</p>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                obj:{
                    'size':true,
                    'color':false,
                    'active':false
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-bind绑定样式

将数据放到对象中:

    <div id="app">
        <p :style="{color:'red','font-size':'50px'}">ppppp</p>
    </div>

在这里插入图片描述
2. 将数据放到Model对象中
如果Model中保存了多个样式的对象，想将这多个对象中的样式都赋值给某标签，则将这些对象保存在数组中传递给style

<body>
    <div id="app">
        <p :style="[obj1,obj2]">ppppp</p>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                obj1:{
                    'color':'yellow'
                },
                obj2:{
                    'background-color':'blue'
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-on

给元素绑定监听事件，在指定事件名称的时候不需要写on。
当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
格式：

v-on:事件名称=“回调函数名称”
@事件名称=“回调函数名称”
可以给回调函数添加参数

<body>
    <div id="app">
       <button @click="func('jiaody',23)">按钮</button>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                func(name,age){
                    alert(name+age)
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-on修饰符

1 .once - 只触发一次回调。
默认情况下，事件的回调函数会反复执行：只要事件被触发就会执行
添加 .once只执行一次回调函数

<body>
    <div id="app">
        <button @click.once="func">按钮</button>
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                func(){
                    alert('回调函数执行')
                }
            }
        })
    </script>
</body>

2 .prevent - 调用 event.preventDefault()。阻止默认行为（一般用于超链接点击后跳转等）

    <div id="app">
        <a href="http://www.it666.com" @click.prevent="func">超链接</a> //点击后执行回调你函数，但不会跳转到href中指定的页面
    </div>

3 .stop - 调用 event.stopPropagation()。阻止事件冒泡
在嵌套的元素中，如果这些元素都添加了相同的事件，默认情况下会有事件冒泡–从里到外依次执行事件的回调函数，使用 .stop可阻止事件冒泡
4 .self - 只当事件是从绑定的元素本身触发时才触发回调。
5. .capture - 触发事件捕获。
6. 按键修饰符
通过按键修饰符监听特定按键触发的事件，例如: 可以监听当前事件是否是回车触发等

<body>
    <div id="app">
        <input type="text" @keyup.enter="func">
    </div>
    <script>
        let vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                func(){
                    alert('enter')
                }
            }
        })
    </script>
</body>

可以自定义按键修饰符：
keycode对照表

<body>
    <div id="app">
        <input type="text" @keyup.f12="func">
    </div>
    <script>
        Vue.config.keyCodes.f12 = 123;
        let vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                func(){
                    alert('enter')
                }
            }
        })
    </script>
</body>

自定义全局指令

在任何一个Vue实例控制的区域中都可以使用。
Vue.directive(‘自定义指令名称’, {
// bind: 指令被绑定到元素上的时候执行（用于添加样式）
// inserted: 绑定指令的元素被添加到父元素上的时候执行（用于添加事件）
生命周期名称: function (el) {
//el是el就是被绑定指令的那个元素
指令业务逻辑代码
}
})

<body>
    <div id="app">
        <input type="text" v-focus>
        <p v-color>这是一个p</p>
    </div>
    <script>
        Vue.directive('focus',{
            inserted:function(el){
                el.focus();
            }
        });
        Vue.directive('color',{
            bind:function(el){
                el.style.color='red';
            }
        })
        let vue = new Vue({
            el:"#app",
            data:{
            }
        })
    </script>
</body>

在这里插入图片描述
在bind函数中，第二个参数是对象，用来接收传递的数据

<body>
    <div id="app">
        <p v-color="color">这是一个p</p>
    </div>
    <script>
        Vue.directive('color',{
            bind:function(el,obj){
                el.style.color=obj.value;
            }
        })
        let vue = new Vue({
            el:"#app",
            data:{
                color:'yellow'
            }
        })
    </script>
</body>

在这里插入图片描述

自定义局部指令

只能在自定义的那个Vue实例中使用。
给创建Vue实例时传递的对象添加
directives: {
// key: 指令名称
// value: 对象
‘color’: {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}

<body>
    <div id="app1">
        <p v-color="color">这是一个p</p>
    </div>
    <div id="app2">
        <p v-color="color">这是一个p</p>
    </div>
    <script>
        let vue1 = new Vue({
            el:"#app1",
            data:{
                color:'yellow'
            }
        })
        let vue2 = new Vue({
            el:'#app2',
            data:{
                color:'red'
            },
            directives:{
                'color':{
                    bind:function(el,obj){
                        el.style.color = obj.value
                    }
                }
            }
        })
    </script>
</body>

在这里插入图片描述

jiaody111

发布了119 篇原创文章 · 获赞 1 · 访问量 3952

私信关注