前端vue入门(纯代码)09

已于 2023-11-11 17:01:36 修改
阅读量769 收藏
点赞数 2
分类专栏： Vue前端 文章标签： 前端 vue.js javascript
于 2023-06-19 22:26:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62003092/article/details/131296445
版权

【09.vue中组件的自定义事件】

自定义组件链接

  • 在vue中用的click【点击】、keyup【按键】……等事件，这些属于内置事件，也就是js自带的事件。
问题一：什么是组件自定义事件呢？
  • 【内置事件】:是给html元素用的，比如span、div等标签，不是组件。
  • 【自定义事件】：顾名思义就是自己打造的事件，包含事件名，事件回调函数等，定义好之后去给组件使用。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。
问题二：如何实现子组件给父组件传值？

(1）利用props传值实现

​ 通过props也可以实现，先定义父子组件，school是父组件，student是子组件。

School.vue父组件

  • props传值：父组件需要提前给子组件一个函数【getStudentName】，子组件用props声明接收那个函数【getStudentName】

  • 注意：使用props属性时，需要使用冒号来区别传入的是双引号里面的内容还是字符串，这里我们传的是一个函数，因此需要用冒号去识别函数名

  • 具体写法对应是：

     <Student :子组件发送数据时调用的方法名="父组件接收数据的方法名"> </Student>
 <Student :getStudentName="getStudentName"/>

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <Student :getStudentName="getStudentName"/>
    <h1>子组件Student传过来的值：{{ StudentName }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
    components: {Student},
	data() {
		return {
           StudentName:'',
		};
	},
	methods: {
    getStudentName(name){
      console.log('School收到了学生名：',name)
      this.StudentName= name
    }
  },
};
</script>

<style scoped>
.school {
	background-color: rgb(73, 192, 150);
}
</style>

Student.vue子组件

  • 首先需要用props声明接收父组件传的函数【getStudentName】。然后给按钮添加点击事件，通过点击来触发点击事件，从而调用sendStudentlName(name)方法【带参数:子组件中的参数name: '何大春'】，在该方法中调用已经声明过的父组件中的函数getStudentName(Studentname)，并传入你要传递的数据参数，这就已经实现子组件向父组件传参，最后将该参数在父组件的模板中展示出来即可。

  • props子组件给父组件传递数据的过程就是：

    • 子组件通过调用父组件传过来接收子组件数据的方法，来实现子组件数据向父组件的传递。
<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
  props:['getStudentName'],
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
		sendStudentlName(Studentname) {
         // 调用父组件中的函数，并把子组件中的参数name传给父组件
         this.getStudentName(Studentname)
    },
	},
};
</script>

<style lang="less" scoped>
.student {
	background-color: tomato;
	padding: 50px;
	margin-top: 50px;
	margin-left: 50px;
	width: 300px;
	height: 350px;
}
.h2 {
  padding: 5px;
  margin: 5px 5px 5px 5px;
}
.haha {
  background-color: rgb(211, 233, 130);
}
</style>

App.vue组件

<template>
  <div> 
    <School/>
  </div>
</template>

<script>
import School from "./components/School";
export default {
	name: 'App',
  components: {School},
	data() {
		return {};
	},
};
</script>

界面展示：

在这里插入图片描述

在这里插入图片描述

(2）利用组件自定义事件实现父子传值

​ 组件自定义事件需要用到v-on，也就是v-on在谁身上，就是在谁的组件实例上绑定了事件。

  • ①在父组件School中给子组件Student绑定一个自定义事件getName

    <!-- 给子组件的实例对象VC绑定了事件getName，该事件触发会调用函数getStudentName -->
    <Student v-on:getName="getStudentName"/>

  • ②如何触发自定义事件getName：在谁身上定义的就找谁触发，所以，我们需要找子组件的实例对象VC触发

    • 在子组件Student的实例对象上去，触发自定义事件getName：this.$emit('getName',参数1,...,参数n)

  • 子组件传入参数。不传参数就是单纯的触发父组件对应的函数。

    sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',this.name,this.age,this.score)
    },

  • 父组件接收子组件的参数

    	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },

完整代码：

