注册    登录
今天看啥  ›  专栏  ›  cgblpx

cgb2108-day13

cgblpx  · CSDN  ·  · 2020-01-01 00:00

文章目录

一,Vue练习

–1,vue解析数据 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue解析数据</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{str}}</h1>
			<h1>{{person.name}}   {{person.age}}  {{person.coding()}}</h1>
			<h1>{{users[1].address}}  {{users[0].age}}</h1>
			<h1>{{show()}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",//id选择器
				data(){
					return{
						str:'vue',
						person:{ //对象
							name:'jack',
							age:20,
							coding(){ //简写的函数
								alert(this.name+this.age)
							}
						},
						users:[  //数组
							{
								name:'tony',
								age:10,
								address:'西安'
							},
							{
								name:'jerry',
								age:20,
								address:'广州'
							}
						]
					}
				}  ,
				methods:{
					show(){
						alert('show()调用成功!');
					}
				}
			})
		</script>
	</body>
</html>
  • 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
  • 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

–2,Vue指令 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="fun()">单击按钮</button>
			<!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
			<button v-on:dblclick="fun()">双击按钮</button>
			<!-- 练习:用vue做一个点赞的按钮 
				QQ:2250432165
			-->
			<button v-on:click="count++">点赞{{count}}</button>
			
			<!-- 7.v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
			<a href="https://www.baidu.com/">点我,百度一下</a>
			<!-- 问题:把url当字符串了,而不是当变量用的 -->
			<a href="{{url}}">点我,百度一下</a>
			<a v-bind:href="url" target="_blank">点我,百度一下</a>
		</div>
		<script>
			new Vue({
				el:"#app", //挂载点
				data:{ //准备数据
					count:0, //点赞数
					url:'https://www.baidu.com'
				},
				methods:{  //创建函数
					fun(){
						console.log(1);
					}
				}
			})
		</script>
	</body>
</html>
  • 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
  • 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

二,Vue组件

–1,概述

扩展了HTML的元素,好处是: 提高了组件代码的复用性
使用步骤: 1,创建组件 2,使用组件(当做HTML标签)
1,分类: 全局组件 和 局部组件 : 作用域
全局组件语法: Vue.component(1,2)–1是标签名/组件名2是配置选项
局部组件语法:给Vue对象添加components属性

–2,测试 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue组件</title>
		<!-- vue组件:扩展了HTML元素(提高了组件代码的复用性),
		    使用步骤:1,定义组件 2,使用组件 
			1,定义组件分为:全局组件和局部组件
			2,两种组件的区别??
 				全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue()
				局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用
		-->
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 2,使用全局组件(本质上就是一个HTML元素) -->
			<car></car>
			<!-- 4,使用局部组件(本质上就是一个HTML元素) -->
			<person></person>
		</div>
		
		<div id="d">
			id=d位置,使用的全局组件:<car></car> ,使用成功!
			id=d位置,使用的局部组件:<person></person> ,使用失败!
		</div>
		<script>
			//1,创建全局组件
			//给vue添加组件(组件名称,组件的模板)
			Vue.component('car',{
				// 通过template,描述car组件的功能
				template:'<h3>hello Component</h3>'
			})
			//创建Vue对象,拥有了car组件
			new Vue({
				el:"#app",
				components:{//3,创建局部组件
					// 组件名称,组件模板
					'person': {
						template:'<h1>局部组件</h1>'
					}
				}
			})
			new Vue({
				el:"#d"
			})
		</script>
	</body>
</html>
  • 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
  • 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

三,Axios技术

–1,概述

是Vue提供的Ajax技术,和JS实现的Ajax不同,Vue提供了更简单语法,封装了js代码
Ajax技术是实现了网页的局部刷新,异步访问的功能.好处是: 避免了刷新整个网页,而只刷新局部
1,语法: 

