Vue基础（二）---- 常用特性
常用特性分类：
表单操作
自定义指令
计算属性
侦听器
过滤器
生命周期
补充知识（数组相关API）
案例：图书管理
1、表单操作
基于Vue的表单操作：主要用于向后台传递数据
Input 单行文本
radio 单选框
checkbox 多选框
select 下拉多选
textarea 多行文本
2、自定义指令
3、计算属性
1. 为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
2. 计算属性的用法
3、计算属性与 方法methods 的区别（实际上就是缓存的差异）
> 计算属性是基于它们的依赖进行缓存的
计算属性是基于依赖进行缓存的,缓存过一次就不再次缓存，第二次直接用第一次的（节约时间），依赖就是依赖我们自己 在data里面定义的数据，只要该数据不发生变化，无论使用多少次，那么就只缓存一次
> 方法不存在缓存
用一次就得缓存一次
4、侦听器
监听的数据一发生变化，触发对应方法执行业务逻辑
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div> var vm = new Vue({
el:"#app",
data: {
firstName: 'Jim',
lastName: 'Green'
fullName: 'Jim Green'
}
})
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
当双向绑定的数据内容一旦发生变化，就会触发侦听器中对应的方法
实际上这里也可以使用计算属性来达到相同的目的 ------------对于此处来说只是一个简单的例子而已，计算属性更加的方便
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName
}
}
5、过滤器
1. 过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
2. 基本使用
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div> --- 级联操作
<div :abc='msg | upper'>测试数据</div> --- 属性绑定 得到： <div abc="Nihao">测试数据</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
过滤器
1、可以用到以下两个场景:
插值表达式 属性绑定
2、支持级联操作
*/
Vue.filter('upper', function(val) { ----此处的 val 就是 msg 对应的值，因为{{msg | upper}}
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: ''
},
filter: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
注意：Vue.filter 属于全局组件在所有的地方可以使用，filter 属于局部组件，只能在本组件中使用，一个Vue实例本身就是一个组件
3. 带参数的过滤器
Vue.filter(‘format’, function(value, arg1){ ----注意：此处第一个值 value 仍然应该是要处理的数据 date, format(‘yyyy-MM-dd')中的‘yyyy-MM-dd'就是此处的 arg1
// value就是过滤器传递过来的参数
})
基本使用：
<div>{{date | format(‘yyyy-MM-dd')}}</div>
6、生命周期
1、主要阶段
挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted --- 该函数一旦被触发，代表初始化完成（ 模板内容 已经加载完成）
更新（元素或组件的变更操作）----- 已经挂载的数据，若有更新会触发
① beforeUpdate
② updated
销毁（销毁相关属性）
① beforeDestroy
② destroyed
补充知识（数组相关API）
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测, filter() 不会改变原始数组。
this.list = this.list.slice(0,2);
//不会影响原始的数组数据，而是形成一个新的数组，所以需要重新赋值给数组
案例：图书管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.grid {
margin: auto;
width: 530px;
text-align: center;
}
.grid table {
border-top: 1px solid #c2d89a;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed #f3dcab;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #f3dcab;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #f3dcab;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #f3dcab;
border-top: 1px solid #c2d89a;
}
</style>
</head>
<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>
<span>本</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,
id: "",
name: "",
books: [],
},
methods: {
// 添加图书
handle: function () {
if (this.flag) {
// 在修改图书
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
// 完成更新操作之后，需要终止循环
return true;
}
});
this.flag = false;
} else {
// 在添加图书
var newBook = {};
newBook.id = this.id;
newBook.name = this.name;
newBook.date = new Date();
this.books.push(newBook);
}
// 清空表单
this.id = "";
this.name = "";
},
// 修改图书
toEdit: function (id) {
this.flag = true;
// 需要修改的数据填充到表单中
// 方法一：
// var toEditBook = this.books.filter(function (item) {
// return item.id === id;
// });
// this.id = toEditBook[0].id;
// this.name = toEditBook[0].name; // 方法二：
this.books.some((item) => {
if (item.id == id) {
this.id = item.id;
this.name = item.name;
// 完成更新操作之后，需要终止循环
return true;
}
});
// 重新提交到表单中
},
// 删除图书
deleteBook: function (id) {
// 方法一：
// 根据id从数组中查找元素的索引
// var index = this.books.findIndex(function(item){ //当返回true时不在进行遍历
// return item.id == id;
// });
// 根据索引删除数组元素
// this.books.splice(index, 1); // 方法二：
// this.books = this.books.filter(function (item) {
// return item.id !== id;
// }); // 方法三：
this.books.some((item) => {
if (item.id == id) {
this.books.splice(id - 1, 1);
// 完成操作之后，需要终止循环
return true;
}
}); // 注意：some遍历中，如果写成下面普通函数的形式,一旦涉及到使用this,此时this会指向 window,
// 所以写成箭头函数，箭头函数的 this指的是定义该函数的父级作用域中的this,
// 此处就是deleteBook,而他指的是 Vue实例本身，所以就可直接获取到 Vue中的 id,也就是data中的id, this.id // this.books.some(function (item) {
// if (item.id == this.id) {
// xxxxxxxxxxxxxxx;
// }
// });
},
},
computed: {
total: function () {
// 计算图书的总数
return this.books.length;
}, //计算属性
},
watch: {
//侦听器
name: function (val) {
// 验证图书名称是否已经存在
var flag = this.books.some(function (item) {
//有就返回true
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>
</html>
Vue基础（二）---- 常用特性的更多相关文章
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- vue(基础二)_组件，过滤器，具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- vue基础二
1.vue实例 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的.在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选 ...
- python开发基础(二)常用数据类型调用方法
1 数字: int 2 3 int : 转换,将字符串转化成数字 4 num1 = '123' 5 num2 = int (a) 6 numadd = num2 +1000 7 print(num2) ...
- Vue基础知识之常用属性和事件修饰符（二）
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue的常用特性
Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...
- Vue基础---->VueJS的使用(二)
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.今天我们就来学习一 ...
- mootools常用特性和示例（基础篇2）
接着上一篇:mootools常用特性和示例(基础篇1) 1.表单操作 html: <form id="myForm" action="submit.php" ...
- mootools常用特性和示例（基础篇1）
网上关于mootools这个库的信息很少. 公司一些老的项目用到了mootools库,因为要维护,所以接触到了mootools. mootools(文档)官网:http://www.chinamoot ...
随机推荐
- Python os.fdopen() 方法
概述 os.fdopen() 方法用于通过文件描述符 fd 创建一个文件对象,并返回这个文件对象.高佣联盟 www.cgewang.com Unix, Windows上可用. 语法 fdopen()方 ...
- P3250 [HNOI2016]网络
LINK:网络 一棵树 每次添加一条路径 或者删除之前的一条路径 或询问除了不经过某个点之外剩下的最大值. 一个显然的思路 对于一条路径的权值我们直接把权值塞上去 标记永久化一下即可. 考虑如何求答案 ...
- [转]new一个对象的过程中发生了什么？
来自:沉默哥 | 公号 :程序员小乐 链接:cnblogs.com/JackPn/p/9386182.html Java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就 ...
- 分类模型的F1-score、Precision和Recall 计算过程
分类模型的F1分值.Precision和Recall 计算过程 引入 通常,我们在评价classifier的性能时使用的是accuracy 考虑在多类分类的背景下 accuracy = (分类正确的样 ...
- Android SQLite轻量级数据库（简单介绍）
SQLite它是相当于嵌入到安卓里的一个小数据库吧, 它也可以使用SQL语句进行数据库的增删改查操作,但是是SQL1992的语句. 然后SQLite也有自己的语句,但是学过SQL的应该都会发现,它比较 ...
- 019_go语言中的方法
代码演示 package main import "fmt" type rect struct { width, heigh int } func (r *rect) area() ...
- Python分析「我们为什么这么穷」
- CSS内容布局
网页是由不同内容块构成的:标题.段落.链接.列表.图片.视频,等等. 1.定位 定位并不适合总体布局,因为它会把元素拉出页面的正常流. 元素的初始定位方式为静态定位(static),即块级元素垂直堆叠 ...
- Tutte 定理与 Tutte–Berge 公式
Tutte theorem 图 \(G=(V,E)\) 有完美匹配当且仅当满足 \(\forall U\subseteq V,o(G-U)\le|U|,o(X)\) 表示 X 子图的奇连通块数. Tu ...
- redis（二）redis的主从模式和集群模式
redis(二)redis的主从模式和集群模式 主从模式 集群模式 主从模式 redis的主从模式,指的是针对多台redis实例时候,只存在一台主服务器master,提供读写的功能,同时存在依附在这台 ...