Vue — 第二天（v-model和过滤器）

VUE-02-v-model和过滤器

昨日反馈与回顾

代码仓库的问题

不要修改你克隆下来的仓库中任意代码，否则，下次pull时，可能会报错，从而得到不到最新的代码。

在这里插入图片描述

如果已经遇到了这个冲突：

解决冲突(git 中解决冲突)
把关键代码拷出来，放弃这个仓库，重新再次clone（后续git pull）

处理样式

样式由两个部分决定：

class
style

v-bind绑定class

目标：知道通过vue怎么去操作类，也就是class属性的值。

动态绑定class属性，有三种方式：

三元运算符
绑定对象：如果属性值为true，则添加属性名给class
绑定数组

代码：

<style>#app{width:500px;margin:50px auto;border:3px solid red;}.box{border:3px solid black;margin:5px;}.bg-blue{background-color: blue;}.bg-green{background-color: green;}.fs20{font-size:20px;}.tr{text-align: right;}</style>
</head>
<body><div id="app"><h3 class="title">v-bind-绑定class</h3><!-- 元素自有class和v-bind绑定的class会协同工作，一起生效 --><div class="box" v-bind:class="cla ? 'bg-blue': 'bg-green'">1. 三元表达式</div><!-- 如果对象中的属性值是true,则把对象中的属性名添加到类名中 --><div class="box" :class="claObj">2. 绑定对象</div><!-- 数组中元素是字符串，它会把所有的元素全添加到class中 --><div class="box" :class="claArr">3. 绑定数组</div><button @click="hAddClass">补充一个class</button></div><script>// v-bind 是用来动态绑定元素的属性，而class也是元素的属性// 目标： 可以通过动绑定class来控制样式 。// 方式：// 1. 三元表达式// 2. 绑定对象// 3. 绑定数组const vm = new Vue({el: "#app",// el: document.getElementById("app"),data: {cla: false,claObj: {fs20: true,tr: true},claArr:['fs20','tr', 'abc']},methods: {hAddClass () {// 向数组中添加一个类 'c-red'this.claArr.push('c-red')}}})</script>

:class 动态绑定类名 class 原生属性，可以同时存在，他们包含的所有类会合并在一起生效。

v-bind绑定style

目标：知道通过vue怎么去操作行内样式，也就是style属性的值。

动态绑定style属性有两种方式：

对象形式
数组形式

v-bind绑定style使用对象：

<div id="app"><h3 class="title">v-bind-绑定style</h3><!-- 把对象的属性名和属性值直接设置到style中 --><div class="box" :style="styleObj">1. 绑定对象</div><!-- 把数组中的每一个元素（对象），取出来，组成style --><div class="box" :style="styleArr">2. 绑定数组</div><button @click="hBlack">改成黑色的字</button></div><script>// v-bind 是用来动态绑定元素的属性，而style也是元素的属性// 目标： 可以通过动绑定style来控制样式 。// 方式：// 1. 绑定对象// 2. 绑定数组const vm = new Vue({el: "#app",// el: document.getElementById("app"),data: {styleObj: {color:'red',// 如果属性名有-，则要加'''background-color':'blue'},// 数组中的每一项都是一个对象，其中以键值对的格式设置了stylestyleArr:[ {color:'red','font-weight':'bold'}, {'font-size':'50px'} ]},methods: {hBlack () {// 直接把styleObj中的color设置成blackthis.styleObj.color = "black"}}})</script>

如果同时存在 :style 和 style vue操作的样式会覆盖默认样式。

总结：

:style 使用对象 {css属性名:css属性值}
:style 使用数组 [{css属性名:css属性值}]

v-model

目标

知道如何绑定多种类型的表单元素

基本使用

<div id="app"><h3 class="title">v-model</h3>用户名：<input v-model="userName" ><br><!-- 不是表单元素不能用<div v-model="userName" ></div> --><button @click="userName=123">123</button><button @click="hPrint">打出userName</button></div><script>// v-model // 是用来对表单元素进行双向绑定的。//   表单元素: 用户可以进行交互的元素，textarea,select,input,checkbox...//   双向绑定: //      -1. 用户在input中的修改，会影响到数据//      -2. 数据的修改会影响input// 格式：<表单元素 v-model="数据项">const vm = new Vue({el: "#app",data: {userName: '小王'},methods: {hPrint () {console.log( this.userName )}}})</script>

表单元素

文本域
复选框
单选框
下拉框

