Vue常用特性

1. 常用的特性

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

2. 表单基本操作

2.1 基于Vue的表单操作

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

示例代码：

 <body>
        <div id="app">
            <form >
                <div>
                    <span>姓名：</span>
                    <span>
                        <input type="text" v-model="uName"> 
                    </span>
                </div>
                <div>
                    <span>性别：</span>
                    <span>
                        <input type="radio" id="male" name="xb" value="1" v-model="gender">
                        <label for="male">男</label>
                        <input type="radio" id="female" name="xb" value="2" v-model="gender"/>
                        <label for="female">女</label>
                    </span>
                </div>
                <div>
                    <span>爱好：</span>
                    <span>
                        <input type="checkbox" id="lq" value="1" v-model="hobby"/>
                        <label for="lq">篮球</label>
                        <input type="checkbox" id="cg" value="2" v-model="hobby"/>
                        <label for="cg">唱歌</label>
                        <input type="checkbox" id="code" value="3" v-model="hobby"/>
                        <label for="code">写代码</label>
                    </span>
                </div>
                <div>
                    <span>职业：</span>
                    <span>
                        <select v-model="Profession" >
                            <option value="0">--选择职业--</option>
                            <option value="1">Web工程师</option>
                            <option value="2">Java工程师</option>
                            <option value="3">Android工程师</option>
                        </select>
                    </span>
                </div>
                <div>
                    <span>个人简介：</span>
                    <span>
                        <textarea v-model="desc">
</textarea>
</span>
</div>

<button type="button" @click="handle()">提交</button>
</form>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
uName:'',
gender: 1,
hobby:[],
Profession:0,
desc:''

    },
methods:{
handle:function(){
console.log('提交成功！');
console.log('姓名：',this.uName);
console.log('性别：',this.gender);
console.log('爱好：',this.hobby.toString());
console.log('职业：',this.Profession);
console.log('个人简介：',this.desc);
    }
    }
    })
</script>
</body>

2.2 表单修饰符

number ：将字符串等类型转化为数值
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
trim：去掉开始和结尾的空格
- 只能去掉首尾的不能去除中间的空格
lazy：将input事件切换为change事件
- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
input事件：每次输入内容都会触发；

change事件：当失去焦点的时候触发.

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

3.自定义指令 Vue.directive

3.1 为什么要自定义指令？

内置指令不能满足我们特殊的需求
Vue允许我们自定义指令

3.2 如何使用自定义指令

1. 使用的语法（获取元素焦点）

Vue.directive('focus'{
  //inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
   inserted: function(el){
    //获取元素的焦点
        el.focus();
     }
 })

2. 自定义指令用法

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus>

3. 示例

<body>
        <div id="app">
            <!-- 和自定义指令对比 -->
            <input type="text">
            <!-- 使用自定义指令 -->
            <input type="text" v-focus> 
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 自定义指令
            Vue.directive('focus',{
                inserted: function(el){
                //el 表示指令所绑定的元素
                el.focus(); 
                }

            });
            var vm = new Vue({
                el:'#app',
                data:{
                    
                },
            })
        </script>
    </body>

3.3 如何使用带参数的自定义指令

1.使用方法（获取元素焦点）

Vue.directive('color',{
  //bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 
    bind: function(el,binding){
        el.style.backgroundColor = binding.value.color;
    }
})

2. 指令使用方法

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

3.示例

<style type="text/css">
        #app div{
            height: 200px;
            width: 200px;
            border: 1px solid #000066;
        }
    </style>
    <body>
        <div id="app">
            <!-- 和自定义指令对比 -->
            <div></div>
            <!-- 使用自定义指令 -->
            <div v-color='{color:"blue"}'></div>    
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    // 自定义带参数的指令
    // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    // el 为当前自定义指令的DOM元素  
    // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
            Vue.directive('color',{
                bind: function(el,binding){
                el.style.backgroundColor = binding.value.color; 
                }
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    
                },
            })
        </script>
    </body>

3.4 局部自定义指令

局部指令，需要定义在 directives的选项用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准

1.局部指令

directives:{
    focus: {
        inserted: function(el){
            el.focus();
        }
    }
}

2.示例

<style type="text/css">
        #app div{
            height: 200px;
            width: 200px;
            border: 1px solid #000066;
        }
    </style>
    <body>
        <div id="app">
            <!-- 和自定义指令对比 -->
            <div></div>
            <!-- 使用自定义指令 -->
            <div v-color='msg'></div>   
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:{
                        color:'blue'
                    }
                },
                // 局部指令
                directives:{
                    color:{
                        bind: function(el,binding){
                        //el 表示指令所绑定的元素
                        el.style.backgroundColor = binding.value.color; 
                    }   
                    }
                }
            })
        </script>

4. 计算属性 computed

模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

4.1 为什么需要计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

4.2 计算属性的使用方法

computed:{
    reverseString :function(){
        return this.msg.split('').reverse().join('');
    }
}

示例：

  <div id="app">
            <div>{{msg}}</div>
            <!--
            split():分割成数组，
            reverse():将数组中的元素进行反转，
            join():拼接数组 
            -->
            <div>{{msg.split('').reverse().join('')}}</div>
            <!-- 使用计算属性实现上方的反转 -->
            <div >{{reverseString}}</div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        // 计算属性
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello'
                },
                // 使用计算属性进行反转
                computed:{
                    reverseString :function(){
                        return this.msg.split('').reverse().join('');
                    }
                }
            })
        </script>

