通俗易懂--快速入门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中。

一、分三步流程解读
1、初始化显示
new Vue() 表示创建一个Vue实例，这里假设vm是新建的实例。

按照图上的流程是：beforeCreate() ➡ created() ➡ beforeMount() ➡ mounted()

2、更新状态
beforeUpdate() ➡ updated()

3、销毁Vue实例
vm.$destory()

beforeDestory() ➡ destoryed()

beforeDestory(): 做收尾工作（就是在结束之前做一些事情，如: 清除定时器）。

二、常用的生命周期方法
mounted，初始化之后就会立即调用。

created()/mounted()：发送ajax请求, 启动定时器等异步任务。

三、完整流程解读
① created表示已经创建结束了（过去式嘛），再创建完成之前会做一些准备工作（比如说，监视数据，数据到最后都会实现数据绑定的，会用到set用于监视数据的变化），在做准备工作之前会先调用beforeCreate()。

② created之后会判断是否存在“el”的配置，这里会涉及到一个自动挂载页面和手动挂载页面的概念，如果有el的话会自动挂载，指定了el之后，就指定了Vue管理的一片区域，假设没有指定区域的话，那vue为谁服务呢？当然谁都不服务了。所以另外一种方式，就需要手动调用 vm.$mount(el) 指定一片区域，基本上是不会这么做的。

③ 接着执行到判断我们是否有 “template”这个配置，如果没有就直接编译 el 这篇区域的HTML代码作为模板。要注意Vue转换成的HTML代码是没有直接挂载到页面上去的，它在内存里编译好了以后，才会全部挂载到页面上显示。在挂载之前，就有beforeMount()这个函数，挂载完成之后调用Mounted()。

④ 下面来到“更新”的一部分，挂载数据之后在页面更新之前会调用beforeUpdate()，页面发生变化之后会调用Updated()。

⑤ 最后执行到“死亡” ，当调用vm.$destory()的时候，所有的组件都会移除，在移除之前会调用beforeDestory() 来做一些收尾的工作，比如说前面也提到了清除定时器，死亡之后再调用destory()。

代码

<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方法
```
参考链接
https://blog.csdn.net/qq_41647999/article/details/85036981

posted @ 2020-01-22 23:50 是阿凯啊阅读(274) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

公告

昵称：是阿凯啊
园龄： 5年11个月
粉丝： 35
关注： 4

+加关注

2025年3月

日

一

二

三

四

五

六

阿凯

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

1.Vue中的实例

2.Vue生命周期钩子

3.模板语法

1.差值表达式

2.v-text

3.v-html

4.v-on

5.v-bind

4.侦听器和计算属性

1.计算属性

2.侦听器

3.计算属性的setter和getter

5.vue中的样式绑定

方式1：class对象绑定

方式2：数组方式

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

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

6.Vue条件渲染

1.v-if

2.v-show

3.v-if-else / v-else

4.key值的使用

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

template占位符

8.补充：Vue当中set方法

小总结：

公告

搜索

常用链接

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

阿凯

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

1.Vue中的实例

2.Vue生命周期钩子

3.模板语法

1.差值表达式

2.v-text

3.v-html

4.v-on

5.v-bind

4.侦听器和计算属性

1.计算属性

2.侦听器

3.计算属性的setter和getter

5.vue中的样式绑定

方式1：class对象绑定

方式2：数组方式

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

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

6.Vue条件渲染

1.v-if

2.v-show

3.v-if-else / v-else

4.key值的使用

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

template占位符

8.补充：Vue当中set方法

小总结：

公告

搜索

常用链接

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

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