Vue快速了解并上手-2

最新推荐文章于 2024-07-04 15:06:45 发布

菜鸟一枚在这

最新推荐文章于 2024-07-04 15:06:45 发布

阅读量544

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121275785

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

系列文章目录

上期我们讲解了一部分vue的基础，表格等等知识，这一期我们继续讲解vue

1、系统指令

1.1、v-bind

作用: 绑定标签上的任何属性
场景: 当标签上的属性是变量/动态/需要改变的
用法:

// ID为数据对象中的变量值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }
        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <p :id="ID1"></p>
        <p :id="ID2"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                ID1: 'obox1',
                ID2: 'obox2',
                isBin: true
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

1.1.1、v-bind绑定class对象

用法: 绑定class对象语法 :class="{ class名称: 布尔值}"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }
        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }
        .class1{

        }
        .class2{

        }
        .class3{

        }
        .class4{
            
        }
    </style>
</head>

<body>
    <div id="app">
        <p :id="ID1" class="class1" :class="bind_class_01"></p>
        <p :id="ID2" class="class3" :class="bind_class_02"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                ID1: 'obox1',
                ID2: 'obox2',
                bind_class_01: 'class2',
                bind_class_02: 'class4',
                isBin: true
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">
    <p :class="{class1:isBin1}"></p>
    <p :class="{class1:isBin2}"></p>
    <p :id="ID1" class="class1" :class="bind_class_01"></p>
    <p :id="ID2" class="class3" :class="bind_class_02"></p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.1.2、绑定class数组

绑定class数组语法 :class="[a,b]"
a、b为data属性的key
data中key对应的value 为class名字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">
    <p :class="[ID1,ID2]"></p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.2、绑定style（对象）

1.2.1、绑定单个style

语法 :style="{css属性名:属性值}"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">
    <p :style="style">p1</p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            }
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.2.2、绑定style数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">
    <p :style="[style,style2]">p1</p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            },
            style2:{
                fontSize:"18px"
            }
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.3、v-model

作用: 表单元素的绑定
特点: 双向数据绑定
数据发生变化可以更新到界面
通过界面可以更改数据
v-model 绑定表单元素，会忽略所有表单元素的 value 、 checked 、 selected 特性的初始值
表单元素会将 Vue 实例的data中的数据作为数据来源，所以应该在 data 选项中声明初始值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">
    <p :style="[style,style2]">{{msg}}</p>
    <input type="text" v-model="msg">
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok',
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            },
            style2:{
                fontSize:"18px"
            }
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.3.1、使用v-bind实现v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

        }
    </style>
</head>

<body>
<div id="app">

    <p :style="[style,style2]">{{msg}}</p>
    <input type="text" :value="msg" @input="fn($event)">
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok',
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            },
            style2:{
                fontSize:"18px"
            }
        },
        methods: {
            fn(e) {
            //msg=最新的value
                this.msg = e.target.value
            }
        }
    })
</script>
</body>

</html>

在这里插入图片描述

1.3.2、v-mode绑定其他元素

我们可以去查看vue的官方文档和中文社区，这里就不做详细介绍了。

1.4、v-cloak

场景: 解决页面初次渲染时页面模板闪屏现象

写入v-cloak指令
在style里面加给v-cloak加上display: none;

注意: 避免多次写入标签可以一次性将v-cloak引用在实例视图上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

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

<body>
<div id="app" v-cloak>

    <p :style="[style,style2]">{{msg}}</p>
    <input type="text" :value="msg" @input="fn($event)">
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok',
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            },
            style2:{
                fontSize:"18px"
            }
        },
        methods: {
            fn(e) {
            //msg=最新的value
                this.msg = e.target.value
            }
        }
    })
</script>
</body>

</html>

这样我们再刷新的时候就不会出现闪屏的现象了。

1.4、v-once

作用: 指令所在元素只渲染一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

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

<body>
<div id="app" v-cloak>

    <p :style="[style,style2]" v-once>{{msg}}</p>
    <input type="text" :value="msg" @input="fn($event)">
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok',
            ID1: 'obox1',
            ID2: 'obox2',
            bind_class_01: 'class2',
            bind_class_02: 'class4',
            isBin1: true,
            isBin2: false,
            style:{
                color:'red'
            },
            style2:{
                fontSize:"18px"
            }
        },
        methods: {
            fn(e) {
            //msg=最新的value
                this.msg = e.target.value
            }
        }
    })
</script>
</body>

</html>

使用之后，p的值就不会改变了，智慧渲染一次。

2、过滤器

场景: 格式化data数据(日期格式/货币格式/大小写等)
分类: 本地(局部)和全局全局是所有实例均可使用

本地:

// 组件的选项中定义本地的过滤器
filters: {
	过滤器名字:function (value) {
		return ....
	}
}

全局

// 如何注册一个全局过滤器
Vue.filter("过滤器名字", function(value) {
	return ......
});

2.1、局部过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

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

