vue：vue的计算属性以及监听属性(三)

2023-11-02

1、计算属性

相较于函数而言计算属性更加智能，他是基于它们的响应式依赖进行缓存的。也就是说只要相关依赖（下述例子中的area）没有发生改变，那么这个计算属性的函数不会重新执行，而是直接返回之前的值。这个缓存功能让计算属性访问更加高效。
在这里插入图片描述
只要修改值后面立刻返回结果，不用写个按钮触发函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <span>长：</span>
        <!-- value会控制input标签的显示所以用它绑定显示在页面之中 -->
        <input type="text" v-model='length'>
        <span>宽：</span>
        <input type="text" v-model='width'>
        <span>面积：</span>
        <input type="text" v-model:value='area'>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                length:0,
                width:0
            },
            computed:{
                area:function(){
                    return this.length*this.width
                }
            }
        })
    </script>
</body>
</html>

1.1计算属性的set和get

计算属性默认只有get，不过在需要时你也可以提供一个set，但是提供了set就必须要提供get方法。省市区的自动补全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <span>省：</span>     
        <input type="text" v-model='province'>
        <span>市：</span>
        <input type="text" v-model='city'>
        <span>区：</span>
        <input type="text" v-model:value='district'>
        <span>详细地址：</span>
        <input type="text" v-model:value='address'>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                province:0,
                city:0,
                district:0
            },
            computed:{
                address:{  
                    get(){
                        let result=''
                        if (this.province)
                        {result=this.province+'省'}
                        if (this.city){
                            result += this.city +'市'
                        }
                        if (this.district){
                            result += this.district +'区'
                        }
                        return result
                    },
                    set:function(value){
                        let result = value.split(/省|市|区/)
                        console.log(result)
                        if (result && result.length>0){
                            this.province=result[0]
                        }
                        if (result && result.length>1){
                            this.city=result[1]
                        }
                        if (result && result.length>0){
                            this.district=result[2]
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

2、监听属性

监听属性可以针对某个属性进行监听，只要这个属性的值发生改变了，那么就会执行相应的函数。搜索的时候会出现搜索中等字眼就是监听属性的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <span>搜索：</span>
        <input type="text" v-model:value='keyword'>
        <p>搜索结果：</p>
        <p>{{result}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                keyword:'',
                result:''
            },
            watch:{
                keyword(newvalue,oldvalue){
                    // console.log(newvalue)
                    // console.log(oldvalue)
                    this.result = '加载中'
                    // 定时器，每隔多少秒中再去执行下面操作，相当于python中的sleep
                    setTimeout(()=>{
                        this.result = newvalue+ '搜索中'
                    },1000)
                   // 匿名函数每隔1000毫秒1秒中再去执行
                }
            }
        })
    </script>
</body>
</html>

3、表单输入绑定

单选复选以及文本域和选项等标签的使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 复选框 文本域写东西不会在页面中显示 -->
        <input type="text" v-model:value='message'>
        <textarea name="" id="" cols="30" rows="10" v-model='message'>我是文本域</textarea>
        <input type="checkbox" value=beiyue v-model:value='checkname'>
        <span>beiyue</span>
        <input type="checkbox" value=heihei v-model:value='checkname'>
        <span>heihei</span>
        <input type="checkbox" value=haha v-model:value='checkname'>
        <span>hhhh</span>
        <br>
        {{message}}
        <br>
        {{checkname}}
        <br>
        <!-- 单选框要将name属性写成一样的或者通过v-model进行双向绑定 -->
        <input type="radio" value='男' name=y>
        <span>男</span>
        <input type="radio" value='女' name=y>
        <span>女</span>
        <br>
        <select name="" id="" v-model='selected'>
            <option value="" disabled>请选择</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
            <option value="4">D</option>
        </select>
        <p>{{selected}}</p>
        <!-- {{selected}}显示的是value属性，展示的是选项属性 -->
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'',
                checkname:[],
                selected:''
            }
        })
    </script>
</body>
</html>

4、修饰符

①.lazy 在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，添加lazy修饰符，从而转变为使用change事件进行同步(当光标移出选择框时才触发双向绑定的事件)

<input type="text" v-model:value.lazy="message">
<input v-model.lazy="message" >

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

②.number<input v-model.number="age" type="number">此时只能输入数字或者e科学计数法，要将绑定的age设为数字比如0.即使在type="number"时，HTML输入元素的值也总会返回字符串。只有.number之后才会返回数字
③.trim如果要自动过滤用户输入的首尾空白字符，中间空格去不了 v-model.trim='hh'
可以同时添加多个修饰符一起用

5、自定义组件

定义：类似于python当中的封装，将一个可能多次用到的代码写成一个组件，提高代码的复用性，避免一直拷贝

5.1全局组件

定义在vue外部的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- 组件之间相互独立互不影响 -->
        <button-counter></button-counter>
        <Hello></Hello>
    </div> 
    <script>
        // 组件定义在vue的外面,第一个参数为组件的名字,组件不能定义在vue的后面，不然会报错,另外要注意单一根元素
        Vue.component("button-counter",{
            template:`
            <div>
                <button >{{count}}</button>
                <button @click="count+=1">+</button>
                <button @click="count-=1">-</button>
                <button @click="add">减法</button>
                <Hello></Hello>
            </div>`,
            data:function(){
                return{
                    count:0
                }},
            methods:{
                add(){
                    this.count-=1
                }
            
            }
        })
        // 组件命名的时候如果用的驼峰使用的时候要改为小写并且使用-连接，不然组件不认识，首字母大写没事，组件可以嵌套使用，嵌套的时候直接用组件名
        Vue.component('Hello',{
            template:'<p>{{msg}}</p>',
            data:function(){
                return{
                    msg:'hello beiyue'
                }
            }
        })
        new Vue({el:'#app',data:{},methods:{}})     
    </script>
</body>
</html>

5.2局部组件

定义在vue内部的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <hello-world></hello-world>
        <hello></hello>
    </div> 
    <script>
        let HelloWorld = {
            data(){
                return {
                    msg:'hello beiyue'
                }
            },
            template:'<div>{{msg}}</div>'
        }
        let Hello = {
            data(){
                return {
                    msg:'hello'
                }
            },
            template:'<div>{{msg}}</div>'
        }
        new Vue({el:'#app',
        data:{},
        components:{
            'hello-world':HelloWorld,
            'hello':Hello
        }})     
    </script>
</body>
</html>

组件的要点总结
①data是一个函数，不是vue中的对象
②组件的模板内容必须是单一根元素
③组件的模板是模板字符串可以多行写入标签即在``中写
④组件的命名方式一般规范的有两种，短横线(都可以直接使用)，驼峰(可直接在组件中使用，不能直接在模板中使用)，采用普通命名方式也可以

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue