vue常用指令程式碼例項總結
阿新 • • 發佈：2020-03-18
vue常用內建指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_指令_內建指令</title>
<style>
[v-cloak] { display: none }
</style>
</head>
<body>
<!--
常用內建指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果為true,當前標籤才會輸出到頁面
v-else: 如果為false,當前標籤才會輸出到頁面
v-show : 通過控制display樣式來控制顯示/隱藏
v-for : 遍歷陣列/物件
v-on : 繫結事件監聽,一般簡寫為@
v-bind : 強制繫結解析表示式,可以省略v-bind
v-model : 雙向資料繫結
ref : 為某個元素註冊一個唯一標識,vue物件通過$refs屬性訪問這個元素物件
v-cloak : 使用它防止閃現表示式,與css配合: [v-cloak] { display: none }
-->
<div id="example">
<p v-cloak>{{content}}</p>
<p v-text="content"></p> <!--p.textContent = content-->
<p v-html="content"></p> <!--p.innerHTML = content-->
<p ref="msg">abcd</p>
<button @click="hint">提示</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',data: {
content: '<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >百度一下</a>'
},methods: {
hint () {
alert(this.$refs.msg.innerHTML)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 資料繫結 -->
<a v-bind:href="url" rel="external nofollow" >百度一下</a>
<!-- 雙向資料繫結 -->
<input type="text" v-model="name">
<p>{{name}}</p>
<!-- 繫結回車鍵 -->
<input type="text" @keyup.enter="showEnt">
<!-- 點選事件 -->
<button @click="show('888')">按鈕</button>
<!-- 獲取陣列值 -->
<p>{{arr[1]}}</p>
<!-- 獲取物件屬性 -->
<p>{{users[1].name}}</p>
</div>
<script>
var app = new Vue({
el: "#app",data: {
name:'',url: 'http://www.baidu.com',arr: ["a","b","c","d"],users: [
{ name: "aowei",age: 12 },{ name: "baozi",age: 13 },{ name: "bbbbb",age: 14 },]
},methods: {
// 繫結回車鍵
showEnt: function () {
alert("666");
},// 傳參
show: function (num) {
alert(num);
}
},}
)
</script>
</body>
</html>計算屬性和監視
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_計算屬性和監視</title>
</head>
<body>
<!--
1. 計算屬性
在computed屬性物件中定義計算屬性的方法
在頁面中使用{{方法名}}來顯示計算的結果
2. 監視屬性:
通過通過vm物件的$watch()或watch配置來監視指定的屬性
當屬性變化時,回撥函式自動呼叫,在函式內部進行計算
3. 計算屬性高階:
通過getter/setter實現對屬性資料的顯示和監視
計算屬性存在快取,多次讀取只執行一次getter計算
-->
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根據fistName和lastName計算產生-->
姓名1(單向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(單向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(雙向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',data: {
firstName: 'A',lastName: 'B',fullName2: 'A-B'
},// 計算屬性配置: 值為物件
computed: {
fullName1:function() { // 屬性的get()
return this.firstName + '-' + this.lastName;
},fullName3: {
// 當獲取當前屬性值時自動呼叫,將返回值(根據相關的其它屬性資料)作為屬性值
get () {
return this.firstName + '-' + this.lastName
},// 當屬性值發生了改變時自動呼叫,監視當前屬性值變化,同步更新相關的其它屬性值
set (value) {// fullName3的最新value值 A-B23
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},watch: {
// 配置監視firstName
firstName: function (value) { // 相當於屬性的set
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
})
// 監視lastName
vm.$watch('lastName',function (value) {
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
</script>
</body>
</html>列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for='item in arr'>
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in arr">
{{index}} --- {{item}}
</li>
</ul>
<h3 v-for="user in users" v-bind:title="user.name">
{{user.name}} --- {{user.age}}
</h3>
<button @click="add">add按鈕</button>
<button @click="del">del按鈕</button>
</div>
<script>
var app = new Vue({
el: "#app",data: {
arr: ["a",methods: {
add: function () {
console.log("add");
this.users.push({ name: "hello",age: "3" });
},del: function () {
console.log("del");
this.users.shift();
}
},}
)
</script>
</body>
</html>
class & style 繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_class與style繫結</title>
<style>
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
</style>
</head>
<body>
<!--
1. 理解
在應用介面中,某個(些)元素的樣式是變化的
class/style繫結就是專門用來實現動態樣式效果的技術
2. class繫結: :class='xxx'
xxx是字串
xxx是物件
xxx是陣列
3. style繫結
:style="{ color: activeColor,fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data屬性
-->
<div id="demo">
<h2>1. class繫結: :class='xxx'</h2>
<p :class="myClass">xxx是字串</p>
<p :class="{classA: hasClassA,classB: hasClassB}">xxx是物件</p>
<p :class="['classA','classB']">xxx是陣列</p>
<h2>2. style繫結</h2>
<p :style="{color:activeColor,fontSize}">:style="{ color: activeColor,fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',data: {
myClass: 'classA',hasClassA: true,hasClassB: false,activeColor: 'red',fontSize: '20px'
},methods: {
update () {
this.myClass = 'classB'
this.hasClassA = !this.hasClassA
this.hasClassB = !this.hasClassB
this.activeColor = 'yellow'
this.fontSize = '30px'
}
}
})
</script>
</body>
</html>
條件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_條件渲染</title>
</head>
<body>
<!--
1. 條件渲染指令
v-if
v-else
v-show
2. 比較v-if與v-show
如果需要頻繁切換 v-show 較好
-->
<div id="demo">
<p v-if="ok">表白成功</p>
<p v-else>表白失敗</p>
<hr>
<p v-show="ok">求婚成功</p>
<p v-show="!ok">求婚失敗</p>
<button @click="ok=!ok">切換</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',data: {
ok: true,}
})
</script>
</body>
</html>
事件處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_事件處理</title>
</head>
<body>
<!--
1. 繫結監聽:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(引數)"
預設事件形參: event
隱含屬性物件: $event
2. 事件修飾符:
.prevent : 阻止事件的預設行為 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
3. 按鍵修飾符
.keycode : 操作的是某個keycode值的健
.enter : 操作的是enter鍵
-->
<div id="example">
<h2>1. 繫結監聽</h2>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('abcd',$event)">test3</button>
<h2>2. 事件修飾符</h2>
<!-- 阻止事件預設行為 -->
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="test4">百度一下</a>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
<!-- 阻止事件冒泡 -->
</div>
<h2>3. 按鍵修飾符</h2>
<!-- enter鍵/13 -->
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',data: {
},methods: {
test1(event) {
alert(event.target.innerHTML)
},test2 (msg) {
alert(msg)
},test3 (msg,event) {
alert(msg+'---'+event.target.textContent)
},test4 () {
alert('點選了連結')
},test5 () {
alert('out')
},test6 () {
alert('inner')
},test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
})
</script>
</body>
</html>
表單資料繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_表單輸入繫結</title>
</head>
<body>
<!--
1. 使用v-model(雙向資料繫結)自動收集資料
text/textarea
checkbox
radio
select
-->
<div id="demo">
<!-- 阻止表單自動提交，手動ajax提交 -->
<form action="/xxx" @submit.prevent="handleSubmit">
<span>使用者名稱: </span>
<input type="text" v-model="username"><br>
<span>密碼: </span>
<input type="password" v-model="pwd"><br>
<span>性別: </span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br>
<span>愛好: </span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">籃球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="cityId">
<option value="">未選擇</option>
<option :value="city.id" v-for="(city,index) in allCitys" :key="city.id">{{city.name}}</option>
</select><br>
<span>介紹: </span>
<textarea rows="10" v-model="info"></textarea><br><br>
<input type="submit" value="註冊">
</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',data: {
username: '',pwd: '',sex: '男',likes: ['foot'],allCitys: [{id: 1,name: 'BJ'},{id: 2,name: 'SS'},{id: 3,name: 'SZ'}],cityId: '2',info: ''
},methods: {
handleSubmit () {
console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.info)
alert('提交註冊的ajax請求')
}
}
})
</script>
</body>
</html>
生命週期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_Vue例項_生命週期</title>
</head>
<body>
<!--
1. vue物件的生命週期
1). 初始化顯示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新狀態
* beforeUpdate()
* updated()
3). 銷燬vue例項: vm.$destory()
* beforeDestory()
* destoryed()
2. 常用的生命週期方法
created()/mounted(): 傳送ajax請求,啟動定時器等非同步任務
beforeDestory(): 做收尾工作,如: 清除定時器
-->
<div id="test">
<button @click="destroyVue">destory vue</button>
<p v-if="isShow">尚矽谷IT教育</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',data: {
isShow: true
},beforeCreate() {
console.log('beforeCreate()')
},created() {
console.log('created()')
},beforeMount() {
console.log('beforeMount()')
},mounted () {
console.log('mounted()')
// 執行非同步任務
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
},1000)
},beforeUpdate() {
console.log('beforeUpdate()')
},updated () {
console.log('updated()')
},beforeDestroy() {
console.log('beforeDestroy()')
// 執行收尾的工作
clearInterval(this.intervalId)
},destroyed() {
console.log('destroyed()')
},methods: {
destroyVue () {
this.$destroy()
}
}
})
</script>
</body>
</html>
過渡，動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10_過渡&動畫1</title>
<style>
/*指定過渡樣式*/
.xxx-enter-active,.xxx-leave-active {
transition: opacity 1s
}
/*指定隱藏時的樣式*/
.xxx-enter,.xxx-leave-to {
opacity: 0;
}
.move-enter-active {
transition: all 1s
}
.move-leave-active {
transition: all 3s
}
.move-enter,.move-leave-to {
opacity: 0;
transform: translateX(20px)
}
</style>
</head>
<body>
<!--
1. vue動畫的理解
操作css的trasition或animation
vue會給目標元素新增/移除特定的class
2. 基本過渡動畫的編碼
1). 在目標元素外包裹<transition name="xxx">
2). 定義class樣式
1>. 指定過渡樣式: transition
2>. 指定隱藏時的樣式: opacity/其它
3. 過渡的類名
xxx-enter-active: 指定顯示的transition
xxx-leave-active: 指定隱藏的transition
xxx-enter: 指定隱藏時的樣式
-->
<div id="demo">
<button @click="show = !show">Toggle</button>
<transition name="xxx">
<p v-show="show">hello</p>
</transition>
</div>
<hr>
<div id="demo2">
<button @click="show = !show">Toggle2</button>
<transition name="move">
<p v-show="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',data: {
show: true
}
})
new Vue({
el: '#demo2',data: {
show: true
}
})
</script>
</body>
</html>
過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_過濾器</title>
</head>
<body>
<!--
1. 理解過濾器
功能: 對要顯示的資料進行特定格式化後再顯示
注意: 並沒有改變原本的資料,可是產生新的對應的資料
2. 編碼
1). 定義過濾器
Vue.filter(filterName,function(value[,arg1,arg2,...]){
// 進行一定的資料處理
return newValue
})
2). 使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 對當前時間進行指定格式顯示-->
<div id="test">
<h2>顯示格式化的日期時間</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
// 定義過濾器
Vue.filter('dateString',function (value,format='YYYY-MM-DD HH:mm:ss') {
return moment(value).format(format);
})
new Vue({
el: '#test',data: {
time: new Date()
},mounted () {
setInterval(() => {
this.time = new Date()
},1000)
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_指令_自定義指令</title>
</head>
<body>
<!--
1. 註冊全域性指令
Vue.directive('my-directive',function(el,binding){
el.innerHTML = binding.value.toupperCase()
})
2. 註冊區域性指令
directives : {
'my-directive' : {
bind (el,binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3. 使用指令
v-my-directive='xxx'
-->
<!--
需求: 自定義2個指令
1. 功能型別於v-text,但轉換為全大寫
2. 功能型別於v-text,但轉換為全小寫
-->
<div id="test">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<div id="test2">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// 註冊一個全域性指令
// el: 指令所在的標籤物件
// binding: 包含指令相關資料的容器物件
Vue.directive('upper-text',function (el,binding) {
console.log(el,binding)
el.textContent = binding.value.toUpperCase()
})
new Vue({
el: '#test',data: {
msg: "I Like You"
},// 註冊區域性指令
directives: {
'lower-text'(el,binding) {
console.log(el,binding)
el.textContent = binding.value.toLowerCase()
}
}
})
new Vue({
el: '#test2',data: {
msg: "I Like You Too"
}
})
</script>
</body>
</html>
本文主要介紹了vue常用指令程式碼例項，更多關於vue常用指令請檢視下面的相關連結