本文講解vue的一些基本使用
<!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">
<span v-text='count'></span>
<button @click='count++'>點我</button>
<input type="text" @keyup.a='addCount'>
<br>
<!-- v-model的本質：使用v-bind+v-on:input來實現雙向監聽和數據綁定 -->
<input type="text" :value='msg' @input='updateMsg'>
<!-- 簡寫 -->
<input type="text" :value='msg' @input='msg=$event.target.value'>
<span>{{msg}}</span>
<br>
<!-- v-for增加key主鍵來增加渲染效率 -->
<span>用戶列表</span>
<ul>
<!-- 也可以使用user.index -->
<li :key='user.id' v-for='(user,index) in users'>
{{index}}---用戶id：{{user.id}}，用戶名稱：{{user.name}}，用戶年齡：{{user.age}}
</li>
</ul>
<!-- 對象遍歷 -->
<span>遍歷對象</span>
<ul>
<li v-for='(value,key,index) in home'>
{{index}}---{{key}} = {{value}}
</li>
</ul>
<!-- v-if+v-for聯合使用：滿足條件的才渲染 -->
<span>篩選用戶列表：年齡大於18歲的渲染</span>
<ul>
<!-- 也可以使用user.index -->
<li v-if='user.age >= 18' :key='user.id' v-for='(user,index) in users'>
{{index}}---用戶id：{{user.id}}，用戶名稱：{{user.name}}，用戶年齡：{{user.age}}
</li>
</ul>
<!-- 測試通過方法來校驗 -->
<!-- 方法需要加括號，計算屬性不需要加括號 -->
<input type="text" v-model.number='age'> <span style="color: red;" v-show='validateAgeByComputed'>年齡不能小於18歲</span>
<!-- 自定義指令 -->
<input type="text" v-lingbugfocus>
<input type="text" v-lingbugvalue='count'>
<!-- 監聽器：處理比較耗時的異步操作：案例-校驗用戶名是否存在 -->
<input type="text" v-model.lazy='registerUserName'><span :style="validateResultContainerStyleModel">{{validateRegisterUserNameResultMsg}}</span>
<!-- 過濾器 -->
<input type="text" v-model='msgFilter'><span>{{msgFilter|upperfirst|upperall}}</span>
<input type="text" v-model='numFilter'><span>{{numFilter|calc(6666)}}</span>
</div>
<script>
addCustomKeyCode('a', 65);
// 注意：指令名稱只能小寫
addCustomDirective('lingbugfocus', function(el, binding, vnode, oldVnode) {
// debugger;
el.focus();
});
// addCustomDirective('lingbugvalue', function(el, binding, vnode, oldVnode) {
// debugger;
// // 無法實時聯動，只能修改一次
// el.value = binding.value;
// });
addCustomFilter('upperfirst', function(value) {
return value ? value.charAt(0).toUpperCase() + value.slice(1) : '';
});
addCustomFilter('upperall', function(value) {
return value ? value.toUpperCase() : '';
});
var vm = new Vue({
el: ' #app ',
data: {
count: 0,
msg: '',
users: [{
id: 1,
name: '張三',
age: 20
}, {
id: 2,
name: '李四',
age: 15
}, {
id: 3,
name: '王五',
age: 30
}],
home: {
name: '我的家',
address: '湖北武漢',
host: 'Lingbug'
},
age: 0,
registerUserName: '',
validateRegisterUserNameResultMsg: '',
validateResultContainerStyleModel: {
color: ''
},
msgFilter: '',
numFilter: ''
},
methods: {
addCount: function(event) {
console.log(event);
this.count++;
},
updateMsg: function(event) {
this.msg = event.target.value;
},
validateAgeByMethod: function() {
console.log('validateAgeByMethod調用了');
return this.age < 18;
},
validateRegisterUserName: function(value) {
// 模擬ajax耗時操作
var _this = this;
var nameList = 'admin,lingbug,test'.split(',');
var msg = '';
var color = '';
setTimeout(function() {
// var flag = nameList.find(r => r == value);
if (nameList.includes(value)) {
msg = '用戶名' + value + '已存在，請修改後重試！';
color = 'red';
} else {
msg = '用戶名' + value + '可以註冊！'
color = 'green';
}
_this.validateRegisterUserNameResultMsg = msg;
_this.validateResultContainerStyleModel.color = color;
}, 2000);
}
},
// 局部指令
directives: {
lingbugvalue: {
inserted: function(el, binding, vnode, oldVnode) {
// 無法實時聯動，只能修改一次
el.value = binding.value;
}
}
},
// 計算屬性：
// 跟方法的區別是，計算屬性是依賴緩存的，只有在數據發生改變纔會調用，方法是每一次都會調用
computed: {
validateAgeByComputed: function() {
console.log('validateAgeByComputed調用了');
return this.age < 18;
}
},
// 監聽器：處理比較耗時的異步操作
watch: {
registerUserName: function(value) {
if (value) {
this.validateRegisterUserNameResultMsg = '正在校驗' + value + '...';
this.validateResultContainerStyleModel.color = '';
this.validateRegisterUserName(value);
} else {
this.validateRegisterUserNameResultMsg = '';
this.validateResultContainerStyleModel.color = '';
}
}
},
// 局部過濾器
filters: {
calc: function(value, num) {
value = value ? parseInt(value) : 0;
num = num ? parseInt(num) : 0;
var sum = value + num;
return value + ' + ' + num + ' = ' + sum;
}
}
});
// 可以自定義按鍵名，當然直接keyup.65也是可以的，但是爲了美化，可以自定義名稱
function addCustomKeyCode(keyName, code) {
Vue.config.keyCodes[keyName] = code;
}
// 添加自定義指令（全局），使用時使用v-指令名稱
function addCustomDirective(name, action) {
Vue.directive(name, {
inserted: action
});
}
// 添加自定義過濾器
function addCustomFilter(name, action) {
Vue.filter(name, action);
}
</script>
</body>
</html>