博罗网站建设公司,asp.net网站开发项目化教程,wordpress阅读类主题,电商网站业务流程图vue-day011.vue的介绍作者介绍 框架的介绍2.vue官网https://cn.vuejs.org/3.vue的优点易用#xff0c;灵活#xff0c;高效4.库与框架区别库#xff1a;只具有某一种功能框架#xff1a;具备完整的功能 bootstrap element-ui5.开发环境与生产环境开发环境地址:scri… vue-day011.vue的介绍作者介绍 框架的介绍2.vue官网https://cn.vuejs.org/3.vue的优点 易用灵活高效4.库与框架区别 库只具有某一种功能 框架具备完整的功能 bootstrap element-ui5.开发环境与生产环境开发环境地址:script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.jsscript生产环境地址:script srchttps://cdn.jsdelivr.net/npm/vuescript6.vue特点数据驱动 组件化 单页面应用7.vue中指令(text)v-text:与原生的innerText一致只识别字符串v-html:与原生的innerHTML一致可以识别标签8.vue中指令与插值的使用插值表达式后面的内容会展示通过指令绑定元素之间的内容不会显示9.vue中指令(if)v-if v-else-if v-else 如果......否则......10.vue中的指令(show)两者区别:1.v-if是动态的向dom树中添加、删除元素 v-show通过设置css样式来实现2.v-if是真实创建其具有惰性如果初始值是false则不会渲染,同时也不会被缓存 v-show:无论初始值是否真假都会先渲染总结:如果需要频繁切换需要用v-show11.vue中的方法使用(v-on)let vm new Vue({ el:#app, data:{ name:宏超 }, // 所有的方法存放在methods中 methods: { say(name){ alert(hi,name) }, say2(){ console.log(this) console.log(hi,this.name) } }, })直接使用 {{say2()}} 调用body div idapp div click alertName点击实现效果div div click alertName2(褚阳森)点击实现效果div div click num点击实现效果div {{num}} divbodyscript src./vue.jsscriptscript let vm new Vue({ el:#app, data:{ name:志宝, num:0 }, methods: { alertName(){ alert(this.name) }, alertName2(name){ alert(name) } }, })script注意v-on:click方法名 可以简写为:click方法名 1.绑定事件的另种方式a.直接写方法名 b.直接写表达式(一般常用简单的表达式)12.v-for(数组)body div idapp span v-foritem in arr{{item}}span p v-for(item,index) in arr{{index}}-----{{item}}p divbodyscript src./vue.jsscriptscript let vm new Vue({ el:#app, data:{ arr:[苹果,香蕉,橘子,榴莲] }, methods: { }, })script注意点: v-for 循环数组可以传递2个参数第一个是数组的每一项第二个是数组的索引13.v-for(对象)body div idapp span v-foritem in objs{{item}}span p v-for(value,key,index) in objs{{key}}-----{{value}}-------{{index}}p divbodyscript src./vue.jsscriptscript let vm new Vue({ el:#app, data:{ objs:{ 水果:苹果香蕉橘子, 蔬菜:小白菜土豆芹菜 } }, methods: { }, })script注意循环对象的时候传递三个参数分别代表valuekey,index 位置不可以更换14.v-bind绑定属性body div idapp a v-bind:hrefhref v-bind:titletitle v-bind:msgmsg点击跳转a a :hrefhref :titletitle :msgmsg点击跳转a divbodyscript src./vue.jsscriptscript let vm new Vue({ el: #app, data: { href:https://www.baidu.com, title:我是标题1111, msg:hello }, methods: { }, })script注意v-bind: 可以简写为 :title:abc15.动态绑定样式classbody div idapp div classbox我是普通样式渲染div div :classclassName我是第一种样式渲染div div :classobjClass我是第二种样式渲染div div :class[11?blue:yellow]我是第三种样式渲染div div :classyellow font我是第四种样式渲染div div :classyellow font我是第四种样式渲染div divbodyscript src./vue.jsscriptscript let vm new Vue({ el: #app, data: { className:pink, objClass:{ orange:true, font:true, }, font:font }, methods: { }, })script注意普通情况用第一种和普通绑定即可如果后期需要动态添加那么就需要用到第四种15.动态绑定style我是通过style来设置的我是第二种通过style绑定我是第三种通过style绑定注意如果需要绑定多个样式需要用对象的方式如果需要绑定多个类名需要用数组的方式-----------------------------------这是分割线--------------------------------简单选项卡操作DOCTYPE htmlhtml langenhead meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocumenttitle style .title { width: 100px; height: 30px; border: 1px solid #000; float: left; } .clear{ clear: both; } .box { width: 304px; height: 100px; border: 1px solid #bfc; font-size: 30px; text-align: center; } .pink{ color: pink; } .green{ color: green; } .red{ color: red; } styleheadbody div idapp div :class[title,item.color] click isShow(index) v-for(item,index) in list{{item.tag}}div div classcleardiv div :classbox item.color v-if item.show v-for (item,index) in list{{item.content}}div divbodyscript src../vue.jsscriptscript let vm new Vue({ el: #app, data:{ title:title, list:[ {tag:选项卡一,content:内容一,show:true,color:pink}, {tag:选项卡二,content:内容二,show:false,color:green}, {tag:选项卡三,content:内容三,show:false,color:red} ] }, methods:{ isShow(index){ for(let i 0;ithis.list.length;i){ this.list[i].show false; } this.list[index].show true; } } })scripthtml
