Vue常用特性
表单基本操作
1.获取单选框中的值
- 通过v-model
2.获取复选框中的值
- 通过v-model
- 和获取单选框中的值一样
- 复选框
checkbox这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
3.获取下拉框和文本框中的值
- 通过v-model
<div id="app">
<form action="http://itcast.cn">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model='uname'>
</span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model="hobby">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="hobby">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobby">
<label for="code">写代码</label>
</div>
<div>
<span>职业：</span>
<select v-model="occupation" multiple="true">
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea v-model="desc" style="resize: none;"></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent='handle'>
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
表单基本操作
*/
var vm = new Vue({
el: '#app',
data: {
uname: 'lisi',
gender: 1,
hobby: [1, 2, 3],
occupation: [2],
desc: "你好啊,文本域"
},
methods: {
handle: function() {
console.log(this.uname)
console.log(this.gender);
console.log(this.hobby.toString());
console.log(this.occupation);
console.log(this.desc)
}
}
});
</script>
表单修饰符
-
.number 转换为数值
- 注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
-
.trim 自动过滤用户输入的首尾空白字符
- 只能去掉首尾的 不能去除中间的空格
-
.lazy 将input事件切换成change事件
- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
-
在失去焦点 或者 按下回车键时才更新
<div id="app">
<input type="text" v-model.number="age"><br>
<input type="text" v-model.trim="info"><br>
<input type="text" v-model.lazy="msg"><br>
<div>{{msg}}</div>
<button @click="handle">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
age: "",
info: "",
msg: ""
},
methods: {
handle: function() {
console.log(this.age + 13);
console.log(this.info.length);
}
}
})
自定义指令
- 内置指令不能满足我们特殊的需求
- Vue允许我们自定义指令
Vue.directive 注册全局指令
<div id="app">
<input type="text">
<input type="text" v-focus>
</div>
<script src="js/vue.js"></script>
<script>
Vue.directive("focus", {
inserted: function(el) {
// el 表示指令锁绑定的元素
el.focus();
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {
handle: function() {}
}
})
</script>
#### Vue.directive 注册全局指令 带参数
```javascript
<div id="app">
<input type="text">
<input type="text" v-color="msg">
</div>
<script src="js/vue.js"></script>
<script>
Vue.directive("color", {
bind: function(el, binding) {
// 根据指令的参数设置背景色
// console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el: "#app",
data: {
msg: {
color: "pink"
}
},
methods: {
handle: function() {}
}
})
</script>
自定义指令局部指令
- 局部指令，需要定义在 directives 的选项 用法和全局用法一样
- 局部指令只能在当前组件里面使用
- 当全局指令和局部指令同名时以局部指令为准
<div id="app">
<input type="text" v-focus>
<input type="text" v-color="msg">
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: {
color: "purple"
}
},
methods: {
handle: function() {}
},
directives: {
color: {
bind: function(el, binding) {
// 根据指令的参数设置背景色
// console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
})
</script>
计算属性 computed
- 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
- 计算属性是基于它们的响应式依赖进行缓存的
- computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "nihao"
},
methods: {
handle: function() {}
},
computed: {
reverseString: function() {
return this.msg.split("").reverse().join("")
}
}
})
</script>
侦听器 watch
- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操作
- watch 中的属性 一定是data 中 已经存在的数据
- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
<div id="app">
<div>
<span>用户名:
<input type="text" v-model.lazy="uname">
</span>
<span>{{tip}}</span>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
uname: "",
tip: ""
},
methods: {
checkName: function(uname) {
// 调用接口,但是我们可以模拟定时器模拟接口的使用
var that = this;
setTimeout(function() {
// 模拟接口使用
if (uname == "admin") {
that.tip = "用户名已存在,请更换"
} else {
that.tip = "用户名可以使用"
}
}, 2000)
}
},
watch: {
uname: function(val) {
// 调用后台接口验证用户名的合法性
this.checkName(val);
// 修改提示信息
this.tip = '正在验证...'
}
}
})
</script>
过滤器
- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
- 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
- 支持级联操作
- 过滤器不改变真正的
data，而只是改变渲染的结果，并返回过滤后的版本 - 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
<div id="app">
<input type="text" v-model="msg">
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc="msg | upper">测试数据</div>
</div>
<script src="js/vue.js"></script>
<script>
// Vue.filter("upper", function(val) {
// return val.charAt(0).toUpperCase() + val.slice(1);
// })
Vue.filter("lower", function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
})
var vm = new Vue({
el: "#app",
data: {
msg: ""
},
filters: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
</script>
过滤器中传递参数
<div id="app">
<div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("format", function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg)
})
var vm = new Vue({
el: "#app",
data: {
date: new Date()
},
})
</script>
生命周期
- 事物从出生到死亡的过程
- Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
####常用的 钩子函数
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 |
|---|---|
| created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 |
| mounted | el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件 |
| beforeUpdate | 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的 |
| updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
数组变异方法
- 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
- 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
push() |
往数组最后面添加一个元素，成功返回当前数组的长度 |
|---|---|
pop() |
删除数组的最后一个元素，成功返回删除元素的值 |
shift() |
删除数组的第一个元素，成功返回删除元素的值 |
unshift() |
往数组最前面添加一个元素，成功返回当前数组的长度 |
splice() |
有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值 |
sort() |
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 |
reverse() |
reverse() 将数组倒序，成功返回倒序后的数组 |
替换数组
- 不会改变原始数组，但总是返回一个新数组
| filter | filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 |
|---|---|
| concat | concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组 |
| slice | slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组 |
变异数组与替换数组的代码块:
<div id="app">
<div>
<span>
<input type="text" v-model="fname">
<button @click="add">添加</button>
<button @click="del">删除</button>
<button @click="change">替换</button>
</span>
</div>
<ul>
<li :key="index" v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
fname: "",
list: ["apple", "orange", "lemon"],
},
methods: {
add: function() {
this.list.push(this.fname)
},
del: function() {
this.list.pop();
},
change: function() {
this.list = this.list.slice(0, 2)
}
}
})
</script>
动态数组响应式数据
- Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
- a是要更改的数据 、 b是数据的第几项、 c是更改后的数据
<div id="app">
<ul>
<li :key="index" v-for="(item,index) in list">{{item}}</li>
</ul>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.gender}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
list: ["apple", "orange", "lemon"],
info: {
name: "lisi",
age: 30
}
},
});
// vm.list[1] = "pink"; 不是响应式的
// Vue.set(vm.list, 2, "pick")
vm.$set(vm.list, 1, "pick");
// vm.info.gender = "male"; 不是响应式的
vm.$set(vm.info, "gender", "female");
</script>