【Vue】小案例

最新推荐文章于 2024-10-06 12:22:30 发布

我yi癫狂

最新推荐文章于 2024-10-06 12:22:30 发布

阅读量400

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43560272/article/details/103034763

版权

Vue 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

Vue挂载的方式
 Vue创建组件的方式
 Vue自调用函数
 Vue
Vue
Vue

Vue动画案例
 Vue计数器
 Vue路由创建
 Vue路由动画展示
 Vue李白评论
 Vue

v-mode绑定在input中，关联data相关的数据
相当于input中的value，但是他能关联多个

<div id="app">
		<input v-model="message1" >+
		<input v-model="message2" >=
		<input v-model="message3" >
		
		<button id="a1" @click=aaa>点击相加</button>
	</div>

主要用途：
数据的双向绑定（多向）

v-for
用于大部分数据重复，仅改变少部分数据
如：列表
事例：

<div class="a" v-for="item in items">我喜欢吃{{item.message}}<br></div>

new Vue({
	el:"#app",
	data:{
		items:[
		{message:"馒头"},
		{message:"橘子"},
		{message:"香蕉"},
		{message:"苹果"},
		{message:"梨子"}
		
		]

	}
})

1、new Vue({
	el:"#app"
})
2、new Vue({}).$mount('#app');

创建组件的方式

公共组件

外部组件({}代表Vue.extend({}))


Vue.component('mycom1', {

template: '<div><input><a src="#a">我爱你</a></div>'
})

可以将标签放在body中，命名id

Vue.component('mycom1',{template: '#temp1'})

私有化组件

new Vue({

        el: "#app",
        components:{
            'mycom1': {template: '<div><input><a src="#a">我爱你</a></div>'}
        }
    })

Vue回车键调用函数

<input type="text" value="button" @keyup.enter=kkk>

自调用函数

 mounted(){
	this.warning();
  }


v-if案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>

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

</style>
</head>


</script>
	
<body>
	<div id="app">
		<input type="button" value="Tag" @click="flag=!flag">
		
		<h3 v-if="flag">给我一片遐想</h3>
		
	</div>
</body>
<script>
	var vm = new Vue({
	el:"#app",
	data:{
		flag:false
	},
	methods:{}
	});
</script>

</html>

vue动画案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>

<script src="vue.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to {
	opacity: 0;
}

.v-enter-active,
.v-leave-action {
	transition:all 5s ease;
}


</style>
</head>


</script>
	
<body>
	<div id="app">
		<input type="button" value="Tag" @click="flag=!flag">
		<transition>
		<h3 v-if="flag">给我一片天空</h3>
		</transition>
	</div>
</body>
<script>
	var vm = new Vue({
	el:"#app",
	data:{
		flag:false
	},
	methods:{}
	});
</script>

</html>

计数器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>

<script src="vue.js"></script>
<style type="text/css">
#button1{
	border-radius: 20px;
	width:100px;
	height:80px;
	font-size: 60px;
}
span{
	width:100px;
	height:80px;
	border:1px solid black;
	font-size: 60px;
	background: skyblue;
}

</style>
</head>


</script>
	
<body>
	<div id="app">
		
	<input type="button" id="button1" @click="add" value="+">
	<span >{{num}}</span>
	<input type="button" id="button1" value="-" @click="sub">
	{{message}}	
	</div>
</body>
<script>
	// var com1 = Vue.extend({

	// 	template:'<div><input><a src="#a">我爱你</a></div>'
	// })

	// Vue.component('myCom1',com1)


	var vm = new Vue({
	el:"#app",
	data:{
		
		num:1,
		message:0
	},
	methods:{
		add:function(){
			this.num++;
		},
		sub:function(){
			this.num--;
		}
	}
	});
</script>

</html>

Vue路由创建

<html>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		
		
