一、vue基础语法（一）

Vue.js基础语法（一）——>vue 2

一、插值操作

1、Mustache语法

使用 {{}} 双大括号

<!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>
    <!-- vue.json生成的vue模板 -->
    <div id='app'>{{message}}
        <!-- Mustache语法中,还可以写简单的表达式 -->
        <h2>{{uname + ' ' + age}}</h2>
        <h2>{{uname}} {{age}}</h2>
        <h2>{{num * 10}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                uname: '猫',
                age: 18,
                num: 20
            },
        });
    </script>
</body>

</html>
View Code

2、v-once

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<!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>
     <!-- v-once 后面不用跟任何表达式 -->
    <div id='app' v-once>{{message}}</div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
            },
        });
    </script>
</body>

</html>
View Code

 3、v-html

当我们从服务器请求到的数据本身就是一段HTML代码时，可以使用该指令进行解析

  • 该指令后面往往会跟上一个string类型
  • v-html会将string类型的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'>{{message}}
        <!-- 这里 -->
        <li v-html="url"></li>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',

                
                url: '<a href="http://www.baidu.com">百度一下</a>'
            },
        });
    </script>
</body>

</html>
View Code

使用Mustache语法渲染和使用v-html渲染的区别：

 

 

 4、v-text

与Mustache类似,将数据显示在页面中,但是v-text不如Mustache灵活
v-text通常情况下，接受一个string类型
<!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 v-text="message"></h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
            },
        });
    </script>
</body>

</html>
View Code

5、v-pre

v-pre用于跳过当前元素和他子元素的编译过程，用于显示原本的Mustache语法

<!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>
    <!-- vue.json生成的vue模板 -->
    <div id='app'>{{message}}
         <p>{{info}}</p>
         //  上面两条语句会打印data中的数据
         //   下面两条语句则直接打印Mustache语句，注意看层级关系
        <h2 v-pre>{{meaage}}
            <p>{{info}}</p>
        </h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                info: {
                    name:'acat',
                    age: 18
                }
            },
        });
    </script>
</body>

</html>
View Code

 

 

 6、v-cloak

有些情况下,浏览器可能会直接显示出未被解析的Mustache标签
比如当网络较慢,网页还在加载 Vue.js,而导致 Vue 来不及渲染,这时页面就会显示出Vue源代码
<!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>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- vue.json生成的vue模板 -->
    <div id='app'>{{message}}
         <h2 v-cloak>{{message}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        setInterval(function () {
            let app = new Vue({
                el: '#app',
                data: {
                    message: 'template',
                },
            });
        }, 1000);
    </script>
</body>

</html>
View Code

这里设置1s后让vue对页面进行渲染，未渲染前，页面会显示{{message}}，而h2标签中因为设置了v-cloak，Mustache代码不会被显示出来

二、绑定属性

v-bind

v-bind用于绑定一个或多个属性值（比如src、href、类等），或者向另一个组件传递props值

示例：<img v-bind:src="imgURl" alt="">

语法糖：直接写一个冒号：<img :src="imgURl" alt="">

body>
    <div id='app'>{{message}}
        <!-- 动态绑定属性 v-bind
            语法糖    :
        -->
        <img :src="imgURl" alt="">
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                imgURl: 'https://cn.vuejs.org/images/logo.png'
            },
        });
    </script>
</body>
View Code

（1）v-bind绑定class（对象写法）

写法一：直接通过 {} 绑定一个类

  • <p :class="{active: isActive}">你好啊</p>

写法二：和普通的类同时存在

  • <p calss="title" :class="{active:isActive}">你好啊</p>

写法三：可以放在methods或coputed中

  • <p :class="getClasses()">你好啊</p>

 注意：对象中的属性值是一个boolean类型，true表示绑定该class，false表示不绑定

<!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: red;
        }
    </style>
</head>

<body>
    <!-- vue.json生成的vue模板 -->
    <div id='app'>{{message}}
        <!-- <h2 calss="title" :class="{active:isActive}">你好啊</h2> -->
        <!-- <h2 :class="{ active: isActive }">你好啊</h2> -->


        <h2 :class="getClasses()">你好啊</h2>
        <button @click="changeColor">按钮</button>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                isActive: true,
                isLine: true
            },
            methods: {
                changeColor: function () {
                    // 取反   
                    this.isActive = !this.isActive
                },
                getClasses: function () {
                    return { active: this.isActive }
                }
            }
        });
    </script>
</body>

</html>
View Code

（2）v-bind绑定class（数组写法）

写法一：通过 {} 绑定一个或多个类

  • <p :class="['active','line']"></p>

写法二：可以和普通的类同时存在

  • <p class="title" :class="['active','line']"></p>

写法三：可以放在methods或computed中

        这里的classes是一个计算属性

  • <p class="title" :class="classes"></p>
<!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 :class="['active', 'line']">{{message}}</h2> -->

        <h2 :class="getClass()">{{message}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                active: 'aaaaa',
                line: 'bbbbb'
            },
            methods: {
                getClass: function () {
                    return [this.active, this.line]
                }
            }
        });
    </script>
