Vue和综合案例

最新推荐文章于 2024-06-29 14:48:29 发布

InLoadwetrust

最新推荐文章于 2024-06-29 14:48:29 发布

阅读量60

点赞数

分类专栏： AJAX+Vue和Element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/InLoadwetrust/article/details/125604331

版权

1、Vue 高级使用

1.1、自定义组件

学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装
本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义

定义格式

Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="div">
        <my-button></my-button>
    </div>
</body>
<script>
    Vue.component("my-button",{
       
        // 属性
        props:["style"],
        // 数据函数
        data: function(){
       
            return{
       
                msg:"我的按钮"
            }
        },
        //解析标签模板
        template:"<button style='color:red'>{
       {msg}}</button>"
    });

    new Vue({
       
        el:"#div"
    });
</script>
</html>

1.2、Vue的生命周期

生命周期
生命周期的八个阶段

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="app">
        {
    {message}}
    </div>
</body>
<script>
    let vm = new Vue({
       
				el: '#app',
				data: {
       
					message: 'Vue的生命周期'
				},
				beforeCreate: function() {
       
					console.group('------beforeCreate创建前状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
					console.log("%c%s", "color:red", "message: " + this.message);//undefined
				},
				created: function() {
       
					console.group('------created创建完毕状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
				},
				beforeMount: function() {
       
					console.group('------beforeMount挂载前状态------');
					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
				},
				mounted: function() {
       
					console.group('------mounted 挂载结束状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
				},
				beforeUpdate: function() {
       
					console.group('beforeUpdate 更新前状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				updated: function() {
       
					console.group('updated 更新完成状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				beforeDestroy: function() {
       
					console.group('beforeDestroy 销毁前状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				destroyed: function() {
       
					console.group('destroyed 销毁完成状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				}
			});

		
			// 销毁Vue对象
			//vm.$destroy();
			//vm.message = "hehe";	// 销毁后 Vue 实例会解绑所有内容

			// 设置data中message数据值
			vm.message = "good...";
</script>
</html>

1.3、Vue异步操作***

在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！
使用步骤
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。
axios常用方法

代码实现

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>

最低0.47元/天解锁文章

InLoadwetrust

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue和综合案例

学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如就是对的封装本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义定义格式代码实现1.2、Vue的生命周期生命周期生命周期的八个阶段代码实现1.3、Vue异步操作***在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！使用步骤1.引入axios核心js文件。2.调用axios对象的方法来发起异步请求。3.调...
复制链接

扫一扫