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 ...
随机推荐
- darkbzoj #3759. Hungergame 博弈论 线性基 NIM
LINK:Hungergame 放上一道简单题 复习一下. 考虑每次可以打开任意多个盒子 如果全打开了 那么就是一个NIM游戏了. 如果发现局面是异或为0的时候此时先手必胜了. 考虑局面不全体异或为0 ...
- ZROI 提高十连测 DAY2
总结:入题尽量快,想到做法要先证明是否正确是否有不合法的情况,是否和题目中描述的情景一模一样. 不要慌 反正慌也拿不了多少分,多分析题目的性质如果不把题目的性质分析出来的话,暴力也非常的难写,有 ...
- Swap常用操作与性能测试
Swap分区通常被称为交换分区,这块儿分区位于硬盘的某个位置,当系统内存(物理内存)不够用的时候,如果开启了交换分区,部分内存里面暂时不用的数据就会Swap out(换出)到这块儿分区:当系统要使用这 ...
- RNN神经网络产生梯度消失和梯度爆炸的原因及解决方案
1.RNN模型结构 循环神经网络RNN(Recurrent Neural Network)会记忆之前的信息,并利用之前的信息影响后面结点的输出.也就是说,循环神经网络的隐藏层之间的结点是有连接的,隐藏 ...
- 【python设计模式-创建型】工厂方法模式
工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻 ...
- 华为云GaussDB（DWS）内存知识点,你知道吗?
前言 在日常数据库的使用中,难免会遇到一些内存问题.此次博文主要向大家分享一些华为云数仓GaussDB(DWS)内存的基本框架以及基本视图的使用,以便遇到内存问题后可以有一个基本的判断. 注意,本篇博 ...
- 家庭记账本APP开发准备(二)
今天学习了选项卡,为记账本的分类做了准备.主登录界面进行了优化,但仍未实现各个组件之间的跳转. 选项卡 activity_main.xml <?xml version="1.0&quo ...
- 《linux下的计算器：bc用法入门篇》
说起电脑上的计算器,可能所有人的印象都是这样的:
- JavaScript String.prototype 原型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- java 访问修饰符与代码块
一 访问修饰符 要想本包中的类都可以访问不加修饰符即可: 要想仅能在本类中访问使用private修饰: 要想本包中的类与其他包中的子类可以访问使用protected修饰 要想所有包中的所有类都可以访 ...