</body>

</html>
View Code

（3）v-bind绑定css内联样式（对象写法）

注：在写css属性名的时候，可以使用驼峰式如：fontSize 

或 短横线分割，但是要用单引号括起来：‘font-size’

示例：<h2 :style="{font-size: '50px'}">{{message}}</h2>

  • style后面跟的是一个对象类型
  • key是css属性名，value是具体赋的值
<body>
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->

    <!-- '50px'必须加上单引号,否则会被当成一个变量解析 -->
    <!-- <h2 :style="{font-size: '50px'}">{{message}}</h2> -->
    <div id='app'>
        <!-- <h2 :style="{fontSize: finalSize + 'px'}">{{message}}</h2> -->
        
        <h2 :style="getStyles()">{{message}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                finalSize: 50,
                finalColor: 'red'
            },
            methods: {
                getStyles: function(){
                    return { fontSize: this.finalSize + 'px', color: this.finalColor }
                }
            }
        });
    </script>
</body>
View Code

（4）v-bind绑定css内联样式（数组写法）

写法类似v-bind绑定class的数组写法

示例：<h2 :style="[{ color: 'red', fontSize: '50px' }]">{{message}}</h2>

三、计算属性

  • 所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

根据上面的内容可知，在html标签中可以直接通过插值语法显示一些data中的数据，但是在某些情况下，我们可能需要对数据进行一些转换或需要将过个数据结合起来进行展示，

这时候如果再使用插值语法，就会使整个代码块变得臃肿复杂，这时候就可以使用计算属性。

  • 你可能会有这样的疑问：既然需要处理数据，那我直接在methods中处理不就行了，为什么需要computed？  
  • 这里先留个疑问，下面进行解释

1、先看看计算属性的基本操作：

<body>
    <div id='app'>
        <h1>{{fullName}}</h1>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            computed: {
                fullName: function () {
                    return this.fistName + ' ' + this.lastName
                }
            },
            data: {
                message: 'template',
                fistName: '姓',
                lastName: '名'
            },
        });
    </script>
</body>
View Code

复杂一点的操作：

<body>
    <div id='app'>
        <h2>{{totalPrice}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            computed: {
                totalPrice: function () {
                    let result = 0;
                    for (let book of this.books) {
                        result += book.price;
                    }
                    return result
                }
            },
            data: {
                message: 'template',
                books: [
                    { id: 100, naem: '现代操作系统', price: 101 },
                    { id: 101, naem: 'DOM编程艺术', price: 102 },
                    { id: 102, naem: '深入理解计算机原理', price: 103 },
                    { id: 103, naem: '计算机网络', price: 104 },
                ]
            },
        });
    </script>
</body>
View Code

除了上例的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

2、计算属性的setter和getter

每个计算属性都包含一个getter和setter，在上面的例子中，我们其实是使用了getter方法来读取数据

// getter方法

computed: {
    fullName: {
        get() {
            return this.fistName + ' ' + this.lastName
        }
    }
}

再来看上面的示例代码可以发现，在调用计算属性时，是没有加小括号的，从getter方法中不难看出，我们调用的就是一个属性，在调用这个属性时，它会自动调用get方法

因此可以直接写为：

computed: {
                fullName() {
                    return this.fistName + ' ' + this.lastName
                }
            }

关于setter方法，我们一般不使用，这里做一个简单的示例

computed: {
    fullName: {
        set(item) {
            console.log(item);
        }
    }
}

 

 

 3、计算属性的缓存

接着回到一开始留的疑问：既然methods也能实现我们想要的功能，为什么还要使用computed呢？

我们来看一个示例：

<!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'>
        <!-- methods会重复调用相同方法 -->
        <h2>{{getMessage()}}</h2>
        <h2>{{getMessage()}}</h2>
        <h2>{{getMessage()}}</h2>
        <h2>{{getMessage()}}</h2>
        <h2>{{getMessage()}}</h2>


        <!-- 计算属性会进行缓存,只调用一次 -->
        <h2>{{Message}}</h2>
        <h2>{{Message}}</h2>
        <h2>{{Message}}</h2>
        <h2>{{Message}}</h2>
        <h2>{{Message}}</h2>

        <!-- 因此就有了性能差别 -->
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
            },
            computed: {
                Message() {
                    console.log('computed');
                    return this.message
                }
            },
            methods: {
                getMessage() {
                    console.log('methods');
                    return this.message
                }
            }
        });
    </script>
</body>

</html>
View Code

在这个示例中，对于methods中的方法和computed中的属性，分别调用五次，下面是他们的对比

 

 从结果不难发现，methods被调用了五次，而computed只被调用了一次

  • methods中的方法： 如果是调用方法，只要页面重新渲染，方法就会重新执行；若不需要渲染，则不需要重新执行。
  • 计算属性：不管是否渲染，只要计算属性依赖的数据（缓存）未发生变化，就永远不变。

 

posted @ 2021-04-20 10:31  只猫  阅读(118)  评论(0)  编辑  收藏  举报