Vue---Vue常用特性

最新推荐文章于 2023-03-03 11:36:56 发布

Cirrod

最新推荐文章于 2023-03-03 11:36:56 发布

阅读量502

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/h18377528386/article/details/123154575

版权

vue.js javascript 前端

Vue 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

一.常用特性概览

* 表单操作

* 自定义指令

* 计算属性

* 过滤器

* 侦听器

*声明周期

1.表单操作

2.表单域修饰符

* number:转化为数值

* trim : 去掉开始和结尾空格

*lazy ：将input事件切换change事件

<input type="number" v-model.number="age">

input事件当input输入框内容改变时触发，change事件当鼠标失去焦点时触发

3.自定义指令

1.为何需要自定义指令？

内置指令不满足需求

2.自定义指令的语法规则（获取元素焦点）

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

3.自定义指令用法

<input type="text" v-focus>

例子：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.directive('focus', {
        inserted: function(el) {
            //获取元素的焦点
            el.focus()
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            activeColor: {
                color: 'red'
            },
            size: {
                fontSize: '100px'
            }
        }
    });
</script>

</html>

5.局部指令

如果想注册局部指令，组件中也可以接受一个directives的选项，然后可以在模板中的任何元素使用

例子：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
        },
        directives: {
            focus: {
                inserted: function(el) {
                    //获取元素的焦点
                    el.focus()
                }
            }
        }
    });
</script>

</html>

4.计算属性

5.侦听器

6.过滤器

（这几个特性我在Vue专栏有详细的介绍）

7.生命周期

1.Vue实例的产生过程

* 重点注意created函数（该生命周期钩子函数被触发的时候，Vue实例已经创建完成，已经可以使用Vue实例的数据和函数，一般用来获取后台数据）

重点注意mounted函数（该生命周期钩子函数被触发的时候，模板DOM元素已经可以使用，然后把数据填充到模板Dom）
前四个函数表示挂载阶段，再下来两个是更新阶段，最后两个是销毁阶段

Cirrod

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue---Vue常用特性

一.常用特性概览* 表单操作* 自定义指令* 计算属性* 过滤器* 侦听器*声明周期1.表单操作2.表单域修饰符* number:转化为数值* trim : 去掉开始和结尾空格*lazy ：将input事件切换change事件<input type="number" v-model.number="age">input事件当input输入框内容改变时触发，change事件当鼠标失去焦点时触发3.自定义指令1.为何需要自定义..
复制链接

扫一扫