通俗易懂--快速入门Vue--2

Posted xujunkai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通俗易懂--快速入门Vue--2相关的知识,希望对你有一定的参考价值。

1.Vue中的实例

<div id="exp">
    <div @click="handleClick">{{content}}</div>
</div>
</body>
<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            content:"hello world"
        },
        methods:{
            handleClick:function () {
                alert(this.content)
            }
        }
    });
</script>
// vm为一个实例,当执行vm.$destory()就会销毁这个实例。这样通过修改数据vm.$data.message = "123",
页面不会有相应的变化

2.Vue生命周期钩子

  • 生命周期函数就是vue实例在某一个时间点自动执行的函数。
  • 注意:生命周期的函数并不会定义在methods中。

技术图片

  • 代码
<div id="app"></div>
<script>
    var vm = new Vue({
        el:"#app",
        template:`<div>{{test}}</div>`,
        data:{
            test:"hello world"
        },
        // vue实例进行基本初始化之后会被执行
        beforeCreate:function () {
            console.log("beforeCreate");
        },
        // 初始化一些外部注入,和双向绑定,当此类操作完成会调用created
        created:function () {
            console.log("created");
        },
        // 在template页面挂载之前执行函数
        beforeMount:function () {
            // 此时this.$el 还没有被渲染
            console.log("beforeMount");
        },
        // 页面渲染完执行周期函数mounted
        mounted:function () {
            // 此时this.$el 已经被渲染了,
            console.log("mounted");
        },
        // 当调用vm.$destroy(),即将被销毁时候会执行
        beforeDestroy:function () {
            console.log("beforeDestory");
        },
        // 当前实例被销毁会被调用
        destroyed:function () {
            console.log("destroyed");
        },
        // 数据发生改变,vm.test='123'还没有重新渲染数据会被执行
        beforeUpdate:function () {
            console.log("beforeUpdate");
        },
        // 重新渲染数据会被执行vm.test='123'
        updated:function () {
            console.log("updated");
        }
    })
</script>

3.模板语法

1.差值表达式

<div id="exp">
    {{name}}
</div>
或
<div>{{"my name is "+name}}</div>


<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name:"James"
        }
    });
</script>

2.v-text

<div v-text="name"></div>
或
<div v-text="'my name is ' + name"></div>
<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name:"James"
        }
    });
</script>

3.v-html

<div v-html="name_html"></div>
var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name_html:"<h1>James</h1>"
        }
    });

4.v-on

5.v-bind

4.侦听器和计算属性

1.计算属性

  • 所谓计算属性,是通过计算得来的,下面fullName是通过定义computed内的函数得到的。
var vm = new Vue({
    el:"#exp",
    data:{
        firstName:"Dell",
        lastName:"Lee"
        age:20
    },
    computed:{
        fullName:function () {
            console.log("计算一次")
            return this.firstName + " " + this.lastName
        }
    }
});
  • 计算属性是有缓存的,上面的fullName是通过firstName和lastName拼接成的,当firstName和lastName不发生改变,比如只改变了age,是不会打印"计算一次",因为计算属性内部有缓存,为了提高性能,但是firstName或lastName发生改变,会打印"计算一次",进行重新计算一次。
  • 相比如methods方法,在age发生变化时,会再次重新调用fullName,所以计算属性更加高效:
methods:{
    fullName:function () {
    return this.firstName + " " + this.lastName
    }
},

2.侦听器

  • 通过watch监听firstName和lastName改变,如果数据发生改变会执行watch监听的函数,如果没有发生改变则不会执行。侦听器和计算属性都有缓存的概念,但是通过watch侦听器写出的代码更加复杂:
watch:{
    firstName: function () {
        this.fullName = this.firstName + " " + this.lastName
    },
    lastName: function () {
        this.fullName = this.firstName + " " + this.lastName
    },
},
  • 所以最优推荐:计算属性 > 侦听器 > methods

3.计算属性的setter和getter

  • computed不仅可以写get方法,还可以写set方法,去设置值,但是我们一般都是只写get方法,注意的是set方法需要传入一个值。
computed:{
    fullName:{
        // 当取 fullName 会执行此方法
        get:function () {
        return this.firstName + " " + this.lastName
        },
        // 当设置fullName 会执行此方法
        set:function (value) {
        var arr = value.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];

        console.log(value)
        }
    }
}

5.vue中的样式绑定

  • 在我们写页面过程中,会给DOM添加一些样式,那么Vue中如何添加样式

方式1:class对象绑定

<style>
    .activated {
        color:red;
    }
</style>
<div id="exp">
    <div @click="handleDivClick" :class="{activated:isActivated}">{{text}}</div>
</div>

<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            text:"hello world",
            isActivated:false
        },
        methods:{
            handleDivClick:function () {
                this.isActivated = ! this.isActivated
            }
        }
    });

方式2:数组方式

