當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue学习（入门实例、常用指令）-学习笔记

發(fā)布時(shí)間：2024/1/23 vue 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue学习（入门实例、常用指令）-学习笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- Vue學(xué)習(xí)（入門實(shí)例、常用指令）-學(xué)習(xí)筆記
- - 實(shí)例
  - 常用指令
  - - v-on
    - v-bind
    - v-for
    - v-html
    - v-if
    - event
    - v-model
    - 雙向數(shù)據(jù)綁定實(shí)現(xiàn) - defineProperty
  - 例子

Vue學(xué)習(xí)（入門實(shí)例、常用指令）-學(xué)習(xí)筆記

實(shí)例

<!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>VUE</title><link rel="stylesheet" type="text/css" href="bootstrap.css"/><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript" src='js/axios.js'></script><script type="text/javascript" src='js/index.js'></script> </head> <body><div id="my" ><div class="panel panel-info" style="margin:20px;"><div class="panel-heading"><h1 style="display: inline-block;">我的購物清單列表</h1><span>清單總數(shù)<span class="label label-warning" >{{lists.length}}</span></span></div><div class="panel-body"><div class="input-group"><input class="form-control" type="text" v-model="name"/> <span class="input-group-btn"><button class="btn btn-primary" @click="add" :disabled="!name">添加</button></span></div><table class="table table-striped"><thead><tr><th>清單名稱</th><th>狀態(tài)</th><th>刪除</th></tr></thead><tbody><tr v-for="(list,i) in lists"><td>{{list.name}}</td><td>{{list.state | stateFilter}}</td><td><button type="button" class="btn btn-danger btn-sm" @click="del(i)">刪除</button></td></tr></tbody></table></div></div></div> </body> </html> window.onload = function(){new Vue({el:"#my",data:{name:'', //添加的表單值lists:[{name:'手機(jī)',state:'0'},{name:'電腦',state:'1'},{name:'包包',state:'2'},{name:'衣服',state:'1'}]},methods:{add:function(){ //添加//判斷是否為空if(!this.name) return;this.lists.unshift({name:this.name,state:'0'});this.name = ''; //清除},del:function(i){ //刪除this.lists.splice(i,1); //i表示位置 1個(gè)數(shù)}},filters:{ //過濾器stateFilter:function(d){ //{{list.state | stateFilter}} d=list.state // if(d){// return '已采購'// }else {// return '未采購'// }switch(d){case '0':return '未采購';case '1':return '采購中';case '2':return '已采購';default:return d;}}}}) }

常用指令

v-on

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{age:20},methods:{action1:function(){this.age=100},action2:function(i){this.age=i}}})}</script><style></style> </head> <body><div id="my"><h1>{{age}}</h1><button v-on:click="age=25">click</button><button @click="action1">click2</button><button @click="action2(30)">click3</button><button @dblclick="action2(30)">dblclick</button><button @mouseover="action2(50)" @mouseout="action2(80)">移入/移出</button><button @keydown.enter="action2(20)">keydown</button><button @keydown.a="action2(20)">keydown</button><button @keydown.ctrl.67="action2(20)">keydown</button><button @keydown.ctrl.c="action2(20)">keydown</button></div> </body> </html>

v-bind

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{d1:'d1',d2:'d2',check:true, //復(fù)選框backgreen:{background:'green'},blue:{color:'blue'},red:'red',url:'https://www.baidu.com/img/bd_logo1.png'},methods:{action:function(){return 'green'},}})}</script><style>.d1{color:#f00;}.d2{border:1px solid #666;}.green{color:green;}.blue {color:blue;}</style> </head> <body><div id="my"><div class="d1">紅色</div><div v-bind:class="'d1'">紅色</div><div :class="d1">紅色</div><div :class="['d1','d2']">紅色</div><div :class="[d1,d2]">紅色</div><div :class="[d1,check?d2:'blue']">紅色</div><input type="checkbox" v-model="check" />{{check}}<div :class="check ? d1 :'blue'">紅色</div><div :class="{'blue':check}">紅色</div><div :class="{blue:check}">紅色</div><div :class="action()">function</div><div style="color:red">紅色</div><div style="color:#f00">紅色</div><div :style="backgreen">紅色</div><div :style="{background:'#f60',fontSize:'30px',marginTop:'20px'}">紅色</div><div :style="{background:red}">紅色</div><div :style="{background:'blue'}">紅色</div><div :style="[backgreen,blue]">紅色</div><div :style="[backgreen,check?blue:{background:'#f60'}]">紅色</div><img :src="url" /></div> </body> </html>

v-for

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{arr:['a','b','c','d'],obj:{id:1,name:'abc'},num:10,items:[{name:'a',age:20},{name:'b',age:30},{name:'c',age:40},]},methods:{action1:function(){this.age=100},action2:function(i){this.age=i}}})}</script><style></style> </head> <body><div id="my"><h1>{{age}}</h1><ul><li v-for="(v,i) in arr" :key="i">{{v}}===={{i}}</li></ul><ul><li v-for="v in arr" :key="i">{{v}}</li></ul><ul><li v-for="(v,i) in items" :key="i">{{v.name}}===={{v.age}}</li></ul><ul><li v-for="(v,k) in obj" :key="k">{{v}}===={{k}}</li></ul><ul><li v-for="(v,i) in num" :key="i">{{v}}===={{i}}</li></ul></div> </body> </html>

