Vue六大常用特性详解

最新推荐文章于 2022-02-10 17:23:38 发布

张哈哈zhh

最新推荐文章于 2022-02-10 17:23:38 发布

阅读量986

点赞数

文章标签： vue 过滤器 filter javascript

本文链接：https://blog.csdn.net/weixin_44383261/article/details/116839523

版权

Vue的常用特性：

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

1. 表单操作

 <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <form action="">
            <div>
                <span>姓名：</span>
                <input type="text" name="" id="" v-model='username'>
            </div>
            <div>
                <span>性别：</span>
                <label><input type="radio" name="" id="" value="1" v-model='sex'>男</label>
                <label><input type="radio" name="" id="" value="2" v-model='sex'>女</label>
            </div>
            <div>
                <span>爱好：</span>
                <label><input type="checkbox" name="" id="" value="1" v-model='hobby'>篮球</label>
                <label><input type="checkbox" name="" id="" value="2" v-model='hobby'>音乐</label>
                <label><input type="checkbox" name="" id="" value="3" v-model='hobby'>电影</label>
            </div>
            <div>
                <span>职业：</span>
                <select v-model='occupation'>
                    <option value="student">学生</option>
                    <option value="programmer">程序员</option>
                    <option value="actor">演员</option>
                    <option value="accountancy">会计</option>
                </select>
            </div>
            <div>
                <span>个人介绍：</span>
                <textarea>{{self}}</textarea>
            </div>
            <button @click.prevent='submit'>提交</button>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username:'',
                sex:'1',
                hobby:[2,3],
                occupation:'actor',
                self:'哈哈哈'
            },
            methods:{
                submit:function(){
                    console.log(this.username)
                }
            }      
        })
    </script>
</body>

表单域修饰符：
（1）number
假设表单中还有一个年龄选项，给input输入框绑定v-model='age'，如果打印this.age+1，输入age为10的话，打印出来是101，因为这相当于是字符串拼接，我们应该将age转化为整数，v-model.number='age'。
（2）trim
去掉字符串前后的空格，字符串中间的空格无法去除。v-model.trim='info'。
（3）lazy
将input事件切换为change事件。我们在网站注册用户时，如果该网站不允许用户名重复，那么，当你选用了已经存在的用户名时，输入框底下会有相关提示，这个功能的实现就可以利用lazy修饰符。

<div id='app'>
<input type="text" name="" id="" v-model.lazy='msg'>
<div>{{msg}}</div>
</div>
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:''
            }
        })
 </script>

v-model是双向绑定，当input中的内容发生改变时，div中的内容也会改变，这是在我们输入每个字符时都会触发的，因为默认该事件是input事件。而当它用lazy修饰后，就变成了失去焦点时触发。

2.自定义指令

Vue.directive('focus',{
            inserted:function(el){
                // el表示指令所绑定的元素
                // 获取元素的焦点
                el.focus()
            }
        })

使用：<input type="text" v-focus>
上边的自定义指令是一个全局指令，如果在组件的directives:{}里定义，就是局部指令，只允许这个组件使用。

3.计算属性

<div id="app">
        <input type="text" v-focus>
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
</div>
<script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello world'
            },
            computed:{
                reverseString:function(){
                    return this.msg.split('').reverse().join('')
                }
            }
        })
</script>

计算属性与方法的区别：
计算属性是基于它们的依赖进行缓存的，方法不存在缓存。什么意思呢？

    <div id="app">
        <input type="text" v-focus>
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>        
        <div>{{reverseString}}</div>
        <div>{{reversefunc()}}</div>        
        <div>{{reversefunc()}}</div>
    </div>
    <script>
        Vue.directive('focus',{
            inserted:function(el){
                // el表示指令所绑定的元素
                // 获取元素的焦点
                el.focus()
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello world'
            },
            computed:{
                reverseString:function(){
                    console.log('computed')
                    return this.msg.split('').reverse().join('')
                }
            },
            methods:{
                reversefunc:function(){
                    console.log('methods')
                    return this.msg.split('').reverse().join('')
                }
            }

        })
    </script>

计算属性和方法我们都写了两个div，那是不是它们都被调用了两次呢？查看浏览器，可以发现，computed打印了一遍，methods打印了两遍。也就是说，computed只被调用了一次，事实上，只有绑定的数据msg发生变化时，computed才会被再次调用，否则，就只是第一次的执行结果。如果计算过程复杂且耗时，那么使用computed比使用methods的性能会好很多。

4.侦听器
应用场景：数据变化时执行异步或者开销较大的操作
用法：

<div id="app">
    <span>名：</span>
    <input type="text" v-model='firstName'>
    <span>姓：</span>
    <input type="text" v-model='lastName'>
    <div>{{fullName}}</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            firstName:'san',
            lastName:'zhang',
            fullName:'zhang san'
        },
        watch:{
            firstName:function(val){
                this.fullName=val+' '+this.lastName
            },
            lastName:function(val){
                this.fullName=this.firstName+' '+val
            }
        }
    })
</script>

在这里插入图片描述当然，这里也可以利用computed来实现：

            computed:{
                fullName:function(){
                    return this.firstName+" "+this.lastName
                }
            },

对于这个案例来说，使用computed看起来比使用watch更简单，而当出现异步操作或者情形更复杂时，我们需要使用watch。

用户名：

    var vm=new Vue({
        el:'#app',
        data:{
            username:'',
            tip:''
        },
        methods:{
            checkName:function(uname){
                // 使用定时任务的方式模拟接口调用
                var that=this
                // setTimeOut的this是windows
                setTimeout(function(){
                    if(uname=='admin'){
                        that.tip='用户名已存在'
                    }else{
                        that.tip='用户名合法'
                    }
                },2000)
            }
        },
        watch:{
            username:function(val){
                // 调用后台接口验证用户名的合法性
                this.checkName(val)
                // 修改提示信息
                this.tip='正在验证'
            }
        }
    })
</script>

5.过滤器
作用：格式化数据，比如字符串格式化为首字母大写，日期格式化为指定格式等。可以用在插值表达式或者绑定属性中。

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <input type="text" name="" id="" v-model='msg'>
        <div>{{msg | upper}}</div>
        <div :abc='msg|upper'>测试数据</div>
    </div>
    <script>
        // 过滤器
        Vue.filter('upper',function(val){
            // 原生js的方法，charAt(0)获取字符串首字母，toUpperCase转化为大写，最后拼接字符串剩余部分
            return val.charAt(0).toUpperCase()+val.slice(1)
        })
        var vm=new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>

过滤器可以级联，比如msg|upper|lower，最终显示出来的还是小写的。
带参数的过滤器（格式化日期）：

<div id="app">
        <div>{{date | format('yyyy-MM-dd')}}</div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                date:new Date()
            },
            filters:{
                // 第二个参数arg是调用时传入的参数
                format:function(value,arg){
                    if(arg=='yyyy-MM-dd'){
                        var ret=''
                        ret+=value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate()
                        return ret
                    }
                    return value
                }
            }
        })
    </script>

6.生命周期

Vue的生命周期有八个阶段：

挂载（初始化相关属性）：beforeCreate、created、beforeMount、mounted
更新（元素或组建的变更操作）：beforeUpdate、updated
销毁（销毁相关属性）：beforeDestroy、destroyed

生命周期函数也叫钩子函数。

张哈哈zhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue六大常用特性详解

Vue的常用特性：表单操作自定义指令计算属性过滤器侦听器生命周期1. 表单操作 <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <form action=""> <div> <span>
复制链接

扫一扫