<div id="exp2">
    <div @click="handleDivClick" :class="[activated,]">{{text}}</div>
</div>


var vm2 = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp2",
    data:{
        text:"hello world",
        activated:""
    },
    methods:{
        handleDivClick:function () {
            this.activated = this.activated === "activated" ? "" : "activated"
        }
    }
});

方式3:style改变样式 对象绑定

<div id="exp3">
    <div @click="handleDivClick" :style="styleObj">{{text}}</div>
</div>

<script>
    var vm3 = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp3",
        data:{
            text:"hello world",
            styleObj:{
                color:"black"
            }
        },
        methods:{
            handleDivClick:function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    });

</script>

方式4:style改变样式 数组绑定

<div @click="handleDivClick" :style="[styleObj,{fontSize:'40px'}]">{{text}}</div>

6.Vue条件渲染

1.v-if

<div v-if="show">{{message}}</div>

2.v-show

<div v-show="show">{{message}}</div>
  • 它们之间区别在于,v-show其实已经在页面渲染出来了,只不过加上了display:none,而v-if还没有在页面渲染出来。
var vm = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp",
    data:{
        show:false,
        message:"hello world"
    }
});
  • 当在终端输入:vm.show = true,它们都会显示。当经常显示去除标签时,显然v-show 更加高效。因为不会想v-if一样,不断的创建和销毁。反之v-if更合适。

3.v-if-else / v-else

  • v-else
<div id="exp">
    <div v-if="show">{{message}}</div>
    <div v-else>Bye world</div>
</div>
  • v-else-if
<div id="exp">
    <div v-if="show === 'message'">{{message}}</div>
    <div v-else-if="show ==='count'">1</div>
    <div v-else>Bye world</div>
</div>
  • v-if,v-else,v-else-if绑定标签一定要连起来写,才不能失效

4.key值的使用

  • key值的使用是必要的
<div id="app">
    <div v-if="show">
        用户名: <input type="text" key="username">
    </div>
    <div v-else>
        邮箱名: <input type="text" key="email">
    </div>
</div>
<script>
    //每个元素标签设置一个key值, 表示它是唯一标签,如果2个key不一样则不会服用原来元素标签
    // 虚拟dom算法用的内容
    var app = new Vue({
        el:"#app",
        data:{
            show:false
        }
    })
</script>

7.Vue中的列表渲染 v-for

  • 基础的使用
<div id="exp">
    <div v-for="(item,index) of list">
        {{item}}------{{index}}
    </div>
</div>
var vm = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp",
    data:{
        list:[
            "hello,",
            "James",
            "nice",
            "to",
            "meet",
            "you"
        ]
    }
});
  • 为了提高循环的性能会给v-for标签加上唯一的key值,那么上例就可以这么写:
<div v-for="(item,index) of list" :key="index">
  • 但是往往项目中后端返回的数据都是如下类似类型的:
list:[
    {id:001102,text:"hello"},
    {id:029303,text:"James"},
    ......
]
  • 那么可以在v-for绑定唯一的key值
<div v-for="(item,index) of list" :key="item.id">
  • 当我们操作数组时,不能通过下标方式添加数组如:list[i]={id:03957569,text="bye"},只能通过vue中提供方式如下:

    • 方式1:
    push
    pop
    shift
    unshift 
    splice
    sort
    reverse
    • 方式2:
    改变数组的引用

template占位符

  • 模板占位符,通过模板占位符可以帮助我们包裹一些元素,但是在循环过程中,并不会真正被渲染到页面上。

  • 数组的循环

<template v-for="(item,index) of list" 
:key="item.id">
    <div>
        {{item.text}}
    </div>
    <span>
        {{index}}
    </span>
</template>
  • 对象的循环
<div id="app">
    <div v-for="(item,key,index) of userInfo">
        {{item}}---{{key}}---{{index}}
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            userInfo:{
                name:"James",
                age:28,
                gender:"male",
                salary:"secret"
            }
        }
    });
</script>

8.补充:Vue当中set方法

  • 对象增加数据
//app为一个实例
app.$set(app.userInfo,"address","beijing")
  • 数组增加数据
vm.$set(vm.list,2,"wawawawaw")

小总结:

  • 改变数组中数据方式

    改变数组的引用
    使用数组的变异方法
    set方法
  • 改变对象中数据方式

    改变对象的引用
    set方法

以上是关于通俗易懂--快速入门Vue--2的主要内容,如果未能解决你的问题,请参考以下文章

通俗易懂--快速入门Vue--4

通俗易懂--快速入门Vue--1

JVM快速入门(图解超级详细通俗易懂)

Docker零基础快速入门(通俗易懂)

通俗易懂 Kafka 开发快速入门看这篇就够了

全网通BC26 透传TTL NB-IOT模块 NB核心板STM32二次开发 物联网(快速入门,通俗易懂,简单易学)