Vue基础

最新推荐文章于 2021-04-24 17:44:30 发布

原创最新推荐文章于 2021-04-24 17:44:30 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解Vue.js的关键特性，包括组件实例化、生命周期、模板语法、计算属性、侦听器、样式绑定、条件渲染等，助你掌握Vue开发精髓。

1.组件实例化

vm实例有很多属性和方法，在使用$destroy()方法之后，则销毁了Vue实例，此刻控制台可以修改数据，但是不会显示在页面上面，该实例失去双向绑定的功能。

2.Vue的生命周期

Vue å®ä¾çå½å¨æ

结合代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例的生命周期函数</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app"></div>

<script>
    //生命周期函数就是Vue实例在某一时间点会自动执行的函数
    let vm=new Vue({
        el:"#app",
        template:"<div>{{test}}</div>",
        data:{
            test:"hello world"
        },
        beforeCreate(){
            console.log("beforeCreate");
        },
        created(){
            console.log("created");
        },
        beforeMount(){
            console.log(this.$el)
            console.log("beforeMount");
        },
        mounted(){
            console.log(this.$el)
            console.log("Mounted");
        },
        beforeUpdate(){
            console.log("beforeUpdate");
        },
        updated(){
            console.log("updated");
        },
        beforeDestroy(){
            console.log("beforeDestroy");
        },
        destroyed(){
            console.log("destroyed");
        }
    })
</script>

</body>
</html>

归纳：

1.生命周期函数就是Vue实例在某一时间点会自动执行的函数。（不需要手动执行）

2.所有的钩子函数不能写在methods（）对象中，单独的放在Vue的实例里面。

3.在beforeMount()执行的时候，页面还没有被完全渲染，mounted()执行的时候，页面已经被完全渲染。

4.beforeUpdate（）和update（）在数据变化的时候自动执行。

5.在执行vm.$destory()销毁实例的时候，beforeDestroy（）和destroyed（）在执行。

6.一共13个钩子函数，还有

3.模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{name + "李四"}}</div>
    <div v-text="name + '李四'"></div>
    <div v-html="name + '李四'"></div>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            name:"<h1>张三<h1>"
        }
    })
</script>

</body>
</html>

归纳：

1.差值表达式和v-text指令的渲染的值是一样的，带有标签的数据会转义

2.v-html指令会将数组解析成真正的html代码

3.实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

4.计算属性、侦听器和方法

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性、方法和侦听器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName + age}}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            firstName:"张",
            lastName:"三丰",
            age:20
        },
        computed:{   //计算属性会缓存
            fullName(){
                console.log("计算了一次")
                return this.firstName+this.lastName;
            }
        }

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

归纳：

1.计算属性会缓存

2.当页面不相关的数据发生了改变的时候，不需要计算

3.fullName的始终取决于firstName和lastName，只有当他们的值改变的时候，该属性才会重新计算。

方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性、方法和侦听器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName() + age}}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            firstName:"张",
            lastName:"三丰",
            age:20
        },
        methods:{    //方法
            fullName:function () {
                console.log("计算了一次")
                return this.firstName+this.lastName;
            }
        }

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

归纳:

1.每当触发重新渲染时，调用方法将总会再次执行函数。

2.调用的时候fullName（）需要加括号

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性、方法和侦听器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName + age}}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            firstName:"张",
            lastName:"三丰",
            fullName:"张三丰",
            age:20
        },
        watch:{
            firstName:function () {
                console.log("计算了一次");
                this.fullName = this.firstName+this.lastName
            },
            lastName:function () {
                console.log("计算了一次");
                this.fullName = this.firstName+this.lastName
            }
        }

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

归纳：

1.使用计算属性的时候，需要引入变量fullName且赋值

2.使用fullName不需要加括号

3.只有监听的属性发生了改变，才会触发函数

计算属性VS方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性VS侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

5.计算属性的get和set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的getter和setter</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName}}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            firstName:"dell",
            lastName:"Lee"
        },
        computed:{
            fullName:{
                get:function () {
                    return this.firstName + "  " + this.lastName;
                },
                set:function (value) {
                    var arr=value.split(" ");
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }

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

归纳：

1.如果不使用计算属性的get和set，那么是无法直接修改fullName 的值的，会报错

2.入股使用的set和get就可以直接修改fullName的值

6.Vue中的样式绑定

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <style>
        .active{
            color:red;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="app" :class="{active:isActive}" @click="handleDivClick()">
    {{content}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            content:'hello world',
            isActive:false
        },
        methods:{
            handleDivClick:function () {
                this.isActive=!this.isActive;
            }
        }
    })
</script>
</body>
</html>

点击之后出现：

方式二：通过数组添加多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式</title>
    <script src="vue.js"></script>
    <style>
        .active{
            color: red;
        }
        .active_one{
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div @click="handleDivClick()" :class="[active,active_one]">
        {{content}}
    </div>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            content:"hello world",
            active:"",
            active_one:"active_one"
        },
        methods:{
            handleDivClick(){
                this.active= this.active==="active"? '' : 'active';
            }
        }
    })
</script>
</body>
</html>

方式三：通过style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过style修改样式</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app" :style="[styleObj,{fontSize:'30px'}]" @click="handleDivClick()">
    {{content}}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            content:"hello world",
            styleObj:{
                color:'black'
            }
        },
        methods:{
            handleDivClick(){
                this.styleObj.color = this.styleObj.color==="black"?"red":"black"
            }
        }
    })
</script>
</body>
</html>

归纳：
1.绑定样式可以通过绑定class和style

2.以上二者都可以通过对象和数组两种方法来添加数据

7.条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="show" @click="handleDivClick()">{{message}}</div>
    <div v-else @click="handleDivClick()">bye world</div>
    <div v-show="show">{{message}}</div>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:false,
            message:"hello world"
        },
        methods:{
            handleDivClick(){
                this.show=!this.show;
            }
        }
    })
</script>

</body>
</html>

归纳：
1.v-if和v-else需要连在一起使用

2.v-if是真正的渲染，DOM元素直接从页面上面显示和消失

3.v-show是通过控制display:none来控制显示和隐藏的