<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>data:数据对象</title> </head> <style> .titlecolor{ background-color: red; width: 300px; } .titlecolor3{ background-color: red; width: 900px; } .leftcentont{ margin-left: 100px; } </style> <body> <a href="https://cn.vuejs.org/"><h2>vue.js官网学习</h2></a> <!-- 1. 关于对象、数组取值{{}}--> <h2 class="titlecolor">1. 关于取值{{}}</h2> <div id="qvzhi" class="leftcentont"> {{message}} <h4>{{school.name}} {{school.mobiel}}</h4> <u1> <li>{{campus[0]}}</li> <li>{{campus[3]}}</li> </u1> </div> <!-- 2. v-text,v-model指令的使用--> <h2 class="titlecolor">2. v-text指令的使用</h2> <div id="zhiling" class="leftcentont"> <!-- v-text 替换原有的字符串--> <!-- v-html html代码插入--> <h5 v-text="info">毛毛虫</h5><h5 v-text="message" style="color: cornflowerblue">毛毛虫</h5> <h5>毛毛虫被替换了</h5> <h2 v-html="content"></h2><h2 v-text="content"></h2> <input type="text" v-model="message"/> </div> <!--3.事件绑定v-on(@)标签,指令不需要写on,如onclick为@click或v-on:click--> <h2 class="titlecolor3">3. 事件绑定 v-on或@标签,指令不需要写on,如onclick为@click或v-on:click</h2> <div id="shijian" class="leftcentont"> <input type="button" value="绑定事件" v-on:click="doit"/> <input type="button" value="绑定事件" @click="doet"/> {{food}} <br/> <input type="button" value="炒饭事件" @click="changgfood"/> <br/> </div> <!--4. v-if操作domv-show操作样式(隐藏标签),v-bind设置属性--> <h2 class="titlecolor3">4. v-if操作domv-show操作样式(隐藏标签),v-bind设置属性</h2> <div id="vif" > <input type="button" value="改变显示" @click="changeshow"/> <p v-if="isShow">v-if标签显示隐藏</p> <br/> <img v-bind:src="imgSrc" v-bind:title="ti" v-bind:style="styled" /> </div> <!--5. v-for 循环--> <h2 class="titlecolor">5. v-for 循环</h2> <div id="vfor" > <ul> <li v-for="(i,index) in arr"> {{index+1}} {{i}} </li> </ul> <span v-for="(item,index) in company" v-bind:title="item.name" @click="shanchu(index)"> {{item.name}} </span> <br/> <input type="button" value="点击增加" @click="add('确定要增加吗')"/> <input type="button" value="点击移除" @click="remove('确定要删除吗')"/> </div> <!--开发环境,生产环境为https://cdn.jsdelivr.net/npm/vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app1 = new Vue({ el:"#qvzhi", data:{ message:"你好,写什么是什么", school:{ name:"毛毛", mobile:"400-400-4000" }, campus:["天府一街","天府二街","天府三街","天府四街","天府五街"] } }) var app2 = new Vue({ el:"#zhiling", data:{ message:"蓝色增加了", info:"全栈工程师——", content:"<a href = 'https://www.baidu.com'>百度</a>" } }) var app3 = new Vue({ el:"#shijian", data:{ food:"炒饭" }, methods:{ doit:function () { alert("v-on事件绑定!"); }, doet:function () { alert("@事件绑定!"); }, changgfood:function () { this.food +="好吃!!!" } } }) var app4 = new Vue({ el:"#vif", data:{ isShow:false, imgSrc:"http://s.momocdn.com/static/w5/img/website/item1.jpg?20141105", ti:"这个是标题", styled:"height: 100px;width:200px" }, methods: { changeshow:function () { this.isShow = !this.isShow;<!--"!"是取反--> } } }) var app5 = new Vue({ el:"#vfor", data:{ arr:["北京","上海","深圳","成都"], company:[ {name:"极光通讯"}, {name:"上海财经"}, {name:"深圳华为"}, {name:"成都微米"}, {name:"←"}, {name:"点击删除"} ] }, methods:{ add:function (parameter) { alert(parameter); this.company.push({name:"杭州阿里巴巴"}); }, remove:function (parameter) { alert(parameter); this.company.shift(); }, shanchu:function (index) { this.company.splice(index,1) } } }) </script> </body> </html>
vue.js基本功能的使用
最新推荐文章于 2023-11-20 22:58:43 发布