Vue基础(二)

最新推荐文章于 2024-05-17 14:32:46 发布

VIP文章「已注销」

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量188

点赞数 1

分类专栏： # Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45419127/article/details/119832285

版权

Vue常用特性概览

表单操作
自定义指令
计算属性
侦听器
过滤器
生命周期

Vue表单操作

input:单行文本
textarea:多行文本
select:下拉多选
radio:单选框
checkbox:多选框

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于Vue的表单操作</title>
    <style>
        textarea {
   
            vertical-align: middle;
        }
    </style>

</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <form action="http://www.baidu.com">
            <p>姓名:<input type="text" v-model="uname" /></p>
            <p>
                <span>性别:</span>
                <input type="radio" value="1" name="sex" v-model='sex'>男
                <input type="radio" value="2" name="sex" v-model='sex'>女
            </p>
            <p>
                <span>爱好:</span>
                <input type="checkbox" v-model="hobby" value="1" name='hobby'>篮球
                <input type="checkbox" v-model="hobby" value="2" name='hobby'>唱歌
                <input type="checkbox" v-model="hobby" value="3" name='hobby'>写代码
            </p>
            <p>
                <span>职业:</span>
                <select v-model="select" multiple>
                    <option value="1">请选择职业</option>
                    <option value="2">教师</option>
                    <option value="3">软件工程师</option>
                    <option value="4">律师</option>
                </select>
            </p>
            <p>
                <span>简介</span>
                <textarea v-model="message" v-model='message'></textarea>
            </p>
            <p><input type="submit" value="提交" @click.prevent='handleClick'></p>
        </form>
    </div>
</body>
<script>
    let vm = new Vue({
   
        el: '#app ',
        data: {
   
            uname: '',
            sex: 1,
            hobby: ["1", "2"],
            select: ["1", '2', '3', '4'],
            message: ' '
        },
        methods: {
   
            handleClick: function() {
   
                console.log(this.uname.toString());
                console.log(this.sex.toString());
                console.log(this.hobby.toString());
                console.log(this.select.toString());
                console.log(this.message.toString());
            }
        }
    })
</script>

</html>

在这里插入图片描述

Vue表单修饰符

number:转换为数值
trim:去掉开始及末尾的空格
lazy:将input事件切换为change事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue表单修饰符</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <div>{
   {
   msg}}</div>
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='info'>
        <input type="text" v-model.lazy='msg'>
        <button @click='handleClick'>提交</button>
    </div>
</body>
<script>
    let vm = new Vue({
   
        el: '#app',
        data: {
   
            age: '',
            info: '',
            msg: ''
        },
        methods: {
   
            handleClick: function() {
   
                console.log(this.age + 15);
                console.log(this.info.length);

            }
        }
    })
</script>

</html>

在这里插入图片描述

Vue之自定义指令

为何需要自定义指令

内置指令不满足要求

inserted：被绑定元素插入父节点时调用

自定义指令的语法

Vue.directive('focus' {
   
	inserted: function(el) {
   
	// 获取元素的焦点
		el.focus();
}
})

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue自定义指令</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text">
    </div>
</body>
<script>
    // 定义全局自定义指令
    Vue.directive('focus', {
   
        inserted: function(el) {
   
            el.focus()
        }
    });
    let vm = new Vue({
   
        el: "#app",
        data: {
   

        },
        methods: {
   

        }
    })
</script>

</html>

在这里插入图片描述

Vue之带参数的自定义指令

bind:只调用一次指令第一次绑定元素调用

在这里插入图片描述

Vue.directive(‘color', {
   
	inserted: function(el, binding) {
   
	el.style.backgroundColor = binding.value.color;
	}
})

<input type="text" v-color='{color:"orange"}'>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之带参数的自定义指令</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <input type="text" v-color='color'>
    </div>
</body>
<script>
    // 定义带参数的自定义指令
    Vue.directive('color', {
   
        bind(el, binding, vnode) {
   
            el.style.backgroundColor = binding.value.backgroundColor;
        }
    });
    let vm = new Vue({
   
        el: "#app",
        data: {
   
            color: {
   
                backgroundColor: 'red'
            }
        }
   
    })
</script>

</html>

在这里插入图片描述

Vue之局部自定义指令

   directives: {

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础(二)

Vue常用特性概览表单操作自定义指令计算属性侦听器过滤器生命周期基于Vue表单操作input:单行文本textarea:多行文本select:下拉多选radio:单选框checkbox:多选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