地方宣传网站建设的必要性,wordpress吐槽插件,推荐10个优秀的国外ui设计网站,如何利用网站模板#x1f38a;专栏【JavaSE】 #x1f354;喜欢的诗句#xff1a;更喜岷山千里雪 三军过后尽开颜。 #x1f386;音乐分享【如愿】 #x1f384;欢迎并且感谢大家指出小吉的问题#x1f970; 文章目录 #x1f354;Vue概述#x1f384;快速入门#x1f33a;Vue指令⭐v-… 专栏【JavaSE】 喜欢的诗句更喜岷山千里雪 三军过后尽开颜。 音乐分享【如愿】 欢迎并且感谢大家指出小吉的问题 文章目录 Vue概述快速入门Vue指令⭐v-bind✨运行结果 ⭐v-model✨运行结果 ️注意⭐v-on✨运行结果 ⭐v-if v-else-if v-else✨运行结果 ⭐v-show✨运行结果 ⭐v-for✨运行结果 生命周期⭐mounted✨运行结果 Vue概述
Vue是一套前端框架免除原生JavaScript中的DOM操作简化书写 官网https://v2.cn.vuejs.org/ 快速入门 ⭐新建HTML页面引入Vue.js文件
script srcjs/vue.js/script⭐在JS代码区域创建Vue核心对象定义数据模型
scriptnew Vue({el:#app,data:{message:Hello Vue!}})/script⭐编写视图
div idappinput typetext v-modelmessage{{message}}/divVue指令
指令HTML标签上带有 v- 前缀的特殊属性不同指令有不同含义
⭐v-bind
v-bind为HTML标签绑定属性值如设置herfcss样式等
bodydiv idappa v-bind:hrefurl链接1/aa v-bind:hrefurl链接2/a!-- input typetext v-modelurl --/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script在这段代码里面就是给a标签绑定herf属性而herf是一个链接
✨运行结果 ⭐v-model
v-model在表单元素上创建双向数据绑定
bodydiv idappa v-bind:hrefurl链接1/aa v-bind:hrefurl链接2/ainput typetext v-modelurl/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script表示表单输入的内容会自动绑定到url里面可以对表单里面的内容进行修改做到
✨运行结果 ️注意
通过v-bind或者v-model绑定的变量必须在数据模型中声明 即必须在data里面指定url的值
⭐v-on
为html标签绑定事件
bodydiv idapp!-- 单击事件 --input typebutton value点我一下 v-on:clickhandle()input typebutton value点我一下 clickhandle()/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},!-- 定义方法 --methods: {!-- 函数体 --handle: function(){alert(你点我了一下...);}}})
/scriptv-on:click可以简化为click ✨运行结果 ⭐v-if v-else-if v-else
条件性的渲染某元素判定为true时渲染否则不渲染
bodydiv idapp年龄input typetext v-modelage经判定为:span v-ifage35年轻人/spanspan v-else-ifage35 age60中年人/spanspan v-else老年人/spanbrbr/div
/body
script//定义Vue对象new Vue({el:#app,//vue接管区域data:{age:20},methods: {}})
/script✨运行结果 ⭐v-show
根据条件展示某元素区别在于切换的是display属性的值
bodydiv idapp年龄input typetext v-modelage经判定为:span v-showage35年轻人/spanspan v-showage35 age60中年人/spanspan v-showage60老年人/span/div
/body
script//定义Vue对象new Vue({el:#app,//vue接管区域data:{age:20},methods: {}})
/script✨运行结果 ⭐v-for
列表渲染遍历容器的元素或对象的属性
bodydiv idapp//没有索引div v-for(addrs) in addrs{{addrs}}/div//有索引div v-for(addrs,index) in addrs{{index}}:{{addrs}}/div/div
/body
script//定义Vue对象new Vue({el:#app,//vue接管区域data:{addrs:[北京,上海,西安,南京]},methods: {}})
/script✨运行结果 生命周期
指一个对象从创建到销毁的全过程 每触发一个生命周期事件会自动执行一个生命周期的方法
⭐mounted
bodydiv idapp/div
/body
scriptnew Vue({el:#app,data:{},methods: {},mounted () {alert(vue挂载完成发送请求到服务端)} })
/script代表vue挂载完成
✨运行结果 如果大家有不明白的地方欢迎在评论区进行讨论 如果对您有帮助请不要吝啬手中的点赞关注这对我非常重要❤️
