Vue学习之计算属性

庞辽

于 2024-08-22 02:41:23 发布

阅读量14

点赞数

文章标签： vue.js 学习前端 javascript ecmascript

@TOC

推荐Vscode编译器、vue官网： https://cn.vuejs.org/v2/guide/installation.html

1.v-bind（style对象属性）

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- <h2 :style="{key（属性值）:value(属性值)}">{{message}}</h2> -->
    <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        }
    })
</script>
</body>
</html>

函数方法改进：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- <h2 :style="{key（属性值）:value(属性值)}">{{message}}</h2> -->
    <h2 :style="getStyles()">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        },
        methods:{
        	getStyles:function(){
        		return {fontSize:this.finalSize,color:this.finalColor};
        	}
        }
    })
</script>
</body>
</html>

2.v-bind（style数组属性）

了解即可

Vue学习之计算属性_vue.js

3.计算属性

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h2>{{firstname}}{{lastname}}</h2>

    <h2>{{getFullName()}}</h2>

    <h2>{{fullName}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            firstname:   'a',
            lastname:   'b',
        },
        methods:{
            getFullName(){
                return this.firstname + this.lastname;
            }
        },
        //计算属性
        computed: {
            fullName:function(){
                return this.firstname + this.lastname;
            }
        }
    })
</script>
</body>
</html>

4.计算属性的复杂操作

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h2>总价:{{totalPrice}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            books:   [
                {id:110,name:'Unix',price:119},
                {id:111,name:'代码大全',price:201},
                {id:112,name:'深入理解计算机原理',price:52}
            ]
        },
        //有缓存，方法没有
        computed: {
            totalPrice:function(){
                let result = 0;
                for(let i =0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }
        }
    })
</script>
</body>
</html>

5.计算属性getter、setter

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    {{message}}
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            firstname:   'a',
            lastname:   'b',
        },
        computed: {
            // fullName:function(){
            //     return this.firstname + this.lastname;
            // }
            //属性fullName，一般只实现get方法，所以一般可以简写为上面的写法
            fullName :{
                set:function(newValue){
                    console.log(newValue);
                    const names = newValue.split(" ");
                    this.firstname = names[0];
                    this.lastname = names[1];
                },
                get:function(){
                    return this.firstname + this.lastname;
                }
            }
        }
    })
</script>
</body>
</html>

6.计算属性computed和methods的对比

计算属性：一次计算，多次使用，有缓存
methods：多次计算，多次使用，无缓存

7.es6语法

7.1 let/var

注：let有闭包，var没有，推荐使用let

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src='../js/vue.js'></script>
<script>
    //ES5之前因为 if、for没有块级作用域的概念，所以很多时候需要借鉴function的作用域
    //1.变量作用域：变量在什么范围内是可用
    {
        var name = 'why';
        console.log(name);
    }
    console.log(name);//var没有块级作用域
    //2.没有块级作用域引起的问题 if
    var func;
    if(true){
        var name = 'why';
        func = function(){
            console.log(name);
        }
        //func();
    }
    name = 'modify'; 
    func();
    //3.没有块级作用域引起的问题 for
    //为什么闭包可以解决问题：函数是一个作用域
    // var btns = document.getElementsByTagName('button')
    // for(var i = 0;i<btns.length;i++){
    //     (function(i){ //0
    //         btns[i].addEventListener('click',function(){
    //             console.log('第' + i + '个按钮被点击');
    //         })
    //     })(i)
    // }

    // 4.es6
    const btns = document.getElementsByTagName('button')
    for(let i = 0;i<btns.length;i++){
        btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击');
        })
    }
</script>
</body>
</html>

7.2 const

Vue学习之计算属性_vue.js_02

7.3 对象字面量增强

Vue学习之计算属性_Vue_03

8.v-on

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h2>{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <button @click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            counter:   0
        },
        methods:{
            add(){
                this.counter++;
            },
            sub(){
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

语法糖：@click

9.v-on参数

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- 不需要参数的时候，不需要括号 -->
    <button @click="btn1Click">按钮1</button>
    <button @click="btn1Click">按钮1</button>
    <!-- 需要参数的时候，默认传入event参数，不需要括号 -->
    <button @click="btn2Click">按钮2</button>
    <button @click="btn2Click">按钮2</button>
    <!-- 需要参数的时候，并且需要event参数，-->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button @click="btn3Click">按钮3</button>
    <!-- 需要参数的时候，并且需要event参数，-->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button @click="btn3Click">按钮3</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },methods: {
            btn1Click(){
                console.log(123);
            },
            btn2Click(event){
                console.log(event);
            },
            btn3Click(first,event){
                console.log(first);
                console.log(event);
            }
        }
    })
</script>
</body>
</html>

10.v-on修饰符

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- 1.stop修饰符的使用(停止冒泡) -->
    <div @click="divClick">
        <button @click.stop='btnClick'>
            按钮
        </button>
    </div>
    <br>
    <!-- 2.prevent修饰符的使用(阻止默认行为) -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <!-- 3.监听某个键盘的键帽 -->
    <input type="text" @keyup.enter="keyUp">
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        methods: {
            btnClick(){
                console.log("btnClick");
            },
            divClick(){
                console.log("divClick");
            },
            submitClick(){
                console.log("submitClick");
            },
            keyUp(){
                console.log("keyup");
            }
        }
    })
</script>
</body>
</html>