VUE的使用，学会这些就足够了！！！（一）

最新推荐文章于 2022-11-21 10:18:05 发布
最新推荐文章于 2022-11-21 10:18:05 发布
阅读量144 收藏
点赞数
分类专栏： vue入门学习记录
原文链接：https://blog.csdn.net/wenquan19960602/article/details/106174485?utm_medium=distribute.pc_feed.none-task-blog-alirecmd-7.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-alirecmd-7.nonecase&request_id=
版权

VUE的使用，学会这些就足够了！！！（一）

vue
本文链接： https://blog.csdn.net/wenquan19960602/article/details/106174485

文章目录

Vue.js 是什么?

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一、vue实例

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

      
      

      
      
  • 1

1、在文件中引入vue.js，下面两种方式选择其中一种

<script type="text/javascript" src="../vue.js"></script>

<!– 开发环境版本，包含了有帮助的命令行警告 –>
<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

  • 1
  • 2
  • 3
  • 4
  • 5

2、建立简单的vue实例对象

<div id="app">
	//调用vue中的数据
	<h1>{{message}}</h1>
	//下面的两种书写方式结果相同
	<button v-on:click="click()">click</button>
	<button @click="click()">click01</button>
</div>

<script>
var ve= new Vue({
el:’#app’,
data:{
message:‘hello’,
},
methods:{
click:function(){
alert(“你好，世界”);
}
}
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

二、vue常用指令

1、v-on：绑定事件监听器，事件的类型由参数决定
例如：v-on：事件名称
或者@事件名称
在这里插入图片描述
2、v-if/v-else-if/v-else判断指令：根据表达式的值，进行渲染
例如：

<div id="app">
			//isshow为true时，标签内的内容显示到页面
			<h1 v-if="isshow">{{isshow}}ok</h1>
</div>
<script>
			new Vue({
				el:'#app',
				data:{
					message:'hello',
					isshow:true,
				},
				methods:{
					click:function(){
						alert("你好，世界");
					}
				}
			});
		</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3、v-model：数据绑定指令（一般为表单输入绑定）

//v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定
<input type="text" v-model="message" />{{message}}
  • 1
  • 2
  • 3

文本框里的内容与外面的内容绑定
在这里插入图片描述
4、v-for：循环（可以多层嵌套显示和java中的for循环原理一致）
v-for格式：<li v-for=“item in items”>{{item}} </ li>
其中：item是被迭代数组元素的别名
items是源数据数组
使用 item in items 的特殊格式语法

<div id="demo">
	<ul>
		<li v-for="item in items">{{item}}</li>
		<li v-for="item in arr1">{{item}}</li>
		<li v-for="item in arr1.a">{{item}}</li>
	</ul>
</div>
<script>
			new Vue({
				el:'#demo',
				data:{
					items:[23,23,344,45],
					arr1:{"a":[1,2,3],"b":[2,2,3]},
				},
				methods:{
				}
			});
		</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

运行结果如图
在这里插入图片描述
5、v-bind：动态绑定属性
使用格式
v-bind:属性名=“data数据对象中的值”
简写
：属性名=“data数据对象中的值”

<styple>
.child{
	width: 50px;
	height: 50px;
	background-color: gray;
	color: black;
	}
</style>
<div id="app">
	<img v-bind:src="img" /> //动态绑定了imges属性，img改变了图片，那么img标签也会改变
	<div :class="{'child':isshow}">div6</div>//div区域的显示根据isshow的值来判定

</div>
<script>
new Vue({
el:’#app’,
data:{
isshow:true,
img:‘111.png’,
}
})
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

三、生命周期函数|钩子函数

1、生命周期函数
beforecreated:加一些loading事件
created：结束loading事件，还做一些初始化，实现函数自执行
mounted：发起后端请求，取回数据
接受页面之间传递的参数
子组件向父组件传递参数
2、下面用一个生命周期函数演示的实例

<div id="demo">
			<h1>{{message}}</h1>
			<button @click="changemessage()">changemessage</button>
</div>

<script>
var ve =new Vue({
el:’#demo’,
data:{
message:‘vue生命周期’,

				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeCreate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforecreate-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				created<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------created-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeMount<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforemount-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				mounted<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------mounted-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeUpdate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforeupdate-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				updated<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------updated-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeDestroy<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------destotry-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				destroyed<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------destroyed-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				methods<span class="token punctuation">:</span><span class="token punctuation">{</span>
					changemessage<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token operator">=</span><span class="token string">'666'</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

//销毁是在实例外面调用的
ve.$destroy()

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

实际的效果
在这里插入图片描述
点击changemessage按钮
在这里插入图片描述

四、vue组件

借用官网的一张图。
在这里插入图片描述
1、为什么使用组件？
使用组件一方面可以不用去直接修改标签，另一方面也会优化页面显示
注意:组件在实例前面书写
2、全局组件

<div id="box">
	{{message}}
	<all></all>
</div>
<script>
	Vue.component("all",{
				template:'<div><h1>{{name}}</h1></div>',
				// template:'#box1',
				data:function(){
					return{
						name:'李四'
					}
				}
			})
	var ve = new Vue({
		el:"#box",
			data:{
				message:'hello'
			}
		});
</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

3、局部组件:局部组件放在实例中

父子组件可以嵌套使用
父子组件间作用域相互独立
子组件只能在父组件的模板中进行调用

子组件是父组件细化拆分的过程
父组件向子组件传值通过props进行

下面的示例中包含了父组件向子组件传值的功能

<div id="box">
	<test>
	</test>
</div>
<template id='box1'>
	<div>
	<input type="text" v-model="message" />
	<box1 num="1" txt='yi' :msg="message"></box1>
	<box1 num="2" txt='er' :msg="message"></box1>
	</div>
</template>

<script>
var ve = new Vue({
el:’#box’,
data:{
},
//父級
components:{
‘test’:{
template:"#box1",
data:function(){
return{
message:‘aaa’
}
},
//子级
components:{
‘box1’:{
template:"#box2",
//子级想将父级的一个值，作为自己的一个局部变量
data:function(){
return{
mymsg:this.msg
}
},
//计算属性
computed:{
mymsg1:function(){
return this.msg+’!’
}
},
props:[
‘num’,‘txt’,‘msg’
]
}
}
}
}
})
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

在这里插入图片描述
4、自定义监听事件（子组件向父组件传值）
自定义监听事件： $emit()
传值的过程：
子组件设定了一个点击事件，点击事件中夹带着传递的值—》通过getval方法将拿到的值赋值给父组件的message—》父组件显示出message值

<div id="box">
			<parent></parent>
</div>
	<template id='par'>
		<div>
			<h1> 父组件:{{parentmsg}}||{{message}}</h1>
			<child @change="getval"></child>
		</div>
	</template>
	<template id='child'>
		<div @click="fn()">
			<h2>子组件:{{childmsg}}</h2>
		</div>
	</template>
<script>
	var vm = new Vue({
		el:"#box",
		components:{
			"parent":{
				template:'#par',
				data:function(){
					return {
						parentmsg:"父组件的信息",
						message:''
					}
				},
				methods:{
					getval:function(val){
						this.message = val
						console.log(val)
					}
				},
				components:{
					'child':{
						template:'#child',
						data:function(){
							return{
								childmsg:'子组件的信息'
							}
						},
						methods:{
							fn:function(){
								this.$emit('change',this.childmsg)
							}
						}
					}
				}
			}
		}
	})
</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

5、SLOT插槽(vue2.6.0之前版本使用的slot)
目的:其目的在于让组件的可扩展性更强,用来混合父组件的内容与子组件自己的模板.
分为匿名slot和具名slot

//匿名slot
<div id="box">
			<my-component>

		<span class="token operator">&lt;</span><span class="token operator">/</span>my<span class="token operator">-</span>component<span class="token operator">&gt;</span>

</div>
<template id=‘mycomponent’>
<div>
<p> 头部</p>
<slot> 如果没有分发，则默认显示</slot>
<p> 底部</p>
</div>
</template>
<script>
Vue.component(‘my-component’,{
template:’#mycomponent’

	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-computer'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
		template<span class="token punctuation">:</span><span class="token string">'#mycomputer'</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span>  <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		el<span class="token punctuation">:</span><span class="token string">'#box'</span><span class="token punctuation">,</span>
		
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

在这里插入图片描述

//具名slot
<div id="box">
	<my-computer>
		<div slot='CPU'>n9000</div>
		<div slot='GPU'>OOOO</div>
	</my-computer>
</div>
<template id='mycomputer'>
	<div>
		<slot name="GPU">GPU</slot>
		<slot name="CPU">CPU</slot>
		<slot name="DIST">DIST</slot>
	</div>
</template>
<script>
		Vue.component('my-computer',{
			template:'#mycomputer'
		})
		var vm = new  Vue({
			el:'#box',
		})
	</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

五、vue的路由设置

要引入vue-router.js库文件
作用：
根据url锚点的位置，在容器中加载不同的模块，本质是作为页面导航
完成SPA(Singal Page Application)的开发
一种特殊的web应用，它将所有活动局限于一个web页面中，仅web页面初始化时加载项应的html、JavaScript、css
一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示或隐藏），从而实现ui与用户的交互
下面是一个简单地单页面示例

<div id="app">
	<ul>
		<li >
			<router-link to="/home">首页</router-link>
		</li>
		<li >
			<router-link to="/news">新闻</router-link>
		</li>
		<li >
			<router-link to="/hot">热点</router-link>
		</li>
	</ul>
	<div class="show">
		<router-view></router-view>
	</div>
	<button @click="back()">go back</button>
</div>
<script>
		const Home={template:'<h2>首页</h2>'}
		const News={template:'<h2>新闻</h2>'}
		const Hot={template:'<h2>热点</h2>'}
		//Vue.extend(template:'<h1>首页</h1>')
		//配置路径
		const routes=[
			{
				path:'/home',component:Home
			},
			{
				path:'/news',component:News
			},
			{
				path:'/hot',component:Hot
			}
		]

	<span class="token comment">//创建router</span>
	<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		routes
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	
	<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		el<span class="token punctuation">:</span><span class="token string">'#app'</span><span class="token punctuation">,</span>
		router<span class="token punctuation">,</span>
		beforeCreate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err<span class="token operator">=&gt;</span><span class="token punctuation">{</span>err<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		methods<span class="token punctuation">:</span><span class="token punctuation">{</span>
			<span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

二级路由的配置是在一级路由的基础上，在某一个path下再分离出几个低级的path
示例

{
	//新闻模块下有将新闻进行分类：科技、军事等；其他步骤不影响
	path:'/news',component:News,
	children:[
		/* 二级路由，path分配，前面没有“ / ” */
		{
			path:'js',
			component:{
				template:'<p>军事类新闻</p>'
			}
		},
		{
			path:'kj',
			component:{
				template:'<p>科技类新闻</p>'
			}
		},
		{
			/* 默认页面可以直接用一个组件，也可以重定向 */
			path:'/',
			redirect:'js'
			// component:{
			// 	template:'<p>默认值</p>'
			// }
		}
	]
},

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

路由的进一步详解

六、axios的使用

使用了常用的两种axios的方法
在这里插入图片描述
axios的get方法使用

<div id="app">
<h1>{{msg}}</h1>
	<button @click='getMsg'>Click</button>
</div>

<script>
/* 创建Vue实例 /
var vm=new Vue({
el:’#app’,
data:{
msg:’’
},
methods:{
getMsg:function(){
/ 方式一
axios.get(’./text.txt?name=zhy&age=20’).then(res=>{
console.log(res.data)
this.msg=res.data
}).catch(err=>{
console.log(err)
}) */
//方式二
axios.get(’./text.txt’,{params:{name:‘zhy’,age:20}}).then(res=>{
this.msg=res.data
}).catch(err=>{
console.log(err)
})
}

	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

在这里插入图片描述
点击事件触发后，就会将text文件中的数据拿到前端显示
post和get方法使用一样

总结

有些点没有写到，之后会继续补充。

                                </div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>
</article>
gansilian
关注
专栏目录
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6783
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
Vue基础架构
qq_43623447的博客
04-23 1万+
基础回顾 假设作为一个机智后端开发的你已经了解了如何使用 Maven 去创建一个项目，并且用 JSP 写过前后端不分离的业务系统。 在讲解枯燥的技术细节之前，我们不妨先回顾一下基础知识放松一下 首先了解一下 Web 网页的加载原理。我们都知道 Web 网站最初是只有 HTML 和 CSS 的，HTML 是一个 Document，由 Body 和 Header 组成。 Document 的层次结构又...
VUE 的使用，学会这些就足够了！| 原力计划
CSDN资讯
06-10 2096
作者 |敲出亿行bug责编 | 夕颜出品 | CSDN博客Vue.js 是什么?vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。...
VUE 指令集合!!!
陈浩然哦 的博客
03-21 2158
VUE VUE 指令集合 v-model：双向绑定 <div id="app"> {{[name,age]}} {{age > 17 ? '成年' : '未成年'}} <input type="text" v-model='name'> * v-model 双向绑定(根据 input 中所输入的 ...
Vue全套笔记（二）动态组件 插槽 路由
qq_40460454的博客
08-13 2209
什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。自定义指令的分类vue 中的自定义指令分为两类，分别是：⚫ 私有自定义指令⚫ 全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：使用自定义指令在使用自定义指令时，需要加上 v- 前缀。示例代码如下：为自定义指令动态绑定参数值。...
v-model是什么?怎么使用？
热门推荐
qq_25503949的博客
07-11 2万+
v-model是什么?怎么使用？ v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作： v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 v-model很好地体现了vue双向绑定的理念。 单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。有单向绑定，就有双向绑定。 如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。 什么情况下用户可以更新View呢
v-model用法及原理详解
qq_61233877的博客
04-11 7257
v-model 的详细用法及原理
5分钟学会Vue动画效果(小结)
10-18
Vue.js是一种流行的前端JavaScript框架，用于构建用户界面和单页应用。Vue的核心库只关注视图层，但是也能够轻松地与其他库或现有项目集成。在Vue中实现动画效果是一个提升用户交互体验的重要方面。本文将从以下几个...
vue的一个是在项目视频网盘分享
09-21
Vue.js的设计目标之一是易于上手，同时也具有足够的能力来处理复杂的单页应用。因此，通过实战项目的学习，可以更好地掌握Vue.js的核心概念和技术要点。 ### 实战项目的意义 实战项目对于学习任何一种技术都是非常...
经典vue实战教程
06-21
根据提供的文件信息，我们可以从标题、描述以及部分可见内容中推断出这是一份关于Vue.js实战技巧的教程。下面将基于这些有限的信息展开详细的知识点解析。 ### 经典Vue实战教程 #### 一、Vue.js简介 - **定义**：...
v-model的使用
qq_53841687的博客
08-04 2684
原理：遍历数组的值，动态的监听绑定数组的值放置空数组里（v-model选定的值，每点一次会有一个value值，把value响应的值给v-model绑定的值—响应式原理可以解释）女。男。属性是互斥的，如果使用v-model，可以不使用。...
element 分页列表组件2.0（附上组件代码）2020-08-17
weixin_44668908的博客
01-20 1408
##PageTable 组件使用添加说明 父组件操作 <PageTable ref="pageTable" :url="url" :queryParams="tableQuery" :tableColumns="tableColumns" v-on:getTableData="getSonData" :multipleSelection.sync="selectedRows" :showCheckBox="true" :showRowIndex="true"> </PageTable&gt
vue-cli-+-element-ui-树形表格（多级表格折腾小计）
郝峰vip的博客
12-11 2806
前沿 最近在项目开发中需要做一个多级表格，树形表格的功能，看看element-ui上没有，自己开是折腾，话不多说，上思路和代码。 效果图： 可点击收缩，展开。 一，首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js 先看看index.vue，原理就是在element-ui的基础上做了进一步改造。 //利用element-ui的 <template sl...
工作记录 -- el-table自定义表头与表头数据改变不重新不渲染问题(表头嵌套popover弹出框和cascader级联选择器)
来啦(#^.^#)
06-21 1024
背景 对表格的某一列增加筛选操作；el-table自带api貌似有点麻烦而且好像不太适合从服务端拿数据进行处理（我太菜不知道怎么操作~） 解决方案 – 利用插槽 注意的问题： 没有加key的时候数据是没有渲染上 表头不渲染问题： 配合着v-if和对该列增加key值来使用 代码： <el-table> ... <el-table-column show-overflow-tooltip min-width="120" :key="Ma
element-ui 表格 修改后, 表格里面的数据不实时更新问题
github_37759996的博客
05-14 3801
element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7） 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功 提示：最下面有代码demo 页面初始化： 目标效果 做法1： 给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false； 结果1： 未成
v-for 中el-table遍历自定义的列，嵌套显示
u012746918的博客
05-26 2014
colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'], totalNumber: 100, data: [{ list: [ { name: '澳中线-悉尼-仓库1...
elementUI表格套表格，子表的实现，张三不用elementui已经不会写vue了
xingyu_qie的专栏
09-25 4178
其实要实现一个需求的方法还是很多的，不一定非要围绕着别人写好的组件，我们来使用，这样除了完成需求，却很难让自己得到提升。写专利不也是一个道理嘛，大家平时都这样做，久而久之都熟悉了，麻木了，却难以发现痛点。而善于发现痛点的那个人，就会有更多的专利思路，实现更优解。有更多的解题思路的小伙伴记得留言哦！！！
el-table列字段遍历添加插槽
最新发布
ZWP_990527的博客
11-21 4460
el-table字段遍历时插槽的使用
element Table表格 加了show-overflow-tooltip 之后没有显示省略号
meiwan123的博客
06-17 5999
一般来说 <el-table-column v-for="(item, index) in logTableHeader" :key="index" :label="item.label" :prop="item.prop" align="left" show-overflow-tooltip :cel.
Vue中使用JSX语法实战与比较
而使用JSX，我们可以将这些逻辑合并成一个标签，代码更加集中： ```jsx render() { const hText = `${this.id}>${this.$slots.default[0].text}${this.id}>` return <div domPropsInnerHTML={hText}></div> } ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值