v-html

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{msg:'hello world',html:'<p>hello</p>'}})}</script><style>[v-cloak] {display:none;}</style> </head> <body><div id="my"><h1 v-cloak>{{msg}}</h1><h1 v-text="msg"></h1><h1 v-html="html"></h1></div> </body> </html>

v-if

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{flag:true,age:26},methods:{}})}</script><style></style> </head> <body><div id="my"><h1 v-if="age>=18">成年嘍</h1><h1 v-else-if="age>=25">25歲了</h1><h1 v-else>30歲了</h1><h1 v-if="flag?age=20:age=30">30歲了</h1></div> </body> </html>

event

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{flag:true,age:26,name:'簽到'},methods:{change1(){this.age=1;console.log(this.age);},change2(){this.age=2;console.log(this.age);},change3(e){//e.stopPropagation(); //阻止事件冒泡this.age=3;console.log(this.age);},go(e){//e.preventDefault(); //取消事件的默認(rèn)動(dòng)作console.log('go');},once(){this.name = '已簽到';console.log('once');}}})}</script><style></style> </head> <body><div id="my"><div @click="change1()">d1<div @click="change2()">d2<button @click="change3($event)">d3</button><button @click.stop="change3()">d3</button></div><a href="http://www.baidu.com" @click="go($event)">go</a><a href="http://www.baidu.com" @click.prevent.stop="go()">go</a></div><button @click.once="once()">{{name}}</button></div> </body> </html>

v-model

<!DOCTYPE html> <html> <head><title></title><script src="vue.js"></script> <script>window.onload=function(){new Vue({el:"#my",data:{value:'hello world',flag:false,flag1:['火龍果','香焦'], //復(fù)選框多個(gè)flag2:['0'],lists:[{title:'管理者',i:0},{title:'產(chǎn)品經(jīng)理',i:1},{title:'開發(fā)者',i:2}],radio1:'0', //單選框radio2:'0', //單選框select1:'香焦',//下拉框select2:'1',//下拉框}})}</script><style>[v-cloak] {display:none;}</style> </head> <body><div id="my"><h1>輸入框</h1><input type="text" :disabled="value>=100" v-model="value" /> {{value}}<h1>復(fù)選框</h1><div><input type="checkbox" v-model="flag" /> {{flag}}</div><div><input type="checkbox" v-model="flag1" value="蘋果"/>蘋果<input type="checkbox" v-model="flag1" value="芒果"/>芒果<input type="checkbox" v-model="flag1" value="火龍果"/>火龍果<input type="checkbox" v-model="flag1" value="香焦"/>香焦<p>獲取的值：{{flag1}}</p></div><div><input type="checkbox" v-model="flag2" value="0"/>蘋果<input type="checkbox" v-model="flag2" value="1"/>芒果<input type="checkbox" v-model="flag2" value="2"/>火龍果<input type="checkbox" v-model="flag2" value="3"/>香焦<p>獲取的值：{{flag2}}</p></div><div v-for="(v,index) in lists" :key="v.i"><input type="checkbox" v-model="flag2" :value="v.i"/>{{v.title}}</div><p>獲取的值：{{flag2}}</p><h1>單選框</h1><div><input type="radio" v-model="radio1" value="0"/>{{radio1}}</div><div><input type="radio" name="radio" v-model="radio2" value="0"/>男<input type="radio" name="radio" v-model="radio2" value="1"/>女<p>獲取的值：{{radio2}}</p></div><h1>下拉框</h1><div><select v-model="select1"><option>蘋果</option><option>火龍果</option><option>香焦</option></select><p>獲取的值：{{select1}}</p></div><div><select v-model="select2"><option value='0'>蘋果</option><option value='1'>火龍果</option><option value='2'>香焦</option></select><p>獲取的值：{{select2}}</p></div><div><select v-model="select2"><option v-for="(v,index) in lists" :key="v.i" :value='v.i'>{{v.title}}</option></select><p>獲取的值：{{select2}}</p></div><input type="text" v-model.lazy="value" /> {{value}}<input type="text" v-model.trim="value" /> {{value}}<input type="number" v-model.number="value" /> {{value}}</div> </body> </html>

雙向數(shù)據(jù)綁定實(shí)現(xiàn) - defineProperty

<!DOCTYPE html> <html> <head><title></title><script>window.onload=function(){//Object.defineProperty(obj,prop,des); //動(dòng)態(tài)添加屬性//添加一個(gè)屬性// var obj = {};// Object.defineProperty(obj,'name',{// value:'abc',// writable:true //表示屬性值是否可以修改 true可以修改// });//添加多個(gè)屬性// var obj = {};// Object.defineProperties(obj,{// 'name':{// value:'abc',// writable:true // },// 'age':{// value:20,// writable:false // }// });// console.log(obj)//存取方法 getter settervar obj = {};var n = 100;Object.defineProperty(obj,'name',{get:function(){return n;},set:function(value){n = value;}});//obj.name=200; //對象的值改變時(shí) 觸發(fā)set document.querySelector("#input").onkeyup = function(e){obj.name = e.target.value;document.querySelector("#span").innerHTML = obj.name;}}</script><style></style> </head> <body><div id="my"><input type="text" id="input" /><p>輸出：<span id="span"></span></p></div> </body> </html>

例子

<!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>用戶列表checkbox選項(xiàng)操作（全選）</title><link rel="stylesheet" type="text/css" href="css/index.css"><script src='js/vue.js'></script><script src='js/axios.js'></script><script src='js/index.js'></script> </head> <body><div id='demo'><table class="table"> <thead><tr ><th><input type="checkbox" v-model="checkAll" @change="checkChange"/>{{checkAll}}</th><th>用戶姓名</th><th>用戶性別</th><th>所在城市</th><th>操作</th></tr></thead><tbody><tr v-for="(v,i) in lists" :key="i"><th><input type="checkbox" v-model="v.check" @change="curCheckChange"></th><td>{{v.name}}</td><td>{{v.sex}}</td><td>{{v.city}}</td><td><button disabled="true">刪除</button></td></tr></tbody></table></div></body> </html> window.onload = function(){new Vue({el:'#demo',data:{checkAll:false, //全選lists:[{name:'張三1',sex:'男',city:'北京1',check:true},{name:'張三2',sex:'女',city:'北京2',check:false},{name:'張三3',sex:'男',city:'北京3',check:false},{name:'張三4',sex:'男',city:'北京4',check:false},{name:'張三5',sex:'女',city:'北京5',check:false},{name:'張三6',sex:'男',city:'北京6',check:false},{name:'張三7',sex:'男',city:'北京7',check:true},]},methods:{checkChange(){ //全選的狀態(tài)改變this.lists.forEach(item=>{item.check = this.checkAll})},curCheckChange(){ //當(dāng)前//當(dāng)前選中的狀態(tài)// var num = this.lists.filter(item=>item.check).length;//console.log(num);//num==this.lists.length ? this.checkAll = true : this.checkAll = false;//every() 檢測數(shù)組中的元素是否符合條件，都滿足，返回true, 只要有一個(gè)沒有滿足，返回falsethis.checkAll = this.lists.every(item=>item.check);}}}) } ul {list-style-type:none; } .table{width: 70%;border-collapse: collapse;margin: 0 auto;text-align: center; } .table td, .table th{border: 1px solid #ddd;padding: 10px; } .table thead tr {background:#1f76b3;color:#fff; }

總結(jié)

以上是生活随笔為你收集整理的Vue学习（入门实例、常用指令）-学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Vue学习（MVVM、入门练习）-学习笔
下一篇： Vue学习（常用实例、脚手架搭建）-学习