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);})
}
)
