Vue常用特性
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 生命周期
Vue之表单操作
- input:单行文本
- textarea:多行文本
- select:下拉选项
- radio:单选框
- checkbox:多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之表单操作</title>
</head>
<body>
<div id="app">
<form action="http:///www.baidu.com">
<p>姓名：<input type="text" v-model='username'></p>
<p>性别：<input type="radio" name='sex' value="1" v-model='sex'>男<input type="radio" name='sex' value="2" v-model='sex'>女</p>
<p>爱好： <input type="checkbox" name="hobby" value="1" v-model='hobby'>篮球<input type="checkbox" name="hobby" value="1" v-model='hobby'>足球<input type="checkbox" name="hobby" value="1" v-model='hobby'>乒乓球</p>
<p>
<span>职业</span>
<select v-model='professional' multiple='true'>
<option value="0">请选择职业</option>
<option value="1">WEB前端</option>
<option value="2">java后端</option>
<option value="3">大数据</option>
<option value="4">人工智能</option>
</select>
</p>
<p>
留言板： <textarea v-model='board'></textarea>
</p>
<p><input type="submit" value="提交" v-on:click.prevent="handle"></p>
</form>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
username: '请输入账号',
sex: 2,
hobby: [1, 2, 3],
professional: [1, 2, 3, 4, ],
board: 'hello vue'
}
},
})
</script>
</html>
Vue之表单域修饰符
- number:转换为数值
- trim:去除开始及末尾的空格
- lazy:将input事件转换为change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之表单域修饰符</title>
</head>
<body>
<div id="app">
<p><input type="text" v-model.number='number'></p>
<p><input type="text" v-model.trim='info'></p>
<div>{{msg}}</div>
<p><input type="text" v-model.lazy='msg'></p>
<button v-on:click='handle'>按钮</button>
</div>
</body>
<script src='../vue.js'></script>
<script>
let vm = new Vue({
el: "#app ",
data() {
return {
number: '',
info: '',
msg: "hello vue"
}
},
methods: {
handle: function() {
console.log(this.number + 20);
console.log(this.info.length);
console.log(this.msg);
}
},
})
</script>
</html>
自定义指令
为什么需要自定义指令，因为内置指令不满足要求。
Vue之全局自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之自自定义全局指令</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
let vm = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
},
})
</script>
</html>
Vue之全局自定义指令传递参数
钩子函数
钩子函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之自自定义全局指令</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
<input type="text" v-color='msg'>
</div>
</body>
<script src="../vue.js"></script>
<script>
// vue自定义全局指令之获取元素的焦点
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
// Vue之全局自定义指令之改变输入框的颜色
Vue.directive('color', {
inserted: function(el, binding) {
el.style.backgroundColor = binding.value.color
}
})
let vm = new Vue({
el: "#app",
data() {
return {
msg: {
color: 'red'
}
}
},
methods: {
}
})
</script>
</html>
Vue之局部自定义参数
在Vue的实例化对象中，使用directives属性可以自定义一些指令。自定义的指令只能在本组件使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实例之局部自定义指令</title>
</head>
<body>
<div id="app">
<input type="text" v-color='msg'>
<input type="text" v-focus>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msg: {
color: 'red'
}
}
},
directives: {
color: {
inserted: function(el, binding) {
el.style.backgroundColor = binding.value.color
}
},
focus: {
inserted: function(el) {
el.focus()
}
}
}
})
</script>
</html>
Vue之计算属性
使用计算属性可以让Vue的模板看起来更加简洁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之计算属性</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msg: "hello word"
}
},
computed: {
reverseString: function() {
return this.msg.split('').reverse().join('')
}
}
})
</script>
</html>
Vue之计算属性与方法的区别
Vue的计算属性与方法的区别
- 计算方法是基于它们的依赖产生宣存的
- 方法不存在缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue计算属性与methods的区别</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reserveString}}</div>
<div>{{reserveString}}</div>
<div>{{reverseString()}}</div>
<div>{{reverseString()}}</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msg: 'hello word'
}
},
methods: {
reverseString: function() {
console.log('methods');
return this.msg.split('').reverse().join('')
}
},
computed: {
reserveString: function() {
console.log('computed');
return this.msg.split('').reverse().join('')
}
},
})
</script>
</html>
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>
</head>
<body>
<div id="app">
<p>姓：<input type="text" v-model='firstName'></p>
<p>名：<input type="text" v-model="lastName"></p>
<div>{{fullName}}</div>
</div>
</body>
<script src='../vue.js'></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
firstName: '',
lastName: "",
fullName: ''
}
},
watch: {
// 监听firstName的值的变化
firstName: function(val) {
this.fullName = val + '' + lastName
},
//监听lastNam的值的变化
lastName: function(val) {
this.fullName = this.firstName + '' + val
}
}
})
</script>
</html>
Vue之留言板案例
思路
1.采用侦听器监听用户名的变化
2.当用户名发生改变时，调用后台接口
3.根据验证的结果修改提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
用户名： <input type="text" v-model.lazy='uname'> <span>{{tip}}</span>
</div>
</body>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: '',
},
methods: {
//采用定时器的方法来模拟后台借口
checkName: function(uname) {
var that = this;
setTimeout(function() {
if (that.uname == 'admin') {
that.tip = '该用户名已经存在，请重新输入'
} else {
that.tip = '该用户名可以使用'
}
}, 2000)
}
},
watch: {
uname: function(val) {
//当uname的值发生改变时 开始调用后台接口
this.checkName(val);
//修改提示信息
this.tip = '正在输入中..'
}
},
})
</script>
</html>
Vue过滤器
过滤器的作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式。
全局过滤器及局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之自定义过滤器</title>
</head>
<body>
<div id="app">
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:test="msg | upper">test</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
// 全局自定义过滤器
Vue.filter('upper', function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
})
let vm = new Vue({
el: "#app",
data: {
msg: 'hello word'
},
// 局部自定义过滤器
filters: {
lower: function(val) {
return val.charAt(0).toLowerCase() + val.slice(1)
}
}
})
</script>
</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>
</head>
<body>
<div id="app">
<div>{{ data | format('yyyy-MM--dd')}}</div>
</div>
</body>
<script src='../vue.js'></script>
<script>
Vue.filter('format', function(val, args) {
if (args == "yyyy-MM--dd") {
var ret = '';
ret += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
return ret;
}
return val
})
let vm = new Vue({
el: "#app",
data() {
return {
data: new Date()
}
},
})
</script>
</html>
Vue生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
/*
Vue实例的生命周期
*/
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function(){
this.msg = 'hello';
},
destroy: function(){
this.$destroy();
}
},
beforeCreate: function(){
console.log('beforeCreate');
},
created: function(){
console.log('created');
},
beforeMount: function(){
console.log('beforeMount');
},
mounted: function(){
console.log('mounted');
},
beforeUpdate: function(){
console.log('beforeUpdate');
},
updated: function(){
console.log('updated');
},
beforeDestroy: function(){
console.log('beforeDestroy');
},
destroyed: function(){
console.log('destroyed');
}
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。