做宣传网站买什么云服务器,企业网站优化17,商城网站建设是 什么,北京英文网站建设Vue挂载的方式 Vue创建组件的方式 Vue自调用函数 Vue Vue Vue Vue动画案例 Vue计数器 Vue路由创建 Vue路由动画展示 Vue李白评论 Vue
v-mode绑定在input中#xff0c;关联data相关的数据 相当于input中的value#xff0c;但是他能关联多个
div idapp关联data相关的数据 相当于input中的value但是他能关联多个
div idappinput v-modelmessage1 input v-modelmessage2 input v-modelmessage3 button ida1 clickaaa点击相加/button/div主要用途 数据的双向绑定多向 v-for 用于大部分数据重复仅改变少部分数据 如列表 事例
div classa v-foritem in items我喜欢吃{{item.message}}br/divnew 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: divinputa src#a我爱你/a/div
})可以将标签放在body中命名id
Vue.component(mycom1,{template: #temp1})私有化组件
new Vue({el: #app,components:{mycom1: {template: divinputa src#a我爱你/a/div}}})
Vue回车键调用函数
input typetext valuebutton keyup.enterkkk自调用函数 mounted(){this.warning();}v-if案例
!DOCTYPE html
html
head
meta charsetUTF-8title/titlescript srcvue.js/script
style typetext/css/style
/head/scriptbodydiv idappinput typebutton valueTag clickflag!flagh3 v-ifflag给我一片遐想/h3/div
/body
scriptvar vm new Vue({el:#app,data:{flag:false},methods:{}});
/script/html
vue动画案例
!DOCTYPE html
html
head
meta charsetUTF-8title/titlescript srcvue.js/script
style typetext/css
.v-enter,
.v-leave-to {opacity: 0;
}.v-enter-active,
.v-leave-action {transition:all 5s ease;
}/style
/head/scriptbodydiv idappinput typebutton valueTag clickflag!flagtransitionh3 v-ifflag给我一片天空/h3/transition/div
/body
scriptvar vm new Vue({el:#app,data:{flag:false},methods:{}});
/script/html
计数器
!DOCTYPE html
html
head
meta charsetUTF-8title/titlescript srcvue.js/script
style typetext/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/scriptbodydiv idappinput typebutton idbutton1 clickadd valuespan {{num}}/spaninput typebutton idbutton1 value- clicksub{{message}} /div
/body
script// var com1 Vue.extend({// template:divinputa 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路由创建
htmlscript srchttps://unpkg.com/vue/dist/vue.js/scriptscript srchttps://unpkg.com/vue-router/dist/vue-router.js/scriptbodydiv idapph1Hello App!/h1p!-- 使用 router-link 组件来导航. --!-- 通过传入 to 属性指定链接. --!-- router-link 默认会被渲染成一个 a 标签 --router-link to/fooGo to Foo/router-linkrouter-link to/bar122Go to Bar/router-link/p!-- 路由出口 --!-- 路由匹配到的组件将渲染在这里 --router-view/router-view/divtemplate idtemp1h1i love you/h1/template/bodyscriptvar router new VueRouter({routes:[{ path: /foo, component:{ template: #temp1 } },{ path: /bar122, component: { template: divbar/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
/headscript srchttps://unpkg.com/vue/dist/vue.js/scriptscript srchttps://unpkg.com/vue-router/dist/vue-router.js/scriptbodydiv idapprouter-link toaaa转向测试一/router-linkrouter-link tobbb转向测试二/router-linktransition modeout-inrouter-view/router-view/transition/divtemplate idtemp1
div idlove
/div/templatetemplate idtemp2
div idhate
12123
/div
/template/bodyscriptvar 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 nameviewport contentwidthdevice-width,minimum-scale1.0,maximum-scale1.0,user-scalableno /headstyle/style
/headlink hrefhttps://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css relstylesheet
script srchttps://unpkg.com/vue/dist/vue.js/script
script srchttps://unpkg.com/vue-router/dist/vue-router.js/scriptbodydiv idappmycom1/mycom1ul classlist-groupli classlist-group-item v-foritem in list :keyitem.idspan classbadge评论人{{item.user}}/span{{item.content}}/ul/divtemplate idtemp1divdiv classform-grouplabel评论人/labelinput typetext classform-control v-modeluser/divdiv classform-grouplabel评论内容/labeltextarea classform-control v-modelcontent/textarea/divdiv classform-groupinput typebutton value发表评论 classbtn btn-primary clickpostComment/div/div/template/bodyscriptvar 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/htmlaxios
Get axios.get(https://autumnfish.cn/api/joke/list?num10).then(function(response){// console.log(response.data.jokes[1])document.getElementById(div1).valueresponse.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);})
}