<body>
<div id="app" v-cloak>

    <p >{{msg|filter01}}</p>
    <p >{{msg|filter02}}</p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok'
        },
        methods: {
            fn(e) {
            //msg=最新的value
                this.msg = e.target.value
            }
        },
        filters:{
            filter01:function (vl) {
                return vl+'filter01'
            },
            filter02:function (vl) {
                return vl+'filter02'
            },
            capita : function (value) {
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
</script>
</body>

</html>

2.2、全局过滤器

Vue.filter("filter03", function(value) {
        return value+"filter03"
    });

我们只需在外面创建过滤器的实例就行，我们还可以对其他属性进行过滤器操作

使用:

// 过滤器应该被添加在尾部 每个过滤器用管道符分隔
// 第一种用法在双花括号中
{{ 数据 | 过滤器名字 }}
// 第二种用法在 v-bind 中
<div v-bind:id="数据 |过滤器名字 "></div>

详细的过滤器操作可以去查看我们的API文档

2.3、过滤器的基本用法

在创建 Vue 实例之前定义全局过滤器Vue.filter()
在实例的filter选项中定义局部过滤器
在视图中通过{{数据 | 过滤器名字}}或者v-bind使用过滤器

// 如何注册一个全局过滤器
Vue.filter("过滤器名字", function(value) {
	return value.charAt(0).toUpperCase() + value.substr(1);
});
// 如果注册一个局部过滤器
filters: {
	过滤器名字:function (value) {
		return value.charAt(0).toUpperCase() + value.substr(1);
	}
}

2.4、过滤器的传参和串联使用

过滤器可以传递参数,接收的第一个参数永远是前面传递过来的过滤值
过滤器也可以多个串行起来并排使用,

// 多个过滤器用 | 分割
<p>{{count|a('元')|b}}</p>
// 定义过滤器
filters：{
	// 第一个参数永远是前面传递过来的过滤值
	a:function(val,y){
		// val 是count值
		// y 是‘元’
	}
}

2.5、对日期格式的处理

	Vue.filter('fmDate', function (v) {
        return moment(v).format('YYYY-MM-DD, h:mm:ss a')
    })

3、ref

路径 : 格式化需要借助第三方插件

引入第三方格式化日期插件 moment.js
定义格式化日期过滤器
实现其格式化功能
使用过滤器

<input type="text" ref="txt">// 定义ref

// 获取DOM的value值
methods: {
	getVal() {
		//获取dom
		console.log(this.$refs.txt)
	}
}

4、自定义指令

使用场景:需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

分类:全局和局部
全局自定义指令:
在创建 Vue 实例之前定义全局自定义指令Vue.directive(参数1，参数2)
第一参数是指令名称
第二参数是一个对象
对象中要实现inserted方法
inserted方法中的参数为当前指令所在元素的DOM对象

// 1.注册一个自定义指令
Vue.directive( '指令名称' , {
	inserted(参数){ //参数为使用指令的DOM
		//操作
	}
})
// 2.使用自定义指令
<input type="text" v-指令名称>

// 示例(全局自动聚焦的自定义指令)
Vue.directive("focus", {
	inserted(dom) {
		dom.focus();
	}
});
// 使用自定义指令
<input type="text" v-focus>

4.1、局部自定义指令

//局部指令在vue实例内部定义
directives: {
	"focus": {
		inserted(dom) {
			dom.focus();
		}
	}
}
// 调用
<input type="text" v-focus>

4.2、自定义指令完成焦点获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #obox1 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        #obox2 {
            width: 200px;
            height: 200px;
            background: #000;
        }

        .class1 {

        }

        .class2 {

        }

        .class3 {

        }

        .class4 {

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

<body>
<p>$(success)|filter03</p>
<div id="app" v-cloak>
    <input type="text" v-focus>
    <p >{{msg|filter01}}</p>
    <p >{{msg|filter02}}</p>
</div>
<script src="./vue.js"></script>
<script>
    let success='success'
    Vue.filter("filter03", function(value) {
        return value+"filter03"
    });
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'ok,ok'
        },
        methods: {
            fn(e) {
            //msg=最新的value
                this.msg = e.target.value
            }
        },
        filters:{
            filter01:function (vl) {
                return vl+'filter01'
            },
            filter02:function (vl) {
                return vl+'filter02'
            },
            capita : function (value) {
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        },
        directives: {
            "focus": {
                inserted(dom) {
                    dom.focus();
                }
            }
        }
    })
</script>
</body>

</html>

总结

这里我们继续讲解了系统指令，自定义指令，过滤器等等知识，下一期我们继续讲解Vue的相关知识。

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速了解并上手-2

系列文章目录上期我们讲解了一部分vue的基础，表格等等知识，这一期我们继续讲解vue目录系列文章目录1、系统指令1.1、v-bind1.1.1、v-bind绑定class对象1.1.2、绑定class数组1.2、绑定style（对象）1.2.1、绑定单个style1.2.2、绑定style数组1.3、v-model1.3.1、使用v-bind实现v-model1.3.2、v-mode绑定其他元素1.4、v-cloak1.4、v-once2、过滤器2.1、局部过滤器2.2、全局过滤器2.3、过滤器的基本
复制链接

扫一扫