<div id="app"><h3 class="title">v-model</h3><div class="box"><!-- 1. 普通文本框  -->用户名：<input v-model="userName" ></div><div class="box"><!-- 2. 单选  由value来决定用户选中的值 -->性别：<input type="radio" value="男" v-model="gender">帅哥<input type="radio" value="女" v-model="gender">美女</div><div class="box"><!-- 3. 复选  由value来决定用户选中的值,结果放在一个数组中 -->爱好：<input type="checkbox" value="读书" v-model="hobby">读书<input type="checkbox" value="sport" v-model="hobby">运动<input type="checkbox" value="k歌" v-model="hobby">k歌</div><div class="box"><!-- 4. 文本域  注： 不能把内容写在元素中: <textarea v-model="info">abc</textarea>-->个人说明：<textarea v-model="info"></textarea></div><div class="box"><!-- 5. 下拉选中的值是以value为准-->位置： <select  v-model="city"><option value="1">北京</option><option value="2">上海</option><option value="3">潜江</option></select></div><div class="box"><!-- 6. 单个复选框（是否同意）如果为true,则选中，false,不选中-->愿意吗？<input type="checkbox" v-model="isChecked"></div><button @click="hPrint">打印结果</button></div><script>// v-model // 是用来对表单元素进行双向绑定的。// 1. 普通文本框 // 2. 单选// 3. 复选// 4. 文本域// 5. 下拉// 6. 单个复选框（是否同意）const vm = new Vue({el: "#app",data: {userName: '小王子',gender:'男',  // 单选hobby:['读书'], // 多选info: '自我介绍，如下：白玉谁家郎',city: 1,isChecked: false},methods: {hPrint () {console.log( this.userName )console.log( this.gender )console.log( this.hobby )console.log( this.info )console.log( this.city )console.log( this.isChecked )}}})</script>

修饰符

lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

<div id="app"><h3 class="title">v-model</h3><div class="box"><!-- 1. lazy  --><!-- 不加lazy：<input v-model="userName" >{{userName}} --><br>加lazy：<input v-model.lazy="userName" >{{userName}}</div><div class="box"><!-- 2. number  不加number，就是一个普通的字符串加了number,会尽量帮你转成数值，转不成，也不会报错--><br>加number：<input v-model.number="age" >{{age}}</div><div class="box"><!-- 3. trim  自动把内容中的前后空格去掉--><br><input v-model.trim="email" >内容的长度：{{email.length}}</div></div><script>// v-model //     v-model的三个修饰符// 1. lazy    -->   v-model.lazy="userName"//    默认情况，v-model只要用户修改了input中的内容（在每次input事件之后）就会与数据进行同步//    如果加了lazy之后，则在用户完成了输入，鼠标失焦之后(相当于change)，才会与数据同步。// 2. number//    自动转成数值的格式// 3. trim//    把内容中的前后空格去掉const vm = new Vue({el: "#app",data: {userName: '小王',age:18,email:''},methods: {hPrint () {console.log( this.userName )}}})</script>

案例-资产列表

在这里插入图片描述

渲染列表

目标：完成表格列表渲染。

需求：

根据data中的数据，进行tr的渲染。
当没有数据的时候，显示暂无数据。

静态页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body><div id="app"><div class="container"><table class="table table-bordered table-hover"><thead><tr><th>编号</th><th>资产名称</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>宝马</td><td>20000</td><td><a href="#">删除</a></td></tr></tbody></table></div></div>
</body>
</html>

准备数据：

list: [{ id: 1, name: '外套', price: 99 },{ id: 2, name: '裤子', price: 34 },{ id: 3, name: '鞋', price: 25.4 },{ id: 4, name: '头发', price: 19900 }
]

完整的功能实现：

  <div id="app"><div class="container"><table class="table table-bordered table-hover"><thead><tr><th>编号</th><th>资产名称</th><th>创建时间</th><th>操作</th></tr></thead><tbody><!-- <tr v-for="(循环变量，索引变量) in 数据"> --><tr v-for="(item, idx) in list"><td>{{item.id}}</td><td>{{item.name}}</td><!-- 如果价格超过100，就有red这个类 --><!-- <td class="red">{{item.price}}</td> --><!-- 三元--><!-- <td :class='item.price > 100 ? "red" : ""'>{{item.price}}</td> --><!-- 放一个对象如果对象中的属性值是true,则把对象中的属性名添加到类名中--><td :class="{red:item.price>100}">{{item.price}}</td><td><a href="#" @click.prevent="hDel(idx)">删除</a></td></tr></tbody></table></div></div><script src="./vue.js"></script><script>const vm = new Vue({el: '#app',data: {list: [{ id: 1, name: '外套', price: 99 },{ id: 2, name: '裤子', price: 34 },{ id: 3, name: '鞋', price: 25.4 },{ id: 4, name: '头发', price: 19900 }]}})</script>

