當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue的示例

發布時間：2025/3/15 vue 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue的示例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

示例目錄：

　　1.跑馬燈效果

　　2.簡單計數器

　　3.品牌案例（添加、刪除、搜索）

　　4.過濾器的基本使用

　　5.全局過濾器與自定義過濾器

　　6.自定義按鍵修飾符和獲取焦點

　　7.結合node手寫JSONP服務器

1.跑馬燈效果

?代碼如下：

<!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="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，是的開始計時，不是就返回//定時器方法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; //結束后重新定義為null }}})</script> </body> </html>

渲染圖：

2.簡單計數器

<!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(){ //計算器計數的方法// 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// }//投機取巧方式：少用var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'this.result = eval(codeStr)}}}) </script> </body> </html>

渲染圖：

?3.品牌案例

實現功能：

添加，刪除，查詢

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:'曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'},methods:{},}) </script> </body> </html>

實現如下：

?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="">搜索關鍵字:<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><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.吧這個對象，調用數組的相關方法，添加到當前data上的list中//4.注意：在Vue中，已經實現了雙向綁定，每當更新數據都會在頁面上渲染更新。//5.當我們意識到里面的第四步時，就入門vue了，更多的是在model數據的操作，同時，指定業務邏輯數據操作var car ={id:this.id,name:this.name,ctime:new Date()}this.list.push(car)this.id = this.name = ''},del(id){//分析：//1.如何根據id，找到要刪除這一項的索引//2.找到后，直接調用數組的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 都會對數組中的每一項進行遍歷return this.list.filter(item=>{if(item.name.includes(keywords)){return item}})}},})var vm2 = new Vue({el:'#app2',data:{dt:new Date()},methods:{},filters:{//定義私有過濾器，過濾器有兩個條件：過濾器名稱和處理函數,全局和私有同名，就近原則，先使用私有過濾器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>

實現效果：

6.自定義按鍵修飾符和獲取焦點

<!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="">搜索關鍵字:<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><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() 定義全局指令//其中：參數1：指令的名稱，注意：在定義的時候指令的名稱不需要加v-//參數2：是一個鉤子函數，可以增加相關的操作Vue.directive('focus',{bind:function(el){//每當指令綁定到元素上的時候，會立即執行這個bind函數只執行一次//注意：每個函數中，第一個參數永遠是el，el是原生js的對象//一個元素只有插入dom之后，才能獲取焦點// el.focus() },inserted:function(el){//inseted表示元素插入到dom中時候，會執行inserted函數觸發1次 el.focus()},updated:function(el){//當vnode更新的時候，會執行updated，可能會觸發多次 },})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.吧這個對象，調用數組的相關方法，添加到當前data上的list中//4.注意：在Vue中，已經實現了雙向綁定，每當更新數據都會在頁面上渲染更新。//5.當我們意識到里面的第四步時，就入門vue了，更多的是在model數據的操作，同時，指定業務邏輯數據操作var car ={id:this.id,name:this.name,ctime:new Date()}this.list.push(car)this.id = this.name = ''},del(id){//分析：//1.如何根據id，找到要刪除這一項的索引//2.找到后，直接調用數組的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 都會對數組中的每一項進行遍歷return this.list.filter(item=>{if(item.name.includes(keywords)){return item}})}},})var vm2 = new Vue({el:'#app2',data:{dt:new Date()},methods:{},filters:{//定義私有過濾器，過濾器有兩個條件：過濾器名稱和處理函數,全局和私有同名，就近原則，先使用私有過濾器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.結合node手寫JSONP服務器

node.js

const http = require('http') //1.導入http內置模塊 const urlModule = require('url') //2.這個核心模塊，可以解析url地址，從而拿到pathname const server = http.createServer() // 3.創建一個http服務器 server.on('request',function (req,res) { //4.監聽http服務器的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>

轉載于:https://www.cnblogs.com/zhongbokun/p/11402084.html

總結

以上是生活随笔為你收集整理的Vue的示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

示例
Vue

上一篇：行为型模式之责任链模式
下一篇： html5倒计时秒杀怎么做,vue 设