<body>
		<div id="app">
				<h1>Hello App!</h1>
				<p>
				  <!-- 使用 router-link 组件来导航. -->
				  <!-- 通过传入 `to` 属性指定链接. -->
				  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
				  <router-link to="/foo">Go to Foo</router-link>
				  <router-link to="/bar122">Go to Bar</router-link>
				</p>
				<!-- 路由出口 -->
				<!-- 路由匹配到的组件将渲染在这里 -->
				<router-view></router-view>
			  </div>
			  <template id="temp1">
				  <h1>i love you</h1>
			  </template>

</body>


<script>







var router = new VueRouter({
  routes:[
  { path: '/foo', component:{ template: '#temp1' } },
  { path: '/bar122', component: { template: '<div>bar</div>' } }
] // (缩写) 相当于 routes: routes
})


new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
	
</script>

</html>

路由动画转向测试

<html>
<head>
<style>
#love,#hate{
	display: block; 
    background: black; 
    border-radius: 50%; 
    height: 300px; 
    width: 300px; 
    margin: 0; 
    background: radial-gradient(circle at 100px 100px, #5cabff, #000); 
}



.router-link-active {
	color: red;
	font-weight: 800;
	font-style:italic;
	font-size:100px;
	
}


.v-enter,
.v-leave-to{
	opacity:0;
	
	transform: rotateY(120deg);
	
	
}

.v-enter-active,
.v-leave-active {
	transition: all 0.4s ease;
}




</style>
</head>


		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		
		
<body>
	<div id="app">
	<router-link to="aaa">转向测试一</router-link>
	<router-link to="bbb">转向测试二</router-link>
	<transition mode="out-in">
	<router-view>
	</router-view>
	</transition>
	</div>
	
	
		
		
		

<template id="temp1">
<div id="love">
</div>


</template>


<template id="temp2">
<div id="hate">
12123
</div>
</template>


</body>


<script>

var t1={template:"#temp1"}

var router = new VueRouter({
	routes:[
	{path:"/",redirect:'/aaa'},
	{path:"/aaa",component:{template:"#temp1"}},
	{path:"/bbb",component:{template:"#temp2"}}
	]
})


new Vue({
	el:"#app",
	router
})
	
</script>

</html>

李白添加评论

<!-- <html> -->
<html>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<head>
	<style>


	</style>
</head>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<body>
	<div id="app">

		<mycom1></mycom1>
		<ul class="list-group">
			<li class="list-group-item" v-for="item in list" :key="item.id">
				<span class="badge">评论人：{{item.user}}</span>
				{{item.content}}
		</ul>


	</div>







	<template id="temp1">
		<div>
			<div class="form-group">
				<label>评论人：</label>
				<input type="text" class="form-control" v-model="user">
			</div>

			<div class="form-group">
				<label>评论内容：</label>
				<textarea class="form-control" v-model="content"></textarea>
			</div>

			<div class="form-group">
				<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
			</div>

		</div>

	</template>


</body>


<script>
	var commentBox = {
		data() {
			return {
				user: "",
				content: ""
			}
		},
		template:'#temp1',
		methods:{
			postComment(){
				
			}
		}
	}

	new Vue({
		el: "#app",
		data: {
			list: [
				{ id: Date.now(), user: '杜甫', content: '千金丧尽还复来' },
				{ id: Date.now(), user: '江南', content: '一览众山小' },
				{ id: Date.now(), user: '李贺', content: '柳暗花明又一村' }
			]
		},
		methods: {},
		components: {
			'mycom1': commentBox

		}
	})

</script>

</html>

axios

Get


axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function(response){
		// console.log(response.data.jokes[1])
		document.getElementById('div1').value=response.data.jokes[1];
	},function(err){
		console.log(err);
		
	})

Post

document.getElementById('button2').onclick = function(){
	axios.post('https://autumnfish.cn/api/user/reg',
	{username:'kkk12345'}).then(function(response){
		console.log(response);
	})
}