Vue学习笔记（二）

前端工程化（写入论文）

前端开发：模块化，组件化，规范化，自动化

webpack是实现前端工程化的具体解决方案，提供友好地前端模块化开发自持，具有解决代码压缩混淆、处理浏览器端JavaScript兼容性、性能优化等强大的功能。

Vue的指令与过滤器

（一）Vue指令

1.内容渲染指令

①v-text eg：<p v-test="gender">性别</p>//性别会被gender覆盖

②{{}}插值表达式<p>性别：{{gender}}</p>//插值表达式的使用比v-text更常用，不会覆盖默认文本

③v-html：将包含html标签的字符串渲染为页面的元素（就是将标签具体转化成属性等）

2.属性绑定指令

v-bind//可以简写成冒号：给元素（标签）的属性绑定属性值

3.使用JavaScript表达式（就是JS的一些方法，运算、判断、拼接字符串等）

4.事件绑定指令

①v-on//可以简写成@：方法在methods里声明，data里的属性前要加this.去访问。如果方法逻辑非常简单可以省略声明直接写在事件后面

eg：@click="count+1"

②事件对象event//方法内部可以简写成e

e.target获取事件的触发源（按钮多选框之类的），然后可以用"点"方法获取触发源的属性

③绑定事件且传参：加小括号

eg：@click="addCount(2)"

方法内部：addCount(num){this.count+=num}

//如果传参同时还要传递事件对象，使用$event

eg：@click="addCount(2，$event)"

addCount(num, e){……}

④事件修饰符（用在@事件后面）

.prevent，阻止默认行为，但是自定义的事件会发生

.stop，阻止事件冒泡，冒泡就是对内部的事件也会依次触发外面的（加在内层）

.capture，捕获方式触发（默认是冒泡触发），可以改变内外触发顺序（加在外层）

.self，只有对本层的事件才会触发（一般加在外层，可以通过添加跟.stop形成同样的效果）但是不会阻止内层事件继续向更外层冒泡，只对本层不生效

⑤按键修饰符（只能添加在键盘相关的事件）

方式：在键盘事件（例如keyup/keydown）后面添加“.按键”

5.双向绑定指令

①v-model：同时改变输入框和内部的值

②修饰符

.number：自动把输入的字符转成数字

.trim：自动过滤输入内容两端的空白

.lazy：当输入框失去焦点才会将输入内容更新到data的值（在"change"时更新而不是“input”更新）

6.条件渲染指令

①v-if：用法v-if="布尔表达式"，为真会注释相关的元素，切换开销大，可以配合v-else、v-else-if使用

②v-show：用法v-show="布尔表达式"，为真会把添加style=“display:none”,假就去掉，一定会先渲染出来，所以渲染开销大

7.列表渲染指令

v-for：基于数组循环渲染相似的UI结构

语法：①item in items【items是数组名，item是每一项（形参，任意命名）】

②(item, index) in items【index是item的索引（序号），也是形参任意命名】

③key维护列表状态：有状态(选中等)的列表在默认的性能优化策略下无法被正常更新，操作会紊乱，给每一项提供唯一的key来确保能够正确追踪每个节点。好处：提升性能，防止列表状态紊乱

用法eg：<li v-for="user in list" :key="user.id">

key的值必须是字符串或数字类型，必须具有唯一性（建议使用id属性，不可以用index的值）

列表型多选框！举例：

<li v-for="user in list" :key="user.id">

<input type="checkbox">

姓名：{{user.name}}

</li>

（二）过滤器（Filter）Vue3没有过滤器！

本质：JavaScript函数

作用：进行文本的格式化

用法：添加在JS表达式尾部，由管道符"|"进行调用

用处：用在{{}}和v-bind属性绑定

1.定义过滤器

在filters节点中定义

eg：名称(形参){处理细节}

2.私有过滤器和全局过滤器

①私有过滤器：在filters节点定义的过滤器都是私有的，只有在挂载范围内才可以使用

②全局过滤器

定义Vue.filter("过滤器名称",(处理对象形参如str)=>{具体处理语句})黄色部分是全局过滤器的处理函数，要有return！

私有过滤器和全局过滤器名称冲突：就近原则（私有为主）

③连续调用多个过滤器：用管道符串联依次调用

④过滤器传参

使用：|名称(arg1, arg2,…)

定义：Vue.filter("过滤器名称",(msg，arg1，arg2，…)=>{具体处理语句})第一个参数永远是要处理的内容，第二个开始才是传过来的参数