【Vue】小案例
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: ''
})
可以将标签放在body中，命名id
Vue.component('mycom1',{template: '#temp1'})
私有化组件
new Vue({
el: "#app",
components:{
'mycom1': {template: ''}
}
})
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:''
// })
// 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: 'bar' } }
] // (缩写) 相当于 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);
})
}