School.vue父组件【样式不变，还是上面的样式】

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <!-- 给子组件的实例对象VC绑定了事件getName，该事件触发会调用函数getStudentName -->
    <Student v-on:getName="getStudentName"/>
    <h1>子组件Student传过来的name：{{ StudentName }}</h1>
    <h1>子组件Student传过来的age：{{ StudentAge }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
  components: {Student},
	data() {
		return {
      StudentName:'',
      StudentAge:'',
		};
	},
	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },
};
</script>

Student.vue子组件

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
	<!-- <button class="haha" @click="sendStudentlName(name)">
     <h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
      <h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getName',this.name,this.age,this.score)
    },
	},
};
</script>
  • 【简写】:v-on的简写形式就是@

(3）利用ref实现父子传值

​ ref相当于一个组件的标识，可以直接拿到该组件的实例对象。【利用ref属性拿到子组件的实例对象，再利用$on给子组件绑定自定义事件，相当于换了一个绑定自定义事件的方法】

  • ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例vc，可以使用组件的所有方法和属性。

        <Student ref="studentRef"/>

  • 如何通过ref去绑定自定义事件：通过$on

    // 当父组School件挂载完毕时，通过$on去绑定自定义事件，以及调用的函数。
  mounted() {   
   this.$refs.studentRef.$on('getName',this.getStudentName)
      
    // 自定义事件只触发一次
    // this.$refs.studentRef.$once('getName',this.getStudentName)
  },

  • 好处是：虽然麻烦但灵活性强，比如我们想3秒之后再调用这个事件我们可以直接添加一个定时器:

    // 3s之前，不会触发；3秒钟过后，才能触发该自定义事件
    setTimeout(() => {
      this.$refs.studentRef.$on('getName',this.getStudentName)
    }, 3000);

只想触发一次函数，怎么办？

  • 第一种 ：ref形式的自定义事件，将$on，改为$once

        // 自定义事件只触发一次
    this.$refs.studentRef.$once('getName',this.getStudentName)

  • 第二种： v-on形式的自定义事件，添加once修饰符

    <Student v-on:getName.once="getStudentName"/>
<!-- <Student @getName.once="getStudentName"/> -->

完整代码：

School.vue父组件【样式不变，还是上面的样式】

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <!-- <Student v-on:getName.once="getStudentName"/> -->
    <!-- <Student @getName.once="getStudentName"/> -->
    <Student ref="studentRef"/>
    <h1>子组件Student传过来的name：{{ StudentName }}</h1>
    <h1>子组件Student传过来的age：{{ StudentAge }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
  components: {Student},
	data() {
		return {
      StudentName:'',
      StudentAge:'',
		};
	},
	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },
  // 当父组件挂载完毕时，通过$on去绑定自定义事件，以及调用的函数。
  mounted() {
    // 3s之前，不会触发；3秒钟过后，才能触发该自定义事件
    /* setTimeout(() => {
      this.$refs.studentRef.$on('getName',this.getStudentName)
    }, 3000); */
    this.$refs.studentRef.$on('getName',this.getStudentName)
    // 事件只触发一次
    // this.$refs.studentRef.$once('getName',this.getStudentName)
  },
};
</script>

Student.vue子组件

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<!-- <button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
      <h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getName',this.name,this.age,this.score)
    },
	},
};
</script>

自定义事件，怎么解绑？【vc.$off[‘A’,‘B’]】

  • 【解绑单个事件】在子组件Student中定义一个解绑按钮。

    <button class="haha" @click="unbind">点击此处解绑</button>

  • 在子组件的methods中配置，解绑单个自定义事件。

    // 解绑自定义事件：getName
    unbind(){
      console.log("解绑后");
      this.$off('getName')
    }

在这里插入图片描述

  • 【解绑多个自定义事件】

    1. 定义两个自定义事件:getName,getAge

      this.$refs.studentRef.$on('getName',this.getStudentName)
this.$refs.studentRef.$on('getAge',this.getStudentAge)

    2. 解绑多个事件：

      // 解绑自定义事件：getName
    unbind(){
      console.log("解绑后");
        
      // 解绑多个事件
       this.$off(['getName','getAge'])
      // 解绑多个事件
      // this.$off()
    }

    3. 解绑全部事件：

       // 解绑全部事件
  this.$off()