axios.get(访问资源的url).then( a => { 处理a的方式,a代表了服务器给浏览器返回来的数据 }  )
  • 1
  • 1

2,使用步骤: 引入vue.js + 引入axios.js

–2,测试

项目结构

在这里插入图片描述

网页代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习 vue的axios</title>
		<script src="vue/vue.js"></script>
		<script src="vue/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 需求:点击按钮,去1.json里获取city的数据并展示 -->
			<button @click="show()">点我,展示数据</button>
			<select>
				<option v-for="i in city">{{i}}</option>
			</select>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					city:''
				},
				methods:{
					show(){
						//去1.json里获取city的数据
						axios.get('1.json').then(
							a => {
								this.city=a.data.city;
							}
						)
					}
				}
			})
		</script>
	</body>
</html>
  • 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
  • 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

1.json文件代码 

{
	"name":"jack",
	"city":["北京","上海","深圳"]
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

总结

在这里插入图片描述

四,Vue路由

–1,概述

接受浏览器的请求,根据不同的请求的方式,找到匹配的组件
工具类:
1,VueRouter表示Vue的路由对象.
2,routes属性是VueRouter的核心属性,用来把不同的请求匹配的不同的组件
使用步骤:
1, 引入vue.js 2, 引入vue-router.js

–2,测试 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue路由</title>
		<!-- 1.引入js文件 -->
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 3.4.使用路由 ,router-link被HTML翻译成了a标签,to翻译成href属性-->
			<router-link to="/home">1</router-link>
			<router-link to="/help">2</router-link>
			<!-- 3.5.展示匹配成功的组件,路由的出口 -->
			<router-view></router-view>
		</div>
		<!-- 3.准备路由功能 -->
		<script>
			//3.3. 创建组件
			let home = {
				template:"<h1>我是主页~~</h1>"
			}
			let help = {
				template:"<h1>我是帮助页~~</h1>"
			}
			//3.2.创建路由对象VueRouter,通过routes属性指定请求和组件的匹配关系
			let router = new VueRouter({
				routes:[
					//path请求路径,component匹配到的组件
					{path:'/home',component:home},
					{path:'/help',component:help}
				]
			})			
			//3.1.通过router属性指定路由功能
			new Vue({
				el:"#app",
				//router:router
				router //key和value一样的话就可以直接简写
			})
		</script>
	</body>
</html>
  • 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
  • 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

作业

把Vue的组件 / axios / 路由 的代码,最少,各敲三遍




原文地址：访问原文地址
快照地址： 访问文章快照
推荐文章
康石石  ·  毕业四年，我终于攒够了读格艺的学费
9 小时前
室内设计精品PPT模版  ·  【独家首发】大师设计一海派风格豪宅样板间深化设计方案PPT模板（可编辑）
昨天
室内设计精品PPT模版  ·  【独家首发】大师设计一现代商务风办公大楼改造设计方案汇报文本PPT模板（可编辑）
2 天前
康石石  ·  香港政府掏钱支持大家学AI，冲！~
4 天前
康石石  ·  谁说Core 77不好拿？我觉得还行...
4 天前
百迈客生物  ·  【生日快乐 前程似锦】百迈客四月生日party
1 年前
毛有话说  ·  金晨打了所有CP党的脸！“内地萧亚轩”又换小男友，这次是谁？
3 年前
Odaily  ·  星球日报2020首场线下活动回归，揭秘区块链出圈「新区势」
4 年前
广州本地宝  ·  最新消息！广州外地车限行恢复时间确定了！
4 年前
心理测试  ·  你在哪方面最有心机？测完就知道了
7 年前
关于   移动版   ·   Py中国   ·   RSS之家   ·   codingpro   ·   Code   ·   link之家   ·   卧龙AI搜索   ·   藏经阁   ·   小百科
今天看啥 - 微信公众号rss订阅, 微信rss, 稳定的RSS源
© 2024 ~ 沪ICP备11025650号