Vue.js 表达式

vue 是什么

vue 是一个用于 构建用户界面 的渐进式 框架

框架：一套完整的项目解决方案

优点：大大提升开发效率 （提高70%）

缺点：要单独学习它的语法规则

开发版本：包含完整的警告和调试模式，学习阶段同意使用开发版本

el:'容器的 id' ~指定 vue 管理的区域

data ~数据

methods ~提供处理逻辑函数

插值表达式 {{ }} 是Vue 的模板语法

表达式:可以被求值的，有结果的

只要是表达式，都可以写在 插值表达式 {{ }} 中

注意点：使用的数据要存在，支持的是表达式，不是语句（if for）,不能在标签属性中使用（网址）

Vue 响应式数据

Vue 这个特性，可以让开发中聚焦于数据，不用聚焦于渲染视图了

Vue 指令

指令 以 v- 开头 ，不同属性不同功能

v-html= ~设置元素的 innerHTML

v-show ="表达式"

控制元素显示隐藏，表达式值 true 显示，false 隐藏

原理：通过设置 display：none 来改变盒子状态

场景：频繁切换时

v-if ="表达式"

控制元素显示隐藏，表达式值 true 显示，false 隐藏

原理：通过 创建/删除 DOM 元素来实现功能

场景：不频繁切换

v-else 和 v-eles-if

v-else 必须紧贴着 v-if 来编写，中间不能有任何标签间隔（注释可以）

v-eles-if 同上

v-on： 注册事件

作用 ：注册事件=添加监听 + 提供处理逻辑

简写 ：@事件名

语法：

v-on:事件名="内联语句" ~适合及其简单的场景

v-on:事件名="事件处理函数" ~适合处理复杂逻辑

method 处理逻辑

method 提供处理逻辑函数

里边的函数可以直接简写 : fn()

method 函数内部的 this 指向实例对象

v-on 调用传参

fn 一个函数

fn() 传参，传的是形参

在 v-on 函数中加了 （）不是调用函数，仍然是绑定事件处理函数，函数在触发时才会执行，执行时会带参数过去

v-bind 指令

v-bind 动态设置标签属性

语法： v-bind：属性名="表达式"

简写 ： 冒号加属性名 （:属性名 src / url ）

v-for 循环指令

v-for 写在谁身上，谁就循环渲染

语法：

v-for="(每一项 ，索引） in 数组"

v-for 缺点：v-for 的默认行为会尝试 原地修改元素 （就地复用）

解决方法: key

v-for 时建议加上 key 属性，一般用唯一表示 ： id

key 的设置要求：一定要在当前 v-for 中唯一 ，必须是string 或 number

filter 筛选掉不符合的元素，生成新数组

v-model 双向数据绑定

作用：给表单使用，双向数据绑定，可以快速获取 或 设置 表单元素内容

当 数据 发生变化，视图自动更新

当 视图 发生变化，数据自动更新

.unshift() 在数组的前面添加

.trim() 清空内容两侧的空白

.reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

指令修饰符

@keyup.修饰符 ~ enter 键盘回车监听, esc 按下了 esc 按键

v-model.trim ~去除首位空格

v-model.number ~ 转数字，原理：先判断用户输入的是否是数字开头，如果不是就不转，是数字开头 则使用 parseFloat() 转换

@事件名.stop → 阻止冒泡 @事件名.prevent → 阻止默认行为

如果事件处理函数没有参数，默认会有一个事件对象传递过来，可以 用形参接收 e

computed 计算属性

基于现有的数据计算得出的结果，如果依赖数据发生变化会自动重新计算并渲染

计算属性的语法：本质是一个方法，使用时当做属性来用

属性内的函数： 必须要返回一个结果，这个结果是基于 现有的数据计算得来的

计算属性的函数中也可以用 this 访问到实例对象

计算属性很重要的特性：带缓存，性能强

在第一次使用该属性时进行计算，计算后将结果缓存起来，后面有其他地方用到，会直接从缓存中取值，不会再次计算，如果依赖的数据更新了，也会重新计算，重复上述操作

.reduce() ~计算求和

watch 侦听器

deep: true ~开启深度监听

immediate:true ~网页立即执行一次

 //读取本地
   fruitList:JSON.parse(localStorage.getItem('list') || defaultArr,
 
 
 // 持久化到本地
 watch: {
          fruitList: {
            deep: true,
            handler (newValue) {
              // 需要将变化后的 newValue 存入本地 （转JSON）
              localStorage.setItem('list', JSON.stringify(newValue))
            }
          }
        }