<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>第一个Vue程序</title> <!-- 1. 导入Vue --> <script src="js/vue.min.js"></script> </head> <body> <!--下面三行是Vue实例所控制的区域，就是MVVM中的View层--> <div id="test"> <p>{{msg}}</p> </div> <!-- 下面<script>标记是MVVM中的ViewModel层--> <script> //2.创建一个Vue实例 var vm=new Vue({ el:'#test',//表示当前Vue实例所控制的区域 //下面data是MVVM中的Model层，专门用来保存每个页面的数据 data:{ msg:'Hello Vue World!' //通过Vue指令，把数据渲染到页面上的数据 } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue 数据绑定——文本插值</title> <script src="js/vue.min.js"></script> </head> <body> <div id="test"> <p>{{msg}}</p> </div> <script> var vm=new Vue({ el:'#test', data:{ msg:new Date() }, mounted: function(){ var vm = this; this.timer = setInterval(function(){ vm.msg = new Date(); console.log('New date:' + vm.msg); },1000); }, beforeDestroy: function(){ if(this.timer){ clearInterval(this.timer); } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue 数据绑定——表达式</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!-- 字符串 --> <p>{{ str }} <!--页面展示：字符串--> {{ num + 'aaa'}}<!--页面展示：1aaa--> {{ str.length }} <!--页面展示：3--> {{str.split('ll').reverse().join('aa')}} </p> <!-- 数值 --> <p>{{ num }} <!--页面展示：1--> {{ num+num1 }} <!--页面展示：101--> {{ num > num1 }} <!--页面展示：false--> {{ num.toFixed(2) }}</p> <!--页面展示：1.00--> <!-- boolean --> <p>{{ flag }}</p> <!--页面展示：true--> <!-- 数组 --> <p>{{ arr }} <!--页面展示：[1,2,3,4]--> {{ arr[3] }}</p> <!--页面展示：4--> <!-- 对象 --> <p>{{ obj }} <!--页面展示：{ "name": "虫虫", "age": 20 }--> {{ obj.name }}</p> <!--页面展示：虫虫--> <!-- 三目运算符 --> <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否--> <span v-html="link"> </span> </div> <script> new Vue({ el:"#app", data:{ str: 'Hello', num: 1, num1:100, flag: true, arr: [1,2,3,4], obj:{ name:'虫虫', age:20 }, link: '<a href="http://www.whpu.edu.cn">武汉轻工大学</a>' } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>v-html和v-text</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!-- {}}/v-text不能解析html元素，只会照样输出 --> <p>{{hello}}</p> <p v-text = 'hello'></p> <p v-html = 'hello'></p> </div> <script> new Vue({ el:'#app', data:{ hello:'<span style="font-size: 36px;">hello world</span>' } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>v-bind</title> <script src="js/vue.min.js"></script> </head> <body> <body> <div id="app"> <img v-bind:src="path"/> </div> <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { path : "img/logo.png" } }); </script> </body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="seen">seen值为真，显示</p> <p v-else>seen值为假，显示此句</p> <template v-if="ok"> <h1>Vue</h1> <p>有条件渲染</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model</title> <script src="js/vue.min.js"></script> </head> <body> <!--文本框--> <div id="app"> 用户名：<input v-model="test"> {{test}}<br> <!--下拉列表框--> 前端语言： <select v-model="selected"> <option value="HTML">HTML</option> <option value="CSS">CSS</option> <option value="JavaScript">JavaScript</option> </select> <span>选择是：{{ selected }}</span> <br> <!--单选框--> 性别： <input type="radio" id="boy" value="男" v-model="picked"> <label for="boy">男</label> <input type="radio" id="girl" value="女" v-model="picked"> <label for="girl">女</label> <br> <span>选择是: {{ picked }}</span> <br> <!--复选框-->爱好： <input type="checkbox" id="one" value="羽毛球" v-model="checkedNames"> <label for="one">羽毛球</label> <input type="checkbox" id="two" value="音乐" v-model="checkedNames"> <label for="two">音乐</label> <input type="checkbox" id="three" value="乒乓球" v-model="checkedNames"> <label for="three">乒乓球</label> <br> <span>选择的爱好是: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { test: 'lb', selected:'JavaScript', picked:'女', checkedNames:['音乐','乒乓球'] } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>v-for</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <table border="1" align="center" width="400px"> <caption><h2>前端语言列表</h2></caption> <tr> <td>序号</td> <td>内容</td> </tr> <tr align="center" v-for="(item,i) in list"> <td>{{i+1}}</td> <td>{{item}}</td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ list:['HTML','CSS','JavaScript','Bootstrap','Vue'] }, methods:{} }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遍历数组</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <table border="1" align="center" width="400px"> <caption><h2>学生信息表</h2></caption> <tr> <td>学号</td> <td>姓名</td> <td>年龄</td> </tr> <tr align="center" v-for="(user) in listObj"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ listObj:[ {id:1, name:'刘兵',age:25}, {id:2, name:'汪琼',age:18}, {id:3, name:'张三',age:22}, {id:4, name:'李四',age:20}, {id:5, name:'王二',age:19}, ] }, methods:{} }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遍历对象</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ mark:{ 'C语言程序设计':90, '离散数学':95, '大学英语':89 } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue事件</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="show">Hello Vue 事件！</p> <button @click="handleClose">隐藏与显示</button> </div> <script> var app = new Vue ({ el: '#app', data: { show: true }, methods: { handleClose: function () { this.show =!this.show; } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue计算属性</title> <script src="js/vue.min.js"></script> </head> <body> <div id="prices"> <table border="1" align="center" width="400px"> <caption><h2>购物车</h2></caption> <tr align="center" > <td>货名</td> <td>单价</td> <td>数量</td> <td>合计</td> </tr> <tr align="center" v-for="(user) in package1"> <td>{{user.name}}</td> <td>{{user.price}}</td> <td>{{user.count}}</td> <td>{{user.price*user.count}}</td> </tr> <tr align="center" > <td>总价</td> <td colspan="3">{{prices}}</td> </tr> </div> <script> // <!--购物车总价--> var prices = new Vue({ el: "#prices", data: { package1: [ { name: "华为mate20pro", price: 4566, count: 2 }, { name: "华为p30", price: 4166, count: 3 }, { name: "苹果X", price: 5200, count: 8 }, { name: "OPPO", price: 2180, count: 4 }, ] }, computed: { prices: function () { var prices = 0; for (var i = 0; i < this.package1.length; i++) { prices += this.package1[i].price * this.package1[i].count; } return prices; } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算属性与计算方法的区别</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> 长度：<input v-model="length" type="text" /><br /> 宽度：<input v-model="width" type="text" /><br /> 面积：{{areas}}<br /> <button @click="add()">计算方法</button> 和的值为：{{num}} </div> <script type="text/javascript" src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: '#app', data: { length: '', '', num: '' }, computed: { areas: function() { let areas = 0 areas = this.length * this.width return areas } }, methods: { add: function() { this.num = parseInt(this.length) + parseInt(this.width) }, } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算属性setter属性</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> 姓名： {{fullName}} </div> <script> var setter = new Vue({ el: "#app", data: { firstName: 'Jack', lastName:'Green' }, computed: { fullName: { //getter,用于读取 get: function () { return this.firstName + ' ' + this.lastName }, //setter，写入时触发 set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>过滤器</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!--输入框--> <input type="text" v-model="content" @change="changeEvent"> <!--显示层，后边加一个过滤器处理函数，把英文首字母变为大写--> <h3>{{viewContent | changeCapitalLetter}}</h3> </div> <script> let vm = new Vue({ el:"#app", data:{ viewContent:"", content:"" }, methods:{ changeEvent(){ this.viewContent = this.content; } }, filters:{ changeCapitalLetter(value){ //value是输入框的内容，也是要显示的内容 if(value){ let str = value.toString(); // 获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母 let newArr = str.split(" ").map(ele=>{ return ele.charAt(0).toUpperCase() + ele.slice(1) }); return newArr.join(" ") //数组转字符串 以空格输出。。。 } } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全局过滤器</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <h2>{{8 | number}}</h2> <h2>{{18 | number}}</h2> <h2>{{8.12345 | numberFormat(3)}}</h2> <h2>{{18.1 | numberFormat(4)}}</h2> </div> <script type="text/javascript"> Vue.filter('number',function(value){ return value<10?'0'+value:value }) Vue.filter('numberFormat',function(value,n){ return value.toFixed(n) }) var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>监听属性</title> <script src="js/vue.min.js"></script> </head> <body> <div id = "computed_props"> 数字 : <input type = "text" v-model = "num"> 字母: <input type = "text" v-model = "str"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { num :0, str:"A" }, methods: { }, computed :{ }, watch : { num:function(val) { this.num = val; this.str = String.fromCharCode(65 + parseInt(val%26)); }, } }); // $watch 是一个实例方法 vm.$watch('num', function (newValue, oldValue) { // 这个回调将在 vm.num 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <script src="js/vue.min.js"></script> <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #E9E9E9; text-align: left; } th{ background-color: #f7f7f7; color:#5c6b77; font-weight:600; } </style> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <!--td>{{getFinalPrice(item.price)}}</td--> <td>{{item.price | showPrice}}</td> <td> <button @click="decrement(index)" v-bind:disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格：{{totalPrice | showPrice}}</h2> </div> <h2 v-else="books.length">购物车为空</h2> </div> <script> var app=new Vue({ el:"#app", data:{ id:0, name:'', price:0, count:0, books:[ { id:1, name: "华为mate20pro", price: 4566, count: 2 }, { id:2, name: "华为p30", price: 4166, count: 3 }, { id:3, name: "苹果X", price: 5200, count: 8 }, { id:4, name: "OPPO", price: 2180, count: 4 }, ] }, methods:{ getFinalPrice(price){ return "￥"+price.toFixed(2) }, increment(index){ this.books[index].count++; }, decrement(index){ this.books[index].count--; }, removeHandle(index){ this.books.splice(index,1) for(let i=0;i<this.books.length;i++){ this.books[i].id=i+1 } } }, filters:{ showPrice(price){ return "￥"+price.toFixed(2) } }, computed:{ totalPrice(){ let totalPrice=0 for(let i=0;i<this.books.length;i++){ totalPrice+=this.books[i].price*this.books[i].count } return totalPrice } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <script src="js/vue.min.js"></script> <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #E9E9E9; text-align: left; } th{ background-color: #f7f7f7; color:#5c6b77; font-weight:600; } </style> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <!--td>{{getFinalPrice(item.price)}}</td--> <td>{{item.price | showPrice}}</td> <td> <button @click="decrement(index)" v-bind:disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格：{{totalPrice | showPrice}}</h2> </div> <h2 v-else="books.length">购物车为空</h2> </div> <script> var app=new Vue({ el:"#app", data:{ id:0, name:'', price:0, count:0, books:[ { id:1, name: "华为mate20pro", price: 4566, count: 2 }, { id:2, name: "华为p30", price: 4166, count: 3 }, { id:3, name: "苹果X", price: 5200, count: 8 }, { id:4, name: "OPPO", price: 2180, count: 4 }, ] }, methods:{ getFinalPrice(price){ return "￥"+price.toFixed(2) }, increment(index){ this.books[index].count++; }, decrement(index){ this.books[index].count--; }, removeHandle(index){ this.books.splice(index,1) for(let i=0;i<this.books.length;i++){ this.books[i].id=i+1 } } }, filters:{ showPrice(price){ return "￥"+price.toFixed(2) } }, computed:{ totalPrice(){ let totalPrice=0 for(let i=0;i<this.books.length;i++){ totalPrice+=this.books[i].price*this.books[i].count } return totalPrice } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue 数据绑定——表达式</title> <script src="js/vue.min.js"></script> <style> [v-cloak]{ display: none; } .css{ color: red; } </style> </head> <body> <div id="domo" v-cloak> <p style="color: red;">v-html 标签有效</p> <p v-html="name"></p> <p style="color: red;">v-text 标签无效</p> <p v-text="name"></p> <hr /> <p style="color: red;">style</p> <p :style="objCss">使用style从数据拿视图，v-bind====:</p> <p style="color: red;">v-bind可以简写成： ,动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p> <img v-bind:src='src'>v-bind可以省</img> <p :style="{ color: 'yellow', fontSize: '11px' }">自己改,数据</p> <p :class="{ 'css':!bool }">我不是红色的</p> <hr /> <p style="color: red">v-show</p> <p v-show="bool">v-show可以控制出现或者隐藏</p> <button @click='showClick'>v-on:click====@click点击，隐藏</button> <hr /> <p style="color: red">v-model 双向绑定！</p> <input v-model="name"></input> <hr /> <p style="color: red">v-for</p> <ul> <li v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></li> </ul> <p v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></p> <table v-for="a in arr"> <tr><td>{{a.name}}</td><td>{{a.age}}</td><td><img v-for="i in a.imgs" :src="i" /></td></tr> </table> <hr /> <p style="color: red">v-if</p> <p v-if="type==='A'" v-text="name1"></p> <div v-else-if="type==='B'" v-text="name2"></div> <div v-else-if="type==='C'" v-text="name3"></div> <div v-else="type==='D'" v-text="name4"></div> <hr /> <p style="color: red">v-pre 这是一个跳过这个元素和它的子元素的编译过程</p> <p><span v-pre>{{ 被包括的vue语言全都无效化！！ }}</span></p> </div> <script type="text/javascript" src="js/vue.js"></script> <script> new Vue({ el: "#domo", data: { name: '<em>我爱你<span>而</span>你爱他</em>', src:'img/发生的事_画板 1.png', objCss:{ color: 'blue', fontSize: '28px' }, bool:false, arr: [{ name: "大哥", age: 18, imgs: ['img/image (24).gif'] }, { name: "二哥", age: 17, imgs: ['img/image (25).gif'] }, { name: "三弟", age: 19, imgs: ['img/image (26).gif'] }, { name: "四弟", age: 20, imgs: ['img/image (27).gif'] }], name1: "lemon", name2: "enenenen", name3: "DASDA", name4: "eDASDASF", type:'B', }, methods:{ showClick(){ this.name="ddddd", this.bool=!this.bool, alert("取消隐藏") this.type='D' } }, }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue model</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <table border="1" align="center" width="400px"> <caption><h2>前端语言列表</h2></caption> <tr> <td>序号</td> <td>内容</td> </tr> <tr align="center" v-for="(item,i) in list"> <td>{{i+1}}</td> <td>{{item}}</td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ list:['HTML','CSS','JavaScript','Bootstrap','Vue'] }, methods:{} }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <script src="js/vue.min.js"></script> <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #E9E9E9; text-align: left; } th{ background-color: #f7f7f7; color:#5c6b77; font-weight:600; } </style> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <!--td>{{getFinalPrice(item.price)}}</td--> <td>{{item.price | showPrice}}</td> <td> <button @click="decrement(index)" v-bind:disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格：{{totalPrice | showPrice}}</h2> </div> <h2 v-else="books.length">购物车为空</h2> </div> <script> var app=new Vue({ el:"#app", data:{ id:0, name:'', price:0, count:0, books:[ { id:1, name: "华为mate20pro", price: 4566, count: 2 }, { id:2, name: "华为p30", price: 4166, count: 3 }, { id:3, name: "苹果X", price: 5200, count: 8 }, { id:4, name: "OPPO", price: 2180, count: 4 }, ] }, methods:{ getFinalPrice(price){ return "￥"+price.toFixed(2) }, increment(index){ this.books[index].count++; }, decrement(index){ this.books[index].count--; }, removeHandle(index){ this.books.splice(index,1) for(let i=0;i<this.books.length;i++){ this.books[i].id=i+1 } } }, filters:{ showPrice(price){ return "￥"+price.toFixed(2) } }, computed:{ totalPrice(){ let totalPrice=0 for(let i=0;i<this.books.length;i++){ totalPrice+=this.books[i].price*this.books[i].count } return totalPrice } } }) </script> </body> </html>