vue学习笔记

本文深入探讨Vue.js的关键特性,包括组件通信、全局组件使用、路由管理、过滤器及前端路由实现。从父子组件传值到全局过滤器定义,再到vue-router的配置与使用,全面解析Vue开发技巧。
(1)父子组件的使用:
	*父和子,使用的父组件,被用的是子组件
	*父需要引入子组件然后声明子组件
	import 子组件对象  from './xxx.vue'----引入子组件
	.......在javascript中.....
	{
		components:{
			组件名称:子组件对象
		}
	}

(2)全局组件的使用
	*在main.js中引入一次;----import 组件对象  from './xxx.vue';
	*vue.component('组件名','组件对象');
	这样所有的组件都可以通过组件名直接使用全局组件。

(3)父组件传值给子组件
	 假设父组件中用了一个子组件,如下:
	 	<header-vue></header-vue>
	 那么父组件如何传值给子组件:
	 	*<header-vue textone="要传的值"></header-vue>
	 	*子组件需要接受:在....javascript....中
	 	export default{
	 		data(){

	 		},
	 		//接受父组件的参数
	 		props:['textone']	
	 	}
(4)看文档对象分类
	*全局的代表Vue.的
	*实例的代表this.或者new Vue().
	*选项代表new Vue()的参数或者export default里边的属性
(5)子向父组件通信(vuebus)(扩展)
 	*通过new Vue()这样的一个对象,来$on('事件名称',fn(prop1,pro2))
 	*另一个组件引入同一个vuebus,来$emit('事件名称',fn(prop1,pro2))

(6)过滤器
	*过滤器的使用:content|过滤器
	*过滤器分组件内过滤器和全局过滤器
	*组件内过滤器:就是options中的filters的属性(一个对象)
		例如:
			<div>
				<input type="text" v-model="contxt"/>
				{{contxt|myFilter}}
			</div>
			<script>
				export default{
					data(){
						return{
							contxt:''
						}
					}

					filters:{
						myFilter:function(value){
							return contxt+"123";
						}
					}
				}
			</script>
		*全局过滤器:Vue.filter(过滤器名,fn);----在main.js中创建。

(7)获取DOM原始
	

(8)mint-ui
	*mint-ui是饿了么弄得移动端ui
	*element-ui是饿了么弄得pc端ui

(9)vue-router
	*前段路由:核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
	*以后看到vue开头,就知道必须Vue.use
	*vue的核心插件:
		- vue-router  路由
		- vuex 管理全局共享数据
	*使用方式
		-1:下载`npm i vue-router -S`
		-2:在main.js中引入
		-3:安装插件 `Vue.use(插件)`
		-4:创建路由对象并配置路由规则
		-5:将其路由对象传递给Vue的实例,option中

		如下:
			//引入
			import VueRouter from 'vue-router'
			//安装插件
			Vue.use(VueRouter);
			//创建路由对象并配置路由规则
			let router=new VueRouter({
				routes:[
					{name:'myhome',path:'/home',component:Home}
				]
			})
			//给vue实例传值
			new Vue({
				el:"#app",
				router:router
			})
(10)router-link
	<router-link :to="{name:'myhome'}">进入我的首页</router-link>

 

下载方式:https://pan.quark.cn/s/c9b9b647468b ### 初级JSP程序设计教程核心内容解析#### 一、JSP基础概述JSP(JavaServer Pages)是由Sun Microsystems公司创建的一种动态网页技术规范,主要应用于构建动态网站及Web应用。JSP技术使得开发者能够将动态数据与静态HTML文档整合,从而实现网页内容的灵活性和可变性。##### JSP的显著特性:1. **动态与静态内容的分离**:JSP技术支持将动态数据(例如数据库查询结果、实时时间等)嵌入到静态HTML文档中。这种设计方法增强了网页的适应性和可维护性。2. **易用性**:开发者可以利用常规的HTML编辑工具来编写静态部分,并通过简化的标签技术将动态内容集成到页面中。3. **跨平台兼容性**:基于Java平台的JSP具有优良的跨操作系统运行能力,能够在多种不同的系统环境中稳定工作。4. **强大的后台支持**:JSP能够通过JavaBean组件访问后端数据库及其他资源,以实现复杂的数据处理逻辑。5. **执行效率高**:JSP页面在初次被请求时会被转换为Servlet,随后的请求可以直接执行编译后的Servlet代码,从而提升了服务响应的效率。#### 二、JSP指令的运用JSP指令用于设定整个JSP页面的行为规范。这些指令通常放置在页面的顶部,向JSP容器提供处理页面的相关指导信息。##### 主要的指令类型:1. **Page指令**: - **语法结构**:`<%@ page attribute="value" %>` - **功能**:定义整个JSP页面的运行特性,如设定页面编码格式、错误处理机制等。 - **实例**: ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bzuld

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值