當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue】小案例

發布時間：2023/12/3 vue 42 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue】小案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue掛載的方式
Vue創建組件的方式
Vue自調用函數
Vue
Vue
Vue

Vue動畫案例
Vue計數器
Vue路由創建
Vue路由動畫展示
Vue李白評論
Vue

v-mode綁定在input中，關聯data相關的數據
相當于input中的value，但是他能關聯多個

主要用途：
數據的雙向綁定（多向）

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回車鍵調用函數

自調用函數

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="/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> <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);}) }

總結

以上是生活随笔為你收集整理的【Vue】小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

案例
Vue

上一篇：胡厚崑：全球5G用户接近15亿要最大化
下一篇： Vue动画效果