删除功能

目标：完成表格一行删除。

需求：

点击删除按钮，确认框提示
点击确认后，再进行删除
绑定事件，指定处理函数的时候，传入ID
在处理函数中，根据ID进行删除（id===>index====>根据索引删除）

实现：

<td><a @click.prevent="hDel(idx)" href="#">删除</a></td>

methods: {hDel (index) {console.log('要删除的下标是',index)// 删除数组中指定位置的元素this.list.splice(index, 1)}
}

添加资产

目标：完成表格添加资产。

大致的实现步骤：

准备一个表单，包含一个输入框，包含一个提交按钮。
监听提交事件，提取输入框中的内容
根据输入的内容来组织资产信息对象追加到数组中即可
1. 数据会驱动视图的更新
清空输入框中的内容

在案例中的代码：

html结构

<!-- 添加资产 -->
<form class="form-inline"><div class="form-group"><div class="input-group"><input type="text" class="form-control" placeholder="资产名称"></div></div>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary">添加资产</button>
</form>

双向绑定输入框

<input v-model.trim="brandName" type="text" class="form-control" placeholder="资产名称">

监听提交事件，且阻止默认提交行为

<form @submit.prevent="addBrand()" class="form-inline">

在处理函数中实现逻辑

        // 添加资产addBrand() {// 通过v-model绑定输入框，可以实时的获取输入的内容// console.log(this.brandName)// 严谨判断，未输入内容，提示 + 阻止程序运行// trim()是去除字符串左右两侧的空格，然后去判断会更加严谨if (!this.brandName.trim()) {return alert('请输入资产名称')}// 组织一个对象：id brandName createTime// 正常逻辑：去除数组中最后一项数据的ID累加1即可// 极端情况：数组中已经没有数据，此时ID为1即可const obj = {id: this.list.length ? this.list[this.list.length - 1].id + 1 : 1,brandName: this.brandName,createTime: new Date()}// 追加到数组中即可this.list.push(obj)// 清空输入框this.brandName = ''}

梳理其它功能

目标：确定还有哪些功能需要完成。

在这里插入图片描述

输入框结构：

      <!-- 搜索 --><form class="form-inline" style="padding: 20px 0"><input type="text" class="form-control" placeholder="输入关键字进行搜索"></form><!-- 表格 -->

过滤器

目标：

理解过滤器的作用和使用场景
掌握定义和使用过滤器。

理解过滤器

过滤器的作用：转换格式。

生活中的过滤器:

如：把水中的杂质过滤掉。输入过滤器的是脏水，输出的是纯净水。

vue中的过滤器：

- 如：把字符串用0补足6位。输入的是不足6位的字符串，输出的是用0补全之后的字符串。
- 如：把单词首字母转成大写。输入的是普通单词，输出的是首字母大写的单词。

本质就是一个函数

格式x ---过滤器---->  格式y

格式

定义过滤器的格式

new Vue({// 过滤器的定义filters: {// 属性名称（过滤器名称）：属性的值（过滤器处理函数）myFilter:function(value,其它参数){}}})

使用过滤器的格式

// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器（参数）}}

示例1：不带参数的过滤器

<div id="app"><h3>{{msg}}</h3><!-- 使用过滤器 --><h3>{{msg | f1}}</h3><!-- 使用过滤器 --><h3>{{msg | padding6}}</h3></div><script>// vue中的过滤器// 作用： 在显示数据之前，做一次格式转化// 定义格式// filters: {//     过滤器名： function (value,其它参数) {//     }// }// 使用格式 // {{ msg | 过滤器}}// {{msg}}       =====> console.log(msg)// {{msg | f1}}  =====> console.log(   f1(msg)  )const vm = new Vue({el: "#app",data: {msg: 'vue'},// 过滤器列表filters: {// {{msg | f1}}// 会去:// 1. 调用f1这个函数，并自动把msg传进来给value// 2. 把f1函数的返回值显示出来f1 (value) {console.log(value)return 'hahaha'},padding6 (str) {// 对于字符串，不足6位，// 左侧补0// String(str) 类型转换// padStart: 在左侧补足字符串//字符串.padStart(总长度，填充的字符)return String(str).padStart(6, "*")}}})
</script>

注意：

它的工作过程就是函数的调用执行过程。
过滤器本质是一个函数：它的接收的参数是格式化之前的数据及格式化的参数，它的返回值是格式化之间的值

示例2：带参数过滤器

定义：

filters: {// {{msg | f1}}// 会去:// 1. 调用f1这个函数，并自动把msg传进来给value// 2. 把f1函数的返回值显示出来f1 (value) {console.log(value)return 'hahaha'},paddingN (str,n) {// 对于字符串，不足n位，左侧补0// String(str) 类型转换// padStart: 在左侧补足字符串//字符串.padStart(总长度，填充的字符)return String(str).padStart(n, "*")}}

使用：

{{ "ab" | padding6}}
{{ name | padding(5)}}

注意：

它会自动传入第一个参数。

在这里插入图片描述

过滤器的分类

全局过滤器（在vue实例外部定义，在随后的每个vue实例中均可使用）

Vue.filter('过滤器名称',function(value){ //管道符前js表达式执行结果 // 返回处理好的数据即可 
})

局部过滤器（在vue实例中定义，仅能给当前vue实例管理的视图使用）

总结：

全局 Vue.filter('过滤器名称',(value)=>{ //管道符前js表达式执行结果 // 返回处理好的数据即可 })
局部 new Vue({filters:{'过滤器名称':(value)=>{ //管道符前js表达式执行结果 // 返回处理好的数据即可 }}})

自定义指令

目标：知道如何定义自定义指令，使用自定义指令。

指令（directive）vue提供了v-开头的特殊属性，称之为指令。它提供的指令是有限，如果遇见内置指令无法给你实现的功能，自己封装一个指令（自定义指令）。

定义一个v-focus的指令，作用让input自动获取焦点

全局自定义指令，局部自定义指令

  <div id="app"><input type="text" v-focus><input type="text" v-myfocus></div><script src="./vue.js"></script><script>// 全局自定义指令// Vue.directive('指令的名称','指令配置对象')// 参数1：指令的名称，不包含v-，但是在使用指令的时候需要加上v-// 参数2：指令配置对象，固定属性 inserted 指定的一个函数，//      1. 该函数会在通过指令标记的元素，创建完毕之后执行//      2. 该函数有一个默认参数 el 指的是使用这个指令的元素Vue.directive('focus',{inserted (el) {// 获取焦点el.focus()}})const vm = new Vue({el: '#app',// 局部自定义指令// vue配置对象提供了一个选项：directives 对应 对象directives: {// 属性名称(指令的名称)：属性的值(指令的配置对象)myfocus: {inserted (el) {el.style.height = '50px'el.focus()}}}})</script>

补充：

dom元素提供了focus函数，dom.focus()触发获取焦点事件，自然元素可以获取焦点。

案例-资产列表(续)

用过滤器完成货币格式化显示

filters: {$:function(value, _currency) {// 全局匹配： 三位连续，且之后也是数值 的数值var digitsRE = /(\d{3})(?=\d)/g;value = parseFloat(value);if (!isFinite(value) || !value && value !== 0) return '';_currency = _currency != null ? _currency : '￥';// 保留两位小数，并整体转成字符串var stringified = Math.abs(value).toFixed(2);// 获取整数部分。-3表示倒数3位的位置var _int = stringified.slice(0, -3);// 整数部分以3为基准长度划分，剩下几位var i = _int.length % 3;// 取出头部。// 如：12345 ----> 12,var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';// 取出小数点部分// 如：12345.67 ----> .67var _float = stringified.slice(-3);var sign = value < 0 ? '-' : '';return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;}
}

用自定义指令来完成搜索框自动获取焦点

directives: {// 属性名称(指令的名称)：属性的值(指令的配置对象)myfocus: {inserted (el) {el.focus()}}
}

用过滤器完成货币格式化显示。

注意:下面的代码来自vue1中的源码。在vue1中提供了货币金额显示格式化的过滤器currency，请在这里https://cdn.bootcdn.net/ajax/libs/vue/1.0.11/vue.js搜索currency关键字。

在这里插入图片描述

filters: {$:function(value, _currency) {// 全局匹配： 三位连续，且之后也是数值 的数值var digitsRE = /(\d{3})(?=\d)/g;value = parseFloat(value);if (!isFinite(value) || !value && value !== 0) return '';_currency = _currency != null ? _currency : '￥';// 保留两位小数，并整体转成字符串var stringified = Math.abs(value).toFixed(2);// 获取整数部分。-3表示倒数3位的位置var _int = stringified.slice(0, -3);// 整数部分以3为基准长度划分，剩下几位var i = _int.length % 3;// 取出头部。// 如：12345 ----> 12,var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';// 取出小数点部分// 如：12345.67 ----> .67var _float = stringified.slice(-3);var sign = value < 0 ? '-' : '';return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;}
}

用自定义指令来完成搜索框自动获取焦点

directives: {// 属性名称(指令的名称)：属性的值(指令的配置对象)myfocus: {inserted (el) {el.focus()}}
}