4.3 计算属性与方法的区别

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

计算属性是有依赖的，如果它依赖的数据发生了变化，那么他的结果也会变化

5.侦听器 watch

使用watch来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

5.1 侦听器的应用场景

数据变化时执行异步或开销较大的操作（数据一旦发生变化就通知侦听器所绑定的方法）

5.2 侦听器的用法

watch: {
firstName: function(val){
// val 表示变化之后的值
this.fullName = val +this.lastName;
},
lastName: function(val){
this.fullName = this.firstName +val;
}
}

示例：


<div id="app">
            <div>
                <span>名:</span>
                <span >
                    <input type="text" v-model="firstName"/>
                </span>
            </div>
            <div>
                <span>姓:</span>
                <span>
                    <input type="text" v-model="lastName">
                </span>
            </div>
            <div>{{fullName}}</div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    firstName:'Jim',
                    lastName:'Green',
                    fullName:'jim Green'
                },
                // 侦听器
                watch:{
                    firstName:function(val){
                        this.fullName = val+ ' '+this.lastName;
                    },
                    lastName:function(val){
                        this.fullName = this.firstName+ ' ' +val;
                    }
                }
            })
        </script>

6. 过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
支持级联操作
过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

6.1 过滤器有什么作用

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

6.2 自定义过滤器

Vue.filter('过滤器名称', function(value){
    //过滤器业务逻辑
})

6.3 过滤器的使用方式

使用方式1：

      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
<div>{{ msg | upper }}<div/>

使用方式2：

  <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
      然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
    -->
<div>{{ msg | upper | lower }}<<div/>

使用方式3：
```
<div v-bind:id="id | upper"><div/>
```
```
 
```

示例：

<div id="app">
            <span>
                <input type="text" v-model="msg">
            </span>
            <!-- 写法1： -->
            <div>{{msg | upper}}</div>
            <!-- 写法2： -->
            <div>{{msg | upper | lower}}</div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 过滤器
            // 将首字母转换为大写
            Vue.filter('upper', function(val){
                //charAt(0):获取第一个字符；
                //toUpperCase():转换为大写；
                //slice(1):从第二个字符串开始截取到最后一个
                return val.charAt(0).toUpperCase()+val.slice(1);
            }); 
            // 将首字母转换为小写
            Vue.filter('lower', function(val){
                //toLowerCase():转换为小写
                return val.charAt(0).toLowerCase()+val.slice(1);
            }); 
                
            var vm = new Vue({

                el:'#app',
                data:{
                    msg:'',
                },

            })
        </script>

6.4 局部过滤器

  //  定义filters 中的过滤器为局部过滤器 
filters:{
    capitalize:function(){
        //实现的逻辑
    }
}

6.5 带参数的过滤器

1.使用用法

Vue.filter('format',function(value,age1){
    //value的值作为第一个参数，
    // age1的值作为第二个参数
})

2.使用方法

<div>
    {{data | format('YYYY-MM-dd')}}
</div>

3.案例：格式化日期

<!--案例的格式化规则不完整，只是个简单的案例-->
<div id="app">
    <span>
        {{data | format('yyyy-MM-dd') }}
    </span>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 过滤器案例：格式化日期
    Vue.filter('format', function(value,age1){
        if(age1 == 'yyyy-MM-dd'){
            var ret = '';
            ret += value.getFullYear()+'-'+( value.getMonth() + 1) +'-'+  value.getDate();
            return ret;
        }   
    });     
    var vm = new Vue({
        el:'#app',
            data:{
            data:new Date(),
        }
    })
</script>

7.生命周期

事物从出生到死亡的过程
Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

1. 常用的钩子函数

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

2.主要阶段

挂载（初始化相关属性）
1. beforeCreate
2. created
3. beforeMount
4. mounted
更新（元素或组件的变更操作）
1. beforeUpdate
2. updated
销毁（销毁相关属性）
1. beforeDestroy
2. destroyed

8. 数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

`push()`	往数组最后面添加一个元素，成功返回当前数组的长度
`pop()`	删除数组的最后一个元素，成功返回删除元素的值
`shift()`	删除数组的第一个元素，成功返回删除元素的值
`unshift()`	往数组最前面添加一个元素，成功返回当前数组的长度
`splice()`	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值
`sort()`	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
`reverse()`	reverse() 将数组倒序，成功返回倒序后的数组

示例：

<div id="app">
    <div>
        <span>
            <input type="text" v-model="fname">
            <button @click="addName">添加</button>
            <button @click="delName">删除</button>
        </span>
    </div>
    <ul>
        <li :key='index' v-for='(value,key,index) in uName'>{{value}}</li>
    </ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // Vue数组操作
    var vm = new Vue({
        el:'#app',
        data:{
            fname:'',
            uName:['衣服名称：'],
        },
        methods:{
            // 增加
            addName:function(){
                this.uName.push(this.fname);
            },
            // 删除
            delName:function(){
                this.uName.pop();
            }

        }
    })
</script>

9.替换数组

不会改变原始数组，但总是返回一个新数组

filter	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

10.动态数组响应式数据

Vue.set(a,b,c) 让触发视图重新更新一遍，数据动态起来
a是要更改的数据、 b是数据的第几项、 c是更改后的数据

示例：

Vue.set(vm.list,2,'asdada');
// 另一种写法
vm.$set(vm.list,2,'asdada')

posted @ 2021-05-28 10:05 Laity0117 阅读(53) 评论(0) 收藏举报

刷新页面返回顶部

Laity0117