完整代码：

School.vue

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <!-- <Student v-on:getName.once="getStudentName"/> -->
    <!-- <Student @getName.once="getStudentName"/> -->
    <Student ref="studentRef"/>
    <h1>子组件Student传过来的name：{{ StudentName }}</h1>
    <h1>子组件Student传过来的age：{{ StudentAge }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
  components: {Student},
	data() {
		return {
      StudentName:'',
      StudentAge:'',
		};
	},
	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      // this.StudentAge = params[0]
    },
    getStudentAge(age){
      console.log('School收到了学生age：',age)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentAge=age
      // this.StudentAge = params[0]
    }
  },
  // 当父组件挂载完毕时，通过$on去绑定自定义事件，以及调用的函数。
  mounted() {
    // 3s之前，不会触发；3秒钟过后，才能触发该自定义事件
    /* setTimeout(() => {
      this.$refs.studentRef.$on('getName',this.getStudentName)
    }, 3000); */
    this.$refs.studentRef.$on('getName',this.getStudentName)
    this.$refs.studentRef.$on('getAge',this.getStudentAge)
    // 事件只触发一次
    // this.$refs.studentRef.$once('getName',this.getStudentName)
  },
};
</script>

<style scoped>
.school {
	background-color: rgb(73, 192, 150);
}
</style>

Student.vue

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<!-- <button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
    点击此处给父组件School传Name</button>
    <button class="haha" @click="sendStudentlAge()">
    点击此处给父组件School传Age</button>
    <button class="heihei" @click="unbind"><h2>点击此处解绑</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getName',this.name,this.age,this.score)
    },
    sendStudentlAge() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getAge',this.age)
    },

    // 解绑自定义事件：getName
    unbind(){
      console.log("解绑后");
      // 解绑单个事件
      // this.$off('getName')
      // 解绑多个事件
      // this.$off(['getName','getAge'])
      // 解绑多个事件
      this.$off()
    },
	},
};
</script>

<style lang="less" scoped>
.student {
	background-color: tomato;
	padding: 20px;
	margin-top: 20px;
	margin-left: 50px;
	width: 300px;
	height: 400px;
}
.h2 {
  padding: 5px;
  margin: 5px 5px 5px 5px;
}
.haha {
  background-color: rgb(211, 233, 130);
}
.heihei{
  background-color: aquamarine;
}
</style>

  • 【销毁组件实例】:this.$destroy()生命周期钩子销毁了当前的组件实例，组件上事件监听没了，自定义事件也不奏效，但是，注意：原生DOM也销毁了—【下面案例中的add()方法也被销毁了】。

    <button @click="add">Number++：{{ number }}</button>
<button class="hehe" @click="death"><h3>销毁当前student组件实例对象（VC）</h3></button>

    add(){
      console.log("add回调被调用了");
      this.number++
    },
    // 销毁Student组件实例
death(){
      // 销毁了当前student组件实例对象（VC）
      console.log("销毁了当前student组件实例对象后");
      this.$destroy()
    },

  • 如果vm被销毁了，那么，vm里面的所有子组件都会被销毁。

不管子组件，父组件，还是App，vm组件哪一个被销毁了，下图界面中的按钮【按钮都在子组件Student中】不管如何点击，都是没有反映的。

在这里插入图片描述

完整代码：

School.vue

  • School.vue父组件代码不变。

Student.vue

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<!-- <button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
    点击此处给父组件School传Name</button>
    <button class="haha" @click="sendStudentlAge()">
    点击此处给父组件School传Age</button>
    <button @click="add">Number++：{{ number }}</button>
    <button class="hehe" @click="death"><h3>销毁当前student组件实例对象（VC）</h3></button>
    <button class="heihei" @click="unbind"><h3>点击此处解绑</h3></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
      number:0
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getName',this.name,this.age,this.score)
    },
    sendStudentlAge() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      console.log("发送数据")
      this.$emit('getAge',this.age)
    },

    add(){
      console.log("add回调被调用了");
      this.number++
    },
    // 销毁Student组件实例
    death(){
      // 销毁了当前student组件实例对象（VC）
      console.log("销毁了当前student组件实例对象后");
      this.$destroy()
    },
    // 解绑自定义事件：getName
    unbind(){
      console.log("解绑后");
      // 解绑单个事件
      // this.$off('getName')
      // 解绑多个事件
      // this.$off(['getName','getAge'])
      // 解绑多个事件
      this.$off()
    },
	},
};
</script>

