Vue01
Vue的基本概述
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 一旦引入的vue核心包,就可以全局使用 --> <script src="js/vue.js"></script> </head> <body> <!-- 创建vue实例需要的步骤 1.准备一个容器(vue渲染数据的范围) 2.引入vue环境 3.创建vue实例 4.添加vue实例的配置项 4.1 el挂载点 4.2 data准能被数据 --> <div id="app"> <!-- 插值表达式，我们将来要进行一个数据的渲染就使用这种方式，插值表达式里面定义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 id="app"> <div v-show="flag" class="box">演示v-show的使用</div> <div v-if="flag" class="box">演示v-if的使用</div> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ flag:true } }) </script><body> <div id="app"> <p v-if="sex==1">性别:男</p> <p v-else>性别:女</p> <hr> <p v-if="score>=90">成绩等级A:优秀</p> <p v-else-if="score>=80">成绩等级B:良好</p> <p v-else-if="score>=60">成绩等级C:合格</p> <p v-else>成绩等级D:不合格</p> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ sex:2, score:67 } }) </script><body> <div id="app"> <button @click="count=count-1" type="button">-</button> <span>{{count}}</span> <button @click="count=count+1" type="button">+</button> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ count:100, } }) </script><body> <div id="app"> <button @click="fn1" type="button">显示与隐藏</button> <div v-show="flag">这是一个box</div> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ flag:true, }, methods:{ //用来定义处理函数 //如果要在methods中使用data中的数据，我们可以使用 //Vue实例.属性名的方式来引用 //也可以使用this动态的指向当前动态实例 fn1(){ this.flag = !this.flag; } } }) </script><body> <div id="app"> <div style="margin-bottom: 15px; width: 250px; border: 3px black solid;border-radius: 5px;"> <h3>自动售货机</h3> <button @click="todec(5)" type="button">可乐5元</button> <button @click="todec(8)" type="button">牛奶8元</button> <button @click="todec(10)" type="button">咖啡10元</button> </div> <div> <p>银行卡余额:{{money}}元</p> </div> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ money:100, }, methods:{ todec(price){ if(this.money<price){ alert("余额不足"); return; } this.money-=price; }, dec5(){ this.money-=5; }, dec8(){ this.money-=8; }, dec10(){ this.money-=10; } } }) </script>图片的上下页切换
<body> <div id="app"> <!-- <img v-bind:src="imgUrl" v-bind:alt="Alt" v-bind:title="Title"> --> <!-- v-bind是给html属性动态设置值，也可以:属性名称=值 eg: :src="" :alt="" :title="" --> <img :src="imgUrl"> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ imgUrl:"https://img1.baidu.com/it/u=302146640,1270496570&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067", Alt:"五五上", Title:"无无山", } }) </script><body> <div id="app" > <!-- 只有当前这一页下标不是0才显示可以上一页 --> <button v-show="index!=0" @click="index--" type="button">上一页</button> <div> <img style="height: 200px;" :src="list[index]" alt="haha"> </div> <button v-show="index!=5" @click="index++" type="button">下一页</button> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ index:0, list:[ "https://img1.baidu.com/it/u=882687410,353298960&fm=253&app=138&f=JPEG?w=500&h=667", "https://img1.baidu.com/it/u=2211909947,1090713287&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1155", "https://img0.baidu.com/it/u=3378675194,2222160237&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667", "https://img2.baidu.com/it/u=124634888,3066510728&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667", "https://img1.baidu.com/it/u=2413649154,1697438573&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667", "https://img2.baidu.com/it/u=3606113107,1124599065&fm=253&app=138&f=JPEG?w=500&h=501" ], } }) </script><body> <div id="app"> <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 src="js/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 id="app"> <li v-for="(item) in books"> {{item.name}}--{{item.author}}<button @click="del(item.id)" type="button">删除</button> </li> </div> </body> <script src="js/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 id="app"> <li :key="item.id" v-for="(item) in books"> {{item.name}}--{{item.author}}<button @click="del(item.id)" type="button">删除</button> </li> </div> </body>