vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

xiexinxia

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量119

点赞数

分类专栏：前端框架文章标签： vue.js

本文链接：https://blog.csdn.net/xieixnxia/article/details/120625088

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

绑定属性

v-bind 动态绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgURL" alt="mm">
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%A3%81%E7%BA%B8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=undefined&latest=undefined&copyright=undefined&cs=4076493291,331486562&os=2930963262,531608254&simid=3400838867,377633000&pn=0&rn=1&di=78870&ln=2078&fr=&fmq=1526269427171_R&fm=&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fuploads.5068.com%252Fallimg%252F1712%252F144-1G209191R5.jpg%26refer%3Dhttp%253A%252F%252Fuploads.5068.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1636096525%26t%3Dc22525defd81066e0a4d1e28ddde5056&rpstart=0&rpnum=0&adpicid=0&nojc=undefined'
            }
        })
    </script>
</body>
</html>

v-bind语法糖

<img :src="imgURL" alt="mm">

动态绑定class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 :class="active">{{message}}</h2>
        <!--<h2 v-bind:class="{类名1: true,类名2: boolean}">{{message}}</h2>>-->
        <!--修改布尔值判断类是否加进去-->
        <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                isActive: 'true',
                isLine: 'true'
            },
            methods: {
                btnClick: function() {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>
</html>

v-bind绑定style

利用v-bind动态绑定css样式

对象语法
数组语法

对象语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>--> 
       <!--属性值加单引号，vue会作为变量解析-->
       <h2 :style="{fontSize: '50px' }">{{message}}</h2>
       <!--动态绑定-->
       <h2 :style="{fontSize: finalSize + 'px' ,color: finalColor}">{{message}}</h2>
       <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                finalSize: 100 ,
                finalColor: 'pink'   
            },
            methods: {
                getStyle: function() {
                    return {fontSise: this.finalSize + 'px' ,backgroundColor: this.finalColor}
                }

            }
        })
    </script>
</body>
</html>

数组语法

<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>

data:{
                message:'hello',
                baseStyle: {backgroundColor: 'yellow'},
                baseStyle1: {fontSize: '100px'}  
            },

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <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:{
                firstName: 'Lebron',
                lastName: 'James'
                
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }

            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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:{
                books: [
                    {id: 110, name: 'Unix编程技术 ', price: 119},
                    {id: 111, name: '代码大全 ', price: 109},
                    {id: 112, name: '深入理解计算机原理 ', price: 98},
                    {id: 113, name: '现代操作系统 ', price: 122}
                    

                ]
                
            },
            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>

计算属性的setter和getter

计算属性的本质

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{fullName}}</h2>
        
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                firstName: 'Kobe',
                lastName: 'Bryant'
                
                
            },
            computed: {
                fullName: {
                    //一般没有get方法，只读属性
                    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>

计算属性和methods的对比

计算属性性能高于methods，计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

三、ES6语法补充

let/var

块级作用域

js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关

针对其他块定义来说是没有作用的，比如if/for等，这在我们开发中往往会引起一些问题

（可使用闭包解决问题----函数是一个作用域）

const的使用

将标识符设置为常量，不可以再次赋值（指向对象不能修改），可以改变对象内部属性

const定义标识符，必须进行赋值

在ES6开发中优先使用const，只有需要改变某一个标识符时才使用let

对象增强写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //ES5
        let name = 'why';
        let age = 18;
        let obj1 = {
            name: name,
            age: age
        }
        console.log(obj1);

        //ES6属性增强写法
        let obj2 = {
            name,age
        }
        console.log(obj2);

        //ES5
        const obj = {
            run: function () {

            },
            eat: function () {

            }
        }

        //ES6函数增强写法
        const obj = {
            run() {

            },
            eat() {
                
            }
        }



    </script>
</body>
</html>

xiexinxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习

绑定属性v-bind 动态绑定属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