Vue的示例
示例目錄：
1.跑馬燈效果
2.簡單計(jì)數(shù)器
3.品牌案例（添加、刪除、搜索）
4.過濾器的基本使用
5.全局過濾器與自定義過濾器
6.自定義按鍵修飾符和獲取焦點(diǎn)
7.結(jié)合node手寫JSONP服務(wù)器
?
1.跑馬燈效果
?代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入包--><script src="vue.js"></script> </head> <body><!--2.創(chuàng)建一個要控制的區(qū)域--><div id="app"><input type="button" value="開始了" @click="action"><input type="button" value="暫停了" @click="stop"><h4>{{ msg }}</h4></div><script>var vm = new Vue({el:"#app",data:{msg:'我愛你，中國！',intervalId:null //在data上定義定時器id },methods:{action(){// 定時器方法1// var _this = this// setInterval(function () {// var start = _this.msg.substring(0,1) //獲取到頭的第一個字符// var end = _this.msg.substring(1) //獲取到后面的所有字符// _this.msg = end + start //重新拼接得到新的字符串，并賦值給 this.msg// },400)if (this.intervalId != null) return; //開始前判斷是否為null，是的開始計(jì)時，不是就返回//定時器方法2this.intervalId = setInterval(()=>{var start = this.msg.substring(0,1) //獲取到頭的第一個字符var end = this.msg.substring(1) //獲取到后面的所有字符this.msg = end + start //重新拼接得到新的字符串，并賦值給 this.msg },400)},stop(){ //停止定時器clearInterval(this.intervalId)this.intervalId = null; //結(jié)束后重新定義為null }}})</script> </body> </html>渲染圖：
?
2.簡單計(jì)數(shù)器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script> </head> <body><div id="app"><input type="text" v-model = "n1"><select name="" id="" v-model = "opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2"><input type="button" value="=" @click = "calc"><input type="text" v-model = "result"></div> <script>var vm = new Vue({el:"#app",data:{n1:0,n2:0,result:0,opt:'+',},methods:{calc(){ //計(jì)算器計(jì)數(shù)的方法// switch(this.opt){// case '+':// this.result = parseInt(this.n1) + parseInt(this.n2)// break// case '-':// this.result = parseInt(this.n1) - parseInt(this.n2)// break// case '*':// this.result = parseInt(this.n1) * parseInt(this.n2)// break// case '/':// this.result = parseInt(this.n1) / parseInt(this.n2)// break// }//投機(jī)取巧方式：少用var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'this.result = eval(codeStr)}}}) </script> </body> </html>渲染圖：
?3.品牌案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label for="">id:<input type="text" class="form-control" v-model="id"></label><label for="">name:<input type="text" class="form-control" v-model="name"></label><label for="">搜索關(guān)鍵字:<input type="text" class="form-control" v-model="keywords"></label><input type="button" value="添加" class="btn btn-primary" @click="add"></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>id</th><th>name</th><th>ctime</th><th>operation</th></tr></thead><tbody><!--搜索關(guān)鍵詞：使用自定義search方法--><tr v-for="item in search(keywords)" :key="item.id"><td>{{item.id}}</td><td v-text="item.name"></td><td>{{item.ctime}}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table></div> </body> <script>var vm = new Vue({el:'#app',data:{id:'',name:'',keywords:'',list:[{id:1,name:'奔馳',ctime:new Date()},{id:2,name:'寶馬',ctime:new Date()},{id:3,name:'大眾',ctime:new Date()},]},methods:{add(){//分析://1.獲取到id和name，直接從data上獲取//2.組織出一個對象//3.吧這個對象，調(diào)用數(shù)組的相關(guān)方法，添加到當(dāng)前data上的list中//4.注意：在Vue中，已經(jīng)實(shí)現(xiàn)了雙向綁定，每當(dāng)更新數(shù)據(jù)都會在頁面上渲染更新。//5.當(dāng)我們意識到里面的第四步時，就入門vue了，更多的是在model數(shù)據(jù)的操作，同時，指定業(yè)務(wù)邏輯數(shù)據(jù)操作var car ={id:this.id,name:this.name,ctime:new Date()}this.list.push(car)this.id = this.name = ''},del(id){//分析：//1.如何根據(jù)id，找到要刪除這一項(xiàng)的索引//2.找到后，直接調(diào)用數(shù)組的splice方法//通過some方法來查找id并刪除// this.list.some((item,i)=>{// if(item.id == id){// this.list.splice(i,1)// return true;// }// })//通過findindex()來查找索引并刪除var index = this.list.findIndex(item =>{if(item.id == id){return true;}})// console.log(index)this.list.splice(index,1 )},search(keywords){// var newList=[]// this.list.forEach(item=>{// if(item.name.indexOf(keywords)!= -1){// newList.push(item)// }// })// return newList//注意：forEach、some、filter、findindex 都會對數(shù)組中的每一項(xiàng)進(jìn)行遍歷return this.list.filter(item=>{if(item.name.includes(keywords)){return item}})}},})//過濾器的定義語法//Vue.filter('過濾器的名稱',function(){}) </script> </html>實(shí)現(xiàn)功能：
添加，刪除，查詢
?
4.過濾器的基本使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script> </head> <body> <div id="app"><p>{{msg|msgFormat('瘋狂','123') |text}}</p> </div> <script>Vue.filter('msgFormat',function (msg,arg1,arg2) {// return msg.replace('單純',arg)return msg.replace(/單純/g,arg1+arg2)})Vue.filter('text',function (msg) {return msg+ '============='})var vm = new Vue({el:'#app',data:{msg:'曾經(jīng)，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'},methods:{},}) </script> </body> </html>實(shí)現(xiàn)如下：
?5.全局過濾器和私有過濾器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label for="">id:<input type="text" class="form-control" v-model="id"></label><label for="">name:<input type="text" class="form-control" v-model="name"></label><label for="">搜索關(guān)鍵字:<input type="text" class="form-control" v-model="keywords"></label><input type="button" value="添加" class="btn btn-primary" @click="add"></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>id</th><th>name</th><th>ctime</th><th>operation</th></tr></thead><tbody><!--搜索關(guān)鍵詞：使用自定義search方法--><tr v-for="item in search(keywords)" :key="item.id"><td>{{item.id}}</td><td v-text="item.name"></td><td>{{item.ctime | dateFormat('')}}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table></div><div id="app2"><h3>{{dt | dateFormat}}</h3></div></body> <script>//全局過濾器Vue.filter('dateFormat',function (dateStr,pattern="") {var dt = new Date(dateStr);var y = dt.getFullYear().toString().padStart(2,'0');var m = (dt.getMonth() + 1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');// return y+ '-' + m + '-' +d// return `${y}-${m}-$ozvdkddzhkzd`if (pattern & pattern.toLowerCase() === 'yyyy-mm-dd'){return `${y}-${m}-$ozvdkddzhkzd`}else{var hh = dt.getHours().toString().padStart(2,'0')var mm = dt.getMinutes().toString().padStart(2,'0')var ss = dt.getSeconds().toString().padStart(2,'0')return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}`}})var vm = new Vue({el:'#app',data:{id:'',name:'',keywords:'',list:[{id:1,name:'奔馳',ctime:new Date()},{id:2,name:'寶馬',ctime:new Date()},{id:3,name:'大眾',ctime:new Date()},]},methods:{add(){//分析://1.獲取到id和name，直接從data上獲取//2.組織出一個對象//3.吧這個對象，調(diào)用數(shù)組的相關(guān)方法，添加到當(dāng)前data上的list中//4.注意：在Vue中，已經(jīng)實(shí)現(xiàn)了雙向綁定，每當(dāng)更新數(shù)據(jù)都會在頁面上渲染更新。//5.當(dāng)我們意識到里面的第四步時，就入門vue了，更多的是在model數(shù)據(jù)的操作，同時，指定業(yè)務(wù)邏輯數(shù)據(jù)操作var car ={id:this.id,name:this.name,ctime:new Date()}this.list.push(car)this.id = this.name = ''},del(id){//分析：//1.如何根據(jù)id，找到要刪除這一項(xiàng)的索引//2.找到后，直接調(diào)用數(shù)組的splice方法//通過some方法來查找id并刪除// this.list.some((item,i)=>{// if(item.id == id){// this.list.splice(i,1)// return true;// }// })//通過findindex()來查找索引并刪除var index = this.list.findIndex(item =>{if(item.id == id){return true;}})// console.log(index)this.list.splice(index,1 )},search(keywords){// var newList=[]// this.list.forEach(item=>{// if(item.name.indexOf(keywords)!= -1){// newList.push(item)// }// })// return newList//注意：forEach、some、filter、findindex 都會對數(shù)組中的每一項(xiàng)進(jìn)行遍歷return this.list.filter(item=>{if(item.name.includes(keywords)){return item}})}},})var vm2 = new Vue({el:'#app2',data:{dt:new Date()},methods:{},filters:{//定義私有過濾器，過濾器有兩個條件：過濾器名稱和處理函數(shù),全局和私有同名，就近原則，先使用私有過濾器dateFormat:function (dateStr,pattern = '') {var dt = new Date(dateStr);var y = dt.getFullYear().toString().padStart(2,'0');var m = (dt.getMonth() + 1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');return y+ '-' + m + '-' +d}},}) </script> </html>?
實(shí)現(xiàn)效果：
?
6.自定義按鍵修飾符和獲取焦點(diǎn)
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label for="">id:<input type="text" class="form-control" v-model="id"></label><label for="">name:<input type="text" class="form-control" v-model="name" @keyup.f2="add"></label><label for="">搜索關(guān)鍵字:<!--注意：vue所有的指令，在調(diào)用的時候都以v-開頭。。。--><input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'red'"></label><input type="button" value="添加" class="btn btn-primary" @click="add"></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>id</th><th>name</th><th>ctime</th><th>operation</th></tr></thead><tbody><!--搜索關(guān)鍵詞：使用自定義search方法--><tr v-for="item in search(keywords)" :key="item.id"><td>{{item.id}}</td><td v-text="item.name"></td><td>{{item.ctime | dateFormat('')}}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table></div><div id="app2"><h3>{{dt | dateFormat}}</h3></div></body> <script>//全局過濾器Vue.filter('dateFormat',function (dateStr,pattern="") {var dt = new Date(dateStr);var y = dt.getFullYear().toString().padStart(2,'0');var m = (dt.getMonth() + 1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');// return y+ '-' + m + '-' +d// return `${y}-${m}-$ozvdkddzhkzd`if (pattern & pattern.toLowerCase() === 'yyyy-mm-dd'){return `${y}-${m}-$ozvdkddzhkzd`}else{var hh = dt.getHours().toString().padStart(2,'0')var mm = dt.getMinutes().toString().padStart(2,'0')var ss = dt.getSeconds().toString().padStart(2,'0')return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}`}})//自定義全局按鍵修飾符Vue.config.keyCodes.f2 = 113// document.getElementById('search').focus()//使用Vue.directive() 定義全局指令//其中：參數(shù)1：指令的名稱，注意：在定義的時候指令的名稱不需要加v-//參數(shù)2：是一個鉤子函數(shù)，可以增加相關(guān)的操作Vue.directive('focus',{bind:function(el){//每當(dāng)指令綁定到元素上的時候，會立即執(zhí)行這個bind函數(shù)只執(zhí)行一次//注意：每個函數(shù)中，第一個參數(shù)永遠(yuǎn)是el，el是原生js的對象//一個元素只有插入dom之后，才能獲取焦點(diǎn)// el.focus() },inserted:function(el){//inseted表示元素插入到dom中時候，會執(zhí)行inserted函數(shù)觸發(fā)1次 el.focus()},updated:function(el){//當(dāng)vnode更新的時候，會執(zhí)行updated，可能會觸發(fā)多次 },})Vue.directive('color',{bind:function (el,binding) {el.style.color = binding.value}})var vm = new Vue({el:'#app',data:{id:'',name:'',keywords:'',list:[{id:1,name:'奔馳',ctime:new Date()},{id:2,name:'寶馬',ctime:new Date()},{id:3,name:'大眾',ctime:new Date()},]},methods:{add(){//分析://1.獲取到id和name，直接從data上獲取//2.組織出一個對象//3.吧這個對象，調(diào)用數(shù)組的相關(guān)方法，添加到當(dāng)前data上的list中//4.注意：在Vue中，已經(jīng)實(shí)現(xiàn)了雙向綁定，每當(dāng)更新數(shù)據(jù)都會在頁面上渲染更新。//5.當(dāng)我們意識到里面的第四步時，就入門vue了，更多的是在model數(shù)據(jù)的操作，同時，指定業(yè)務(wù)邏輯數(shù)據(jù)操作var car ={id:this.id,name:this.name,ctime:new Date()}this.list.push(car)this.id = this.name = ''},del(id){//分析：//1.如何根據(jù)id，找到要刪除這一項(xiàng)的索引//2.找到后，直接調(diào)用數(shù)組的splice方法//通過some方法來查找id并刪除// this.list.some((item,i)=>{// if(item.id == id){// this.list.splice(i,1)// return true;// }// })//通過findindex()來查找索引并刪除var index = this.list.findIndex(item =>{if(item.id == id){return true;}})// console.log(index)this.list.splice(index,1 )},search(keywords){// var newList=[]// this.list.forEach(item=>{// if(item.name.indexOf(keywords)!= -1){// newList.push(item)// }// })// return newList//注意：forEach、some、filter、findindex 都會對數(shù)組中的每一項(xiàng)進(jìn)行遍歷return this.list.filter(item=>{if(item.name.includes(keywords)){return item}})}},})var vm2 = new Vue({el:'#app2',data:{dt:new Date()},methods:{},filters:{//定義私有過濾器，過濾器有兩個條件：過濾器名稱和處理函數(shù),全局和私有同名，就近原則，先使用私有過濾器dateFormat:function (dateStr,pattern = '') {var dt = new Date(dateStr);var y = dt.getFullYear().toString().padStart(2,'0');var m = (dt.getMonth() + 1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');return y+ '-' + m + '-' +d}},})</script> </html>?
7.結(jié)合node手寫JSONP服務(wù)器
node.js
const http = require('http') //1.導(dǎo)入http內(nèi)置模塊 const urlModule = require('url') //2.這個核心模塊，可以解析url地址，從而拿到pathname const server = http.createServer() // 3.創(chuàng)建一個http服務(wù)器 server.on('request',function (req,res) { //4.監(jiān)聽http服務(wù)器的request請求// const url = req.urlconst{pathname:url,query} = urlModule.parse(req.rul,true)if (url === '/getscript'){// var scriptStr = 'show()'var data = {name:'zxc',age:18,gender:'male'}var scriptStr = `${query.callback}(${JSON.stringify(data)})`res.end(scriptStr)}else{res.end('404')} })?
http客戶端:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>function showInfo123(data) {console.log(data)} </script><script src="http://127.0.0.1:30000/getscript?callback=showInfo123"></script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/zhongbokun/p/11402084.html
總結(jié)
- 上一篇： 行为型模式之责任链模式
- 下一篇： vue修改计算属性的值_vue之计算属性