vue对表单的处理，组件，路由的使用

最新推荐文章于 2022-05-25 17:22:33 发布

冯阿宝

最新推荐文章于 2022-05-25 17:22:33 发布

阅读量694

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45196214/article/details/107048783

版权

本文详细介绍了Vue.js中如何处理表单，包括双向数据绑定、表单修饰符和默认选中效果。接着讨论了组件化与模块化的差异，组件的创建方式以及组件间数据传递的多种方法。此外，还涵盖了路由的各个方面，如路由定义、命名式路由、子路由、向组件传递参数的方式，以及动态路由匹配和路由导航。最后，文章探讨了路由懒加载以提高应用性能。

摘要由CSDN通过智能技术生成

文章目录

一：对表单的处理

表单数据的双向绑定：

<input v-model="属性值">//使用v-model双向绑定

表单修饰符：.number/.lazy/.trim

<input v-model.number="num">//转换为数字类型
<input v-model.trim=" n um ">//去除两端的空格，中间的空格无法去除
<input v-model.lazy="num">//将表单的input事件转换为change事件

默认选中效果：针对单选，多选框，下拉框等

<select v-model="msg">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
</select>
//=======================================================
var vm=new Vue({
   
	data:{
   
	msg:[1]//
})

二：对组件的处理

（1）组件化与模块化的区别：

组件化时通过将页面按照不同的功能划分为不同的部分页面即组件
模块化则针对代码而言，而非页面，它将能够实现某个功能的代码组合起来形成能实现某个功能的模块如能实现循环功能的模块。

（2）组件的创建方式：

方式一：全局组件，可以在任意位置使用

vue.component('组件名',{
   
	data:function(){
    return {
   }},//组件的data为函数，因为创建的组建可以复用而组件内部的数据不可以，而data为函数时可以形成闭包环境。data的返回值必须为对象类型。
	template:''//template也可以是ES6中的模板字符串
})

方式二：局部组件，只能在父组件区域中使用。

var 组件模板名={
   
	template:'',
	data:function(){
   
	return {
   }
}}
//=======================================================
var vm=new vue({
   
	data:{
   },
	components:{
   
	组件名：组件模板名
}})

（3）组件间的数据传递方式：

父传子

//静态方法
<div id="#app>
	<son>{
   {
   msg}}</son>//数据的使用：直接在子组件中使用数据或者在模板内部使用即可
</div>
<script>
var son={
   
	template:'<div></div>',
	data:function(){
   
	return {
   },
	props:'msg'//使用props来接收数据
}}
var vm=new vue({
   
	data:{
   
		msg:'hello'//要传递给子组件的数据
	},
	components:{
   
		son：son//son为vm实例的子组件。
}})
</script>

//动态方法
<div id="#app>
	<son :msg="msg">{
   {
   msg}}</son>//v-bind绑定传递过来的数据，属性值也为该数据
</div>
<script>
var son={
   
	template:'<div>{
   {msg}}</div>',
	data:function(){
   
	return {
   },
	props:'msg'//使用props来接收数据
}}
var vm=new vue({
   
	data