首页 > 其他分享> 文章详细

Vue简单学习

2021-03-11 09:31:29 阅读：112 来源： 互联网

标签：vue 简单绑定 next 学习 Vue 跳转组件路由

特点

双向绑定通过v- 命令来绑定js中原有的属性，把vue对象中的属性引入，完成视图与数据的绑定，然后在vue对象中绑定文本框的id等，实现视图与数据的绑定

同理，通过绑定vue对象中的方法，然后再通过视图将其与slot（插槽）进行绑定，可以实现插槽对vue对象的操作

关注分离度

简单的使用

webpack

打包，将所有的vue组件进行打包，指定入口和打包位置，一般为/js/bundle.js 之后在index.html页面上直接导入即可

vue的常用7个对象

el绑定元素

data 定义元素中的属性，可以使页面上的元素取到

data(){} 用来通信的方法

methods 元素可以使用的方法

其他的再去查一查

路由

import Vue from "vue"
import Router from "vue-router"  	//使用router必须引入的
import xxxx from "../xx/xx"  //导入需要进行跳转的组件 
Vue.use(Route);
export default new Router({
	mode: 'history',   		//路由的方式设置 用history没有#
	routes[ 				//[]表示数组
		{
		path: /mian,  		//表示请求的路径是 /main时执行一下操作	
		compoent: Main,		//跳转到Main页面
		props: true, 		//开启参数传递，可以将组件中的信息传到main页面	
		//redict: /main       重定向，和compoent用一个就可以
		children: {			//路由嵌套
			}
		}
	]
})

前端进行页面跳转的需要单独在一个包 router 下面写index,（一般一个包代表一种组件的类，其中核心的为index.js 能够自动加载到 compoents目录下的main.vue 中）组件写好后，先暴露一下，export，然后需要导入到路由中才能实现跳转，import就行在跳转的时候写router-Link to标签，如果再传递参数，需要v-bind进行绑定，之后再在路由中开启props =true 之后在页面进行显示视图要加上router-view

创建一个vue工程的步骤

在这里插入图片描述
之后用idea打开

钩子

作用和过滤器作用一样

export default{
	props: ['id'],				//表示传递的参数是
	name: 'UserFrofile'			//表示以什么名字被引用
	BeforeRouterEnter: (to,from,next)=>{			//进入该组件前需要执行的操作  参数固定
		xxxx					//表示方法体
		next();					//一定要写next，表示下一个
	}
	BeforeRouterLeave: (to,from,next)=>{			//离开该组件前需要执行的操作  参数固定
		xxxx					//表示方法体
		next();					//一定要写next，表示下一个
	}
}

在这里插入图片描述

404

在路由里面加一个跳转，path为星号，表示如果其他匹配不到的，就都compoent： 404

标签：vue,简单,绑定,next,学习,Vue,跳转,组件,路由
来源： https://blog.csdn.net/weixin_47820355/article/details/114647992

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9