吴江建设局网站打不开了深圳最好的外贸seo培训
文章目录
- Hello Vue
- Vue文本指令
- Vue属性绑定
- Vue双向绑定
- Vue事件绑定
- Vue猜数字
- Vue简单计算器
- Vue简单计算器升级版
- Vue循环遍历
- Vue员工列表练习
- Vue小练习
- Vue显示隐藏相关
使用一些简单的小案例来熟悉Vue的基本使用方法
Hello Vue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HelloVue</title>
</head>
<body><!--Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.jsunpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js--><div><h1>{{info}}</h1></div><!--引入Vue框架文件--><!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>--><script src="vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"Hello VUE!"}});setTimeout(function (){v.info="值改变了";}, 3000)</script>
</body>
</html>
Vue文本指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VUE指令</title>
</head>
<body><div><!--插值, 不依赖于标签,即使没有标签也能和变量进行绑定-->{{info}}<p>{{info}}</p><!--让元素的文本内容和变量进行绑定--><p v-text="info"></p><!--让元素的标签内容和变量进行绑定--><p v-html="info"></p></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"文本相关<b>加粗</b>"}})</script>
</body>
</html>
Vue属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性绑定</title>
</head>
<body><div><a v-bind:href="url">超链接1</a><!--省略v-bind是简写--><a :href="url">超链接2</a><img :src="imgUrl" alt="" width="150px"><input type="text" :value="info"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{url:"http://www.baidu.com",imgUrl:"../touxiang.png",info:"测试文本内容"}})setTimeout(function (){v.url = "http://www.youku.com";v.imgUrl = "b.jpg";v.info = "值改变了";}, 3000);</script>
</body>
</html>
Vue双向绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>双向绑定</title>
</head>
<body><div><input type="text" v-model="info"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"双向绑定"}})setTimeout(function () {alert("用户输入的是:"+v.info)},3000);</script>
</body>
</html>
Vue事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title>
</head>
<body><div><input type="text" v-model="info"><!--v-on:事件名="方法名" 事件绑定--><input type="button" value="按钮1" v-on:click="f"><!--简写--><input type="button" value="按钮2" @click="f()"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:""},methods:{f(){alert(v.info)}}})</script>
</body>
</html>
Vue猜数字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue猜数字</title>
</head>
<body><div><input type="text" v-model="num" placeholder="请输入1-100之间的整数"><input type="button" value="猜一猜" @click="diy()"><div>结果: {{result}}</div></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>//生成1-100的整数let x = parseInt(Math.random()*100)+1;let v = new Vue({el:"body>div",data:{result:"还未点击",num:""},methods:{diy(){//判断用户输入的值和x的关系if (v.num > x){v.result="猜大了";}else if (v.num < x){v.result = "猜小了";}else{v.result="恭喜你猜对了!"}}}})</script>
</body>
</html>
Vue简单计算器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算器</title>
</head>
<body><div><input type="text" v-model="n1"><input type="text" v-model="n2"><input type="button" value="加" @click="f(1)"><input type="button" value="减" @click="f(2)"><input type="button" value="乘" @click="f(3)"><input type="button" value="除" @click="f(4)"><div>结果: {{result}}</div></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{result:"",n1:"",n2:""},methods:{f(x){switch (x){case 1://加v.result = v.n1*1 + v.n2*1;break;case 2://减v.result = v.n1*1 - v.n2*1;break;case 3://乘v.result = (v.n1*1) * (v.n2*1);break;case 4://除v.result = (v.n1*1) / (v.n2*1);break;}}}})</script>
</body>
</html>
Vue简单计算器升级版
<head><meta charset="UTF-8"><title>Vue计算器升级版</title>
</head>
<body><div><input type="text" v-model="n1"><input type="text" v-model="n2"><input type="button" value="加" @click="f('+')"><input type="button" value="减" @click="f('-')"><input type="button" value="乘" @click="f('*')"><input type="button" value="除" @click="f('/')"><div>结果: {{result}}</div></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{result:"",n1:"",n2:""},methods:{f(x){//eval("5-2") 此方法可以将字符串以JS代码的形式执行v.result = eval(v.n1 + x + v.n2);}}})</script>
</body>
</html>
Vue循环遍历
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue循环遍历</title>
</head>
<body><div><ul><!--v-for循环遍历指令,遍历的过程中生成当前元素--><li v-for="name in arr">{{name}}</li></ul><p v-for="name in arr">{{name}}</p><h1 v-for="name in arr">{{name}}</h1><p v-for="p in persons">名字:{{p.name}}, 年龄:{{p.age}}, 类型:{{p.type}}</p><table border="1"><caption>英雄列表</caption><tr><th>名字</th><th>年龄</th><th>类型</th></tr><tr v-for="p in persons"><td>{{p.name}}</td><td>{{p.age}}</td><td>{{p.type}}</td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{arr:["刘备","关羽","诸葛亮","孙尚香","刘禅"],persons:[{name:"刘备", age:"50", type:"战士"},{name:"孙尚香", age:"20", type:"射手"},{name:"诸葛亮", age:"30", type:"法师"}]},methods:{}})</script>
</body>
</html>
Vue员工列表练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>员工列表练习</title>
</head>
<body><div><input type="text" placeholder="姓名" v-model="emp.name"><input type="text" placeholder="工资" v-model="emp.salary"><input type="text" placeholder="工作" v-model="emp.job"><input type="button" value="添加" @click="f()"><table border="1"><caption>员工列表</caption><tr><th>姓名</th><th>工资</th><th>工作</th></tr><tr v-for="p in arr"><td>{{p.name}}</td><td>{{p.salary}}</td><td>{{p.job}}</td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{arr:[{name:"张三",salary:3000,job:"销售"},{name:"李四",salary:4000,job:"人事"},{name:"王五",salary:10000,job:"程序员"}],emp:{name:"",salary:"",job:""}},methods:{f(){//push()是JavaScript中数组里面的添加方法// v.arr.push(v.emp); //用这种方式是对原对象的引用,值会随着文本框的内容改变/*v.arr.push({name:"赵六",salary:10000,job:"程序员"})JSON.parse(JSON.stringify(v.emp))创建了一个新的对象添加到数组中此时emp对象的值发生改变和数组中的新对象是无关的,这种复制出来的和原对象无关的方式称为深拷贝(有引用关系的是浅拷贝)*/v.arr.push(JSON.parse(JSON.stringify(v.emp)));}}})</script></body>
</html>
Vue小练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>综合练习</title>
</head>
<body><div><table border="1"><caption>个人信息</caption><tr><td>照片</td><td><img :src="person.url" width="150" alt=""></td></tr><tr><td>名字</td><td>{{person.name}}</td></tr><tr><td>年龄</td><td>{{person.age}}</td></tr><tr><td>好友</td><td><ul><li v-for="name in person.friend">{{name}}</li></ul></td></tr><tr><td colspan="2" style="text-align: center"><input type="button" value="请求数据" @click="f()"></td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"table",data:{person:{name:"xxx",age:"xxx",url:"../touxiang.png",friend:[]}},methods:{f(){v.person = {name:"女生",age:"18",url:"../touxiang2.png",friend: ["Lucy","Mike","John"]}}}})</script>
</body>
</html>
Vue显示隐藏相关
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示隐藏相关</title>
</head>
<body><div><!--v-if让元素是否显示和变量建立关系,如果变量值为false 则删除元素--><h1 v-if="isVisible">刘德华</h1><!--和上面v-if的显示状态取反--><h1 v-else>张三</h1><!--v-show让元素是否显示和变量建立关系,如果变量值为false 则隐藏元素(如果需要频繁切换显示状态)--><h1 v-show="isVisible">张学友</h1><h1>郭富城</h1></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{isVisible:true// isVisible:true},methods:{}})</script>
</body>
</html>