<style lang="less" scoped>
.student {
	background-color: tomato;
	padding: 20px;
	margin-top: 20px;
	margin-left: 50px;
	width: 300px;
	height: 500px;
}
.h2 {
  padding: 5px;
}
.haha {
  background-color: rgb(211, 233, 130);
}
.heihei{
  background-color: aquamarine;
}
.hehe{
  background-color: rgb(121, 195, 232);
}
</style>
总结：

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的触发和传参在B中，但事件的回调在A中）。

  3. 绑定自定义事件：

    • 第一种方式，在父组件中：<Demo @getName="test"/>或 <Demo v-on:getName="test"/>

    • 第二种方式，在父组件中：

    <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('getName',this.test)
}
    • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('getName',数据)

  5. 解绑自定义事件this.$off('getName')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('getName',回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

neneduck
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3314
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
写给前端初学者的Vue入门教程
doomliu的博客
05-13 2202
一、web应用开发 Vue是一款优秀的web应用开发框架，使用它可以让我们开发web应用时候更加高效。在学习Vue之前需要先了解一下web应用开发。 什么是web应用？当我们开发web应用时候，我们在写什么？ 从用户角度，web应用是一个可以提供用户交互并呈现信息的软件。 用户在使用一个web应用的时候，可以通过点击、输入、滑动、语音等等与应用进行交互，控制应用。应用通过界面、音频方式给用户呈现信息，比如电商类应用，用户可以通过搜索和选择查看需要的商品信息；视频类应用，用户可以通过搜索和
前端vue入门(纯代码)05
m0_62003092的博客
06-11 1211
5.props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。【props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。3.如果props中的属性和data中的属性相同，那么显示的为props中的属性，
Vue 的入门代码
lxz_99527的博客
11-05 1621
Vue很有趣很简洁上手很快，深度很深。
Vue前端+快速入门【详解】
qq_1424674116的博客
03-04 1902
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
【前端】Vue入门
qq_45888932的博客
04-28 2101
目前记录Vue的常用指令和一个小案例-选项卡
Vue 基础入门
热门推荐
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Web核心技术前端框架VUE入门
helpluozhao123的博客
01-21 2531
1，VUE 1.1 概述 Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。 我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下 学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？ ==基于MVVM(Model-View-ViewModel)思想，实现数据
Vue入门——初步了解
秋书一叶的博客
11-25 1707
Vue的简单介绍及快速入门
一文帮你搞定前端vue开发Pinia的入门
qq_74637823的博客
01-10 1360
vue中的pinia
Vue.js前端开发 PDF
05-30
前端三大框架之一：Vue.js前端开发 PDF格式，有需要的朋友可以自行下载
VUE3+Element-Plus入门代码
12-27
VueDemo_boot为前端代码，api为后端代码
Vue.js前端开发实战-源代码.zip
07-07
Vue.js前端开发实战-源代码.zip
web前端+Vue 3+十分钟带你入门Vue.js源码包+生日计算器（年龄计算）
06-03
内容概要： ...4. 本项目使用最新的Vue版本开发，代码不过时，下载解压就能运行 5. 本项目也演示了流行的日期处理包date-fns的使用 补充： 具体使用可以参考我的博文《十分钟带你入门Vue.js开发（Vue 3）》
vue:Vue入门到实践
05-11
教程中我们采用前后端分离的开发模式，也就是前端调用后端提供的JSON接口，让Vue和Koa2的代码没有任何的耦合。所以开发环境也是完全分离的，开发完成后你甚至可以分别部署到两个服务器上来进行运行。 1.建立前端...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 374
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 531
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 257
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 337
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
前端vue有视频和源码的教程
07-31
视频教程通常包含具体的代码示例，通过实践可以帮助学习者更好地理解和运用Vue的概念和技术。此外，视频教程还可以提供一些实际项目的案例，通过跟随教程完成实际项目的开发，学习者能够更好地掌握Vue的用法和应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值