----------------- 5.1 常用特性概览 ---------------------
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 生命周期
5.2 表单操作
1. 基于Vue的表单操作
- Input 单行文本 （就是 v-model ）
<input type="text" v-model='uname'>
- textarea 多行文本 （就是 v-model ）
<textarea v-model='desc'></textarea>
- select 下拉多选 （v-model = value的值，表示默认显示 value=3的）
（occupation 有多个，也就是数组形式，表示默认显示 value= 2和3 的）
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option> // 这个被默认勾选
</select>
data:{
occupation: 3
// 多个勾选 occupation: ['2', '3'],
}
- radio 单选框 （v-model = value的值， 谁 就默认显示）
<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> // 这个被默认勾选
data：{
gender: 2,
}
- checkbox 多选框 （v-model = value的值（多选的值都是数组的形式） ， 谁就默认显示，）
<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>
data：{
hobby: ['2', '3'],
}
2. 表单域修饰符
- number：把字符串转化为数值
<input type="text" v-model.number='age'>
- trim：去掉开始和结尾的空格
<input type="text" v-model.trim='info'>
- lazy : 将input事件(只要发送改变就触发) 切换为change事件(失去焦点时触发)
<input type="text" v-model.lazy='msg'>
5.3 自定义指令
1. 自定义指令的语法规则（获取元素焦点）
Vue.directive('focus' {
inserted: function(el) {
// 获取元素的焦点
el.focus();
}
})
自定义指令用法:
<input type="text" v-focus>
2. 带参数的自定义指令（改变元素背景色）
<input type="text" v-color='msg'>
data: {
msg: {
color: 'blue'
}
}
Vue.directive(‘color', {
bind: function(el, binding) {
// 根据指令的参数设置背景色
// console.log(binding.value.color) // orange
// 这个 color 是 msg 里面的 属性名
el.style.backgroundColor = binding.value.color;
}
})
<input type="text" v-color='{color:"orange"}'>
3. 局部指令 （写在 new Vue 实例里面）
directives: {
color: {
bind: function(el, binding) {
el.style.backgroundColor = binding.value.colorssss;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
5.4 计算属性
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
1. 计算属性的用法
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao'
},
computed: {
reverseString: function(){
return this.msg.split('').reverse().join('');
}
}
});
2. 计算属性与方法的区别
- 计算属性是基于它们的依赖进行缓存的（也就是说有缓存，如果重复使用 就是调用缓存的内容，更加快速便捷）
- 方法不存在缓存 （方法每次使用 都会运算）
5.5 侦听器
数据变化时执行异步或开销较大的操作
1. 侦听器的用法
watch: {
firstName: function(val){
// val表示变化之后的值
this.fullName = val + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + val;
}
}
5.6 过滤器
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
1. 自定义过滤器
Vue.filter(‘过滤器名称’, function(value){
// 过滤器业务逻辑
})
2. 过滤器的使用
<div>{{msg | 过滤器名称 }}</div>
<div>{{msg | upper | lower}}</div> // 使用多个过滤器
<div v-bind:id=“id | formatId"></div>
3. 局部过滤器（写在 实例里面。）
filters:{
capitalize: function(){}
}
4. 带参数的过滤器
Vue.filter(‘format’, function(value, arg1){
// value就是过滤器传递过来的参数
})
使用方法： （括号里面 就是参数）
<div>{{date | format(‘yyyy-MM-dd')}}</div>
5. 案例：使用过滤器格式化日期
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); // 这里记得要调用
})
5.7 生命周期
主要阶段
1. 挂载（初始化相关属性）
- beforeCreate （在实例初始化之后，数据观测和事件配置之前被调用）
- created （在实例创建完成后被立即调用）
reaated(){}
- beforeMount （在挂载开始之前被调用）
- mounted （el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子）
（前期主要记住这个， 调用 ajax 数据的 时候使用）
2. 更新（元素或组件的变更操作）
5. beforeUpdate （数据更新时调用，发生在虚拟DOM打补丁之前）
6. updated （由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子）
3. 销毁（销毁相关属性）
7. beforeDestroy （ 实例销毁之前调用）
8. destroyed （实例销毁后调用）
5.71 生命周期函数补充！！！！
1、var vm = new Vue({}) 表示开始创建一个Vue的实例对象
2、刚初始化一个空的Vue实例对象，此时，在这个对象上，只有一些默认的生命周期函数和默认的事件，其他的都未创建
3、beforeCreate生命周期函数执行时，data和methods中的数据和方法都还没有初始化
4、初始化data和methods
5、在created中，data和methods都已经初始化好了，如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
6、这个绿框中内容表示Vue开始编辑模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终的模板字符串对象，然后把这个字符串对象，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去
7、beforeMount函数执行时，模板已经在内存中编译好了，但尚未挂载到页面中去，此时，页面还是旧的
8、将内存中编译好的模板，真实的替换到浏览器的页面中区
9、mounted是在页面加载完成后执行的函数，如果要通过某些插件操作页面上的DOM节点，最早是在mounted中进行
10、只要执行完了mounted，就表示整个Vue实例对象已经初始化完毕了，此时组件已经脱离创建阶段，进入运行阶段。
11、蓝框中是组件的运行阶段，运行阶段的生命周期函数只有两个：beforeUpdate和updated，这两个事件会根据data数据的改变，有选择的触发0次到多次
12、当执行beforeUpdate时，页面中显示的数据还是旧的，此时data中的数据是最新的，页面尚未和最新数据同步
13、这一步，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存DOM树，当内存DOM树被更新之后，会把最新的的内存DOM树，重新渲染到真实的页面当中，这时，就完成数据从data（Model层）->view（视图层）的更新
14、updated执行时，页面和data数据已经保持同步，都是最新的
15、当执行beforeDestroy钩子函数时，Vue实例就已经从运行阶段进入销毁阶段，此时，组建中所有data、methods、以及过滤器，指令等，都处于可用状态，此时还未真正执行销毁过程
16、当执行destroyed函数时，组件已经被完全销毁，此时组建中所有data、methods、以及过滤器，指令等，都已经不可用了
5.8 补充知识（数组相关API）
1. 变异方法(会影响数组的原始数据的变化)
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
2. 替换数组(不会影响原始的数组数据，而是形成一个新的数组)
- filter()
- concat()
- slice()
3. 修改响应式数据 （ 动态处理响应式数据）
- Vue.set(vm.items, indexOfItem, newValue)
- vm.$set(vm.items, indexOfItem, newValue)
参数一 表示要处理的数组名称
参数二 表示要处理的数组的索引
参数三 表示要处理的数组的值
// vm.list[1] = 'lemon'; 无法修改 原始数据
不能直接修改， 要用下面的方法
Vue.set(vm.list, 2, 'lemon');
vm.$set(vm.list, 1, 'lemon');
1. 这个 数字 data里的 数组 的索引号
// vm.info.gender = 'male';
vm.$set(vm.info, 'gender', 'female');
1. 中间的可以是索引，也可以对data里的 对象 使用
5.9 综合案例–图书馆案例
- filter()
- some() 这两个方法是使用！！！！重点
1. 常用特性应用场景
- 过滤器（格式化日期）
- 自定义指令（获取表单焦点）
- 计算属性（统计图书数量）
- 侦听器（验证图书存在性）
- 生命周期（图书数据处理）
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<label for="name">
名称：
</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
图书管理-添加图书
*/
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
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: {
flag: false,
submitFlag: false,
id: '',
name: '',
books: []
},
methods: {
handle: function(){
if(this.flag) {
// 编辑图书
// 就是根据当前的ID去更新数组中对应的数据
this.books.some((item) => {
if(item.id == this.id) {
item.name = this.name;
// 完成更新操作之后，需要终止循环
return true;
}
});
this.flag = false;
}else{
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = 2525609975000;
this.books.push(book);
// 清空表单
this.id = '';
this.name = '';
}
// 清空表单
this.id = '';
this.name = '';
},
toEdit: function(id){
// 禁止修改ID
this.flag = true;
console.log(id)
// 根据ID查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
console.log(book)
// 把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
},
deleteBook: function(id){
// 删除图书
// 根据id从数组中查找元素的索引
// var index = this.books.findIndex(function(item){
// return item.id == id;
// });
// 根据索引删除数组元素
// this.books.splice(index, 1);
// -------------------------
// 方法二：通过filter方法进行删除
this.books = this.books.filter(function(item){
return item.id != id;
});
}
},
computed: {
total: function(){
// 计算图书的总数
return this.books.length;
}
},
watch: {
name: function(val) {
// 验证图书名称是否已经存在
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag) {
// 图书名称存在
this.submitFlag = true;
}else{
// 图书名称不存在
this.submitFlag = false;
}
}
},
mounted: function(){
// 该生命周期钩子函数被触发的时候，模板已经可以使用
// 一般此时用于获取后台数据，然后把数据填充到模板
var data = [{
id: 1,
name: '三国演义',
date: 2525609975000
},{
id: 2,
name: '水浒传',
date: 2525609975000
},{
id: 3,
name: '红楼梦',
date: 2525609975000
},{
id: 4,
name: '西游记',
date: 2525609975000
}];
this.books = data;
}
});
</script>
</body>
2751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
