Vue02 常用特性

·表单操作

·自定义指令

·计算属性

·过滤器

·侦听器

·生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            form div{
                display: block;
                height: 30px;
            }
            form div:nth-child(5){height: auto;}
            form div span:first-child{display: inline-block; width: 100px;}
        </style>
    </head>
    <body>
        <div id="app">
            <form action="" method="post">
                <div>
                    <span>
                        姓名：
                    </span>
                    <input type="text" v-model.trim="uname" />
                </div>
                <div>
                    <span>
                        性别：
                    </span>
                    <input type="radio" name="xb" id="man" v-model="xbxz" value="1" />
                    <label>男</label>
                    <input type="radio" name="xb" id="woman" v-model="xbxz" value="2" />
                    <label>女</label>
                </div>
                <div>
                    <span>
                        爱好：
                    </span>
                    <input type="checkbox" v-model="hobby" name="lq" id="lq" value="1" />
                    <label>篮球</label>
                    <input type="checkbox" v-model="hobby" name="sing" id="sing" value="2" />
                    <label>唱歌</label>
                    <input type="checkbox" v-model="hobby" name="dance" id="dance" value="3" />
                    <label>跳舞</label>
                </div>
                <div>
                    <span>
                        职业：
                    </span>
                    <select v-model="zySel">
                        <option value="0">请选择职业</option>
                        <option value="1">医生</option>
                        <option value="2">律师</option>
                        <option value="3">教师</option>
                        <option value="4">程序员</option>
                    </select>
                </div>
                <div>
                    <span>
                        个人简介：
                    </span>
                    <textarea v-on:click="qingkong" v-model="jianjie"></textarea>
                </div>
                <input type="submit" @click.prevent="handle"></input>
            </form>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    uname:'shihan',
                    xbxz:2,
                    hobby:['2','3'],
                    zySel:2,
                    jianjie:'请填写简介'
                },
                methods:{
                    qingkong:function(){
                        this.jianjie = '';
                    },
                    handle:function(){
                        
                    }
                }
            })
        </script>
    </body>
</html>

View Code

1.2 表单域修饰符

· number:转化为数值

· trim:去掉开始和结尾的空格

· lazy:将input事件切换为change事件

input事件是输入的时候触发 change事件是输入结束失去焦点触发

2. 自定义指令

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

·自定义指令用法

<div id="app">
            <input type="text" v-focus/>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            /*
             * 自定义指令
             */
            Vue.directive('focus',{
                inserted:function(el){
                    //el表示指令所绑定的元素
                    el.focus();
                }
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    
                }
            });
        </script>

3.计算属性

计算属性是基于data中的数据来处理的
例如下面msg

3.1 计算属性与方法的区别

· 计算属性是基于它们的依赖进行缓存的
· 方法不存在缓存

计算属性需要有返回值

工作量比较大的时候计算属性可以节省时间

split(' ')分割字符串 reverse（）反转字符串

<div id="app">
            <div>{{reverseString}}</div>
            <div>{{reverseString}}</div>
            <div>{{reverseMessage()}}</div>
            <div>{{reverseMessage()}}</div>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello',
                },
                methods:{
                    reverseMessage:function(){
                        console.log('methods');
                        return this.msg.split('').reverse().join('');
                    }
                },
                computed:{
                    reverseString:function(){
                        console.log('computed');
                        return this.msg.split('').reverse().join('');
                    }
                }
            })
        </script>

4.侦听器

4.1 侦听器的应用场景

数据变化时执行异步或开销较大的操作

侦听的函数名要跟上面的参数名一致

参数val表示 uname的最新值

验证用户名是否可用案例

setTimeout中的 this 是window

<div id="app">
            <div>
                <span>用户名</span>
                <span><input type="text" v-model.lazy="uname" /></span>
                <span>{{tip}}</span>
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
             侦听器
             1.采用侦听器监听用户名的变化
             2.调用后台接口进行验证
             3.根据验证的结果调整提示信息
             * */
            var vm = new Vue({
                el:'#app',
                data:{
                    uname:'',
                    tip:'',
                },
                methods:{
                    checkName:function(uname1){
                        //调用接口，但是可以使用定时任务的方式模拟接口调用
                        var that=this;
                        setTimeout(function(){
                            //模拟接口调用
                            if(uname1=='admin'){
                                that.tip='该用户名已经存在';
                            }else{
                                that.tip='用户名可以使用'
                            }
                        },2000);
                        console.log(uname1)
                    }
                },
                watch:{
                    uname:function(val){
                        this.checkName(val);
                        this.tip='正在验证...';
                    }
                }
                
            })
        </script>

5.过滤器

过滤器的作用

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

过滤器需要返回一个值

过滤器的使用

<div id="app1">
            <input type="text" v-model='msg'/>
            <div>
                {{msg|upper}}
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            //过滤器全局定义
//            Vue.filter('upper',function(val){
//                return val.charAt(0).toUpperCase()+val.slice(1);
//            });
            var vm = new Vue({
                el:'#app1',
                data:{
                    msg:'Hello',
                },
                //过滤器局部定义
                filters:{
                    upper:function(val){
                    return val.charAt(0).toUpperCase() + val.slice(1);
                }}
            })
        </script>

6.生命周期

6.1主要阶段

· 挂载（初始化相关属性）

① beforeCreate

② created

③ beforeMount

④ mounted

· 更新（元素或组件的变更操作）

① beforeUpdate

② updated

·销毁（销毁相关属性）

① beforeDestroy

② destroyed

7.补充知识（数组相关API）

①变异方法（修改原有数据）

·push()

·pop()

·shift()

·unshift()

·splice()

·reverse()

②替换数组（生成新的数组）

·filter()

·concat()

·slice()

<div id="app">
            <input type="text" v-model="fname" />
            <button @click="add">添加</button>
            <button @click="del">删除</button>
            <button @click="change">替换</button>
            <ul>
                <li v-for="item in fruits">{{item}}</li>
            </ul>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    fname:'',
                    fruits:['apple','orange','banana'],
                },
                methods:{
                    add:function(){
                        this.fruits.push(this.fname);
                    },
                    del:function(){
                        this.fruits.pop();
                    },
                    change:function(){
                        this.fruits = this.fruits.slice(0,2);
                    }
                }
            });
            //修改响应式数据
            vm.$set(vm.fruits,'1','lemon');
        </script>

posted @ 2020-09-05 17:57 哈喽诗涵阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

哈喽诗涵

Vue02 常用特性

公告