Vue01

Vue的基本概述head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title !-- 一旦引入的vue核心包,就可以全局使用 -- script srcjs/vue.js/script /head body !-- 创建vue实例需要的步骤 1.准备一个容器(vue渲染数据的范围) 2.引入vue环境 3.创建vue实例 4.添加vue实例的配置项 4.1 el挂载点 4.2 data准能被数据 -- div idapp !-- 插值表达式我们将来要进行一个数据的渲染就使用这种方式插值表达式里面定义data里面的变量名称 -- {{msg}} br {{name}} /div script const v new Vue({ // 通过el我们可以配置选择器这样可以定位到vue实例所作用的容器 el:#app, // 通过data可以定义数据在容器里面渲染的就是data的数据 data:{ msg:hello vue, name:eric, } }) /script /body几种错误的使用情况1.渲染data中没有定义的数据2.不要在插值表达式中写if这样的判断3.不要再html属性中写插值表达式正确写法Vue指令style .box{ width: 200px; height: 100px; line-height: 100px; border:2px red solid; margin: 3px; } /style /head body !-- v-show和v-if都是控制HTML元素的显示和隐藏 如果值为true会显示否则隐藏 v-show和v-if的区别 在隐藏元素时show通过隐藏样式(display:none)的方式 if通过将当前的dom元素删除掉 -- div idapp div v-showflag classbox演示v-show的使用/div div v-ifflag classbox演示v-if的使用/div /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ flag:true } }) /scriptbody div idapp p v-ifsex1性别:男/p p v-else性别:女/p hr p v-ifscore90成绩等级A:优秀/p p v-else-ifscore80成绩等级B:良好/p p v-else-ifscore60成绩等级C:合格/p p v-else成绩等级D:不合格/p /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ sex:2, score:67 } }) /scriptbody div idapp button clickcountcount-1 typebutton-/button span{{count}}/span button clickcountcount1 typebutton/button /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ count:100, } }) /scriptbody div idapp button clickfn1 typebutton显示与隐藏/button div v-showflag这是一个box/div /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ flag:true, }, methods:{ //用来定义处理函数 //如果要在methods中使用data中的数据我们可以使用 //Vue实例.属性名的方式来引用 //也可以使用this动态的指向当前动态实例 fn1(){ this.flag !this.flag; } } }) /scriptbody div idapp div stylemargin-bottom: 15px; width: 250px; border: 3px black solid;border-radius: 5px; h3自动售货机/h3 button clicktodec(5) typebutton可乐5元/button button clicktodec(8) typebutton牛奶8元/button button clicktodec(10) typebutton咖啡10元/button /div div p银行卡余额:{{money}}元/p /div /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ money:100, }, methods:{ todec(price){ if(this.moneyprice){ alert(余额不足); return; } this.money-price; }, dec5(){ this.money-5; }, dec8(){ this.money-8; }, dec10(){ this.money-10; } } }) /script图片的上下页切换body div idapp !-- img v-bind:srcimgUrl v-bind:altAlt v-bind:titleTitle -- !-- v-bind是给html属性动态设置值也可以:属性名称值 eg: :src :alt :title -- img :srcimgUrl /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ imgUrl:https://img1.baidu.com/it/u302146640,1270496570fm253fmtautoapp138fJPEG?w800h1067, Alt:五五上, Title:无无山, } }) /scriptbody div idapp !-- 只有当前这一页下标不是0才显示可以上一页 -- button v-showindex!0 clickindex-- typebutton上一页/button div img styleheight: 200px; :srclist[index] althaha /div button v-showindex!5 clickindex typebutton下一页/button /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ index:0, list:[ https://img1.baidu.com/it/u882687410,353298960fm253app138fJPEG?w500h667, https://img1.baidu.com/it/u2211909947,1090713287fm253fmtautoapp138fJPEG?w800h1155, https://img0.baidu.com/it/u3378675194,2222160237fm253fmtautoapp138fJPEG?w500h667, https://img2.baidu.com/it/u124634888,3066510728fm253fmtautoapp138fJPEG?w500h667, https://img1.baidu.com/it/u2413649154,1697438573fm253fmtautoapp138fJPEG?w500h667, https://img2.baidu.com/it/u3606113107,1124599065fm253app138fJPEG?w500h501 ], } }) /scriptbody div idapp ul !-- 遍历数组 -- li v-for(item,i) in arr {{item}} -- {{i}} /li /ul ul li v-for(item) in arr {{item}} /li /ul ul !-- 遍历对象 -- li v-for(v,key,io) in person {{v}} {{person}} {{io}} /li /ul ul !-- 遍历对象数组 -- li v-for(item) in emps 姓名:{{item.name}}, 年龄:{{item.age}} /li /ul /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ arr:[白菜,黄瓜,胡萝卜,豆荚], person:{ name:kobe, age:19, address:USA }, emps:[ { name:kobe, age:18, address:USA },{ name:james, age:16, address:USA },{ name:lebra, age:17, address:USA } ] } }) /script图书信息的展示和删除操作body div idapp li v-for(item) in books {{item.name}}--{{item.author}}button clickdel(item.id) typebutton删除/button /li /div /body script srcjs/vue.js/script script const v new Vue({ el:#app, data:{ books:[ {id:1,name:《红楼梦》,author:曹雪芹}, {id:2,name:《西游记》,author:吴承恩}, {id:3,name:《水浒传》,author:施耐庵}, {id:4,name:《三国演义》,author:罗贯中} ] }, methods:{ del(id){ //根据id删除数组中的元素根据filter方法 //filter过滤规则是:如果数组中的每个元素的id与当前的id不相等就将其过滤出来然后放在一个新数组中 this.books this.books.filter(ite ite.id!id); } } }) /script-key的使用body !-- 循环列表时我们要习惯个每一个li列表添加一个唯一标识 eg: :key唯一值 这样在删除时可以将li删除干净 -- div idapp li :keyitem.id v-for(item) in books {{item.name}}--{{item.author}}button clickdel(item.id) typebutton删除/button /li /div /body