Vue基础-学习笔记

MVVM设计思想

• M（Model模型），其实就是我们用到的数据（data中的数据）。
• V（View视图），其实说白了就是我们所写的模板，本质来说呢就是DOM元素。
• VM（View-Model），就是实现控制逻辑，把以上两者结合在一起，比如说模型就提供数据，视图就提供页面的展示效果，然后VM实现控制逻辑，把两者结合在一起。

注意：Model和View这两者之间不能够直接进行交互必须得通过VM。

重点：双向绑定的方式， 从视图到模型用的是事件监听 从模型到视图用的是数据绑定。

vue生命周期钩子详解击使用场景:

• beforeCreate：(使用频率低)
  • 实例创建以前调用
  • 没有实例化，数据访问不到
• created：(使用频率高)
  • 实例创建完成后调用
  • 可拿到和修改数据，且修改数据不会触发updated、beforeUpdate钩子函数
  • 判断是否存在el，是否有template
• beforeMount：
  • 真实dom节点挂载到页面之前
  • 编译模板已经结束，虚拟dom已存在
• mounted：
  • 真实dom节点已挂载完成
  • 一般用于调用事件（axios）
• beforeDestroy：
  • 实例卸载之前触发
  • 可清理非vue资源，防止内存泄漏
• destroyed：
  • 实例销毁后执行
• beforeUpdate：
  • 数据修改之前触发
• updated：
  • 数据修改完成
  • 用updated监控data里面的数据是首选
• activated 和 deactivated

graph LR
A[keep-alive] --> |切换A| B[activated]
A --> |切换B| C[deactivated]

模板语法

• 插值表达式 => {{ }}
• v-text：更新元素的textContent
• v-html：可编译html代码

computed、方法与watch

• computed：有缓存机制，如依赖的属性值改变时触发

<li v-for="(item, index) of orders" :key='index'> </li>

  orders () {
    return this.list.filter((item) => {
    	typeof item.num !== 'undefined' && item.num > 0
    })
  }

• 方法： 没有缓存机制
• watch：有缓存机制，但代码冗余

样式渲染

• :class
  • :class=“actived:isActive”
  • :class="{active: index === isActive}"
  • :class="[actived]"
• :style
  • :style=“styleObj”
  • :style="[styleObj, {fontSize:‘20px’}]"

条件、列表渲染

• v-if 和 v-show 的性质¹
  • v-if ：通过添加/删除DOM节点
  • v-show：通过修改display属性，控制元素显示隐藏
• key属性：
  • 在v-if中可以管理可复用的元素
  • 在v-for中key值要唯一，同时不要使用index作为key值
• v-for中修改键值
  • 数组
    • push、pop、shift(删除首项)、unshift(往首项添加)、splice、sort、reverse
  • 改变数组的指向
    • Vue.set() 或 vm.$set()
  • 对象
    • 改变对象的指向
    • Vue.set() 或 vm.$set() 对象key要用字符串包
• template：在页面中不会显示，且不支持在该元素上绑定属性

事件处理

• 事件修饰符²
  • .prevent：阻止浏览器默认行为
  • .stop：阻止事件冒泡
  • .capture：使用事件捕获
  • .self：click事件只有在e.target === e.currentTarget时才会触发
    • target：触发事件的元素
    • currentTarget：事件绑定的元素
    • nodeName:元素标签名 textContent：元素文本内容
  • .once：事件只执行一次
  • .passive
• 按键修饰符
  • .enter、.tab、.delete、.esc、.space、.up
• 系统修饰符
  • .ctrl、.alt、.shift、.meta
• 鼠标修饰符
  • .left、.middle、.right
• exact修饰符

允许你控制由精确的系统修饰符组合融发的事件

表单绑定

• v-model指令(数据双向绑定)
  • input、textarea、checkbox、radio、select
  • option标签上有value属性时，v-model指令绑定的变量指向其value值
• 表单修饰符
  • .lazy：鼠标失焦后输出
  • .number：自动将用户输入的值转为number类型
  • .trim：自动过滤用户输入的首尾空白字符

使用组件细节点：

• template使用is表达式，更符合编码规范
• 在子组件上定义data其必须是function
• ref：引用 this.$refs.ref
• 数据传递：
  • 父组件通过props向子组件传递数据 ‘单项数据流’
  • 子组件通过 $emit() 触发父组件在引入子组件时绑定数据，将子组件的数据当作参数传递给父组件

非父子间传值/bus/开发订阅模式

methods: {
    handleClick () {
        this.bus.$emit('change', this.selfContent)
    }
},
mounted () {
    let _this = this
    this.bus.$on('change', (msg) => {
        _this.selfContent = msg
    })
}

Vue.$set(obj, key, value)

Vue-给对象新增属性

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

this.$set(this.list, index, item)

vue工程调试

• vscode调试配置（launch.json）
• Chrome (Vue-devtools) + debugger调试方法

组件化

定义

组件化是指将页面的功能模块进行拆分、封装

作用

①复用 ②高可维护

原则

• 独立功能模块（松耦合、扁平化、提炼精华）
• 独立的状态变化（统一的状态管理）
• 从上而下的逻辑思考，从下而上的组件拆分

Vue-cli

• @vue/cli-service-global：对单个*.vue文件进行快速原型开发
• 检查vue cli工程中webpack配置：vue inspaect > output.js

Vue工程目录

• package.json：用于 node_modules资源部署和 启动、打包项目的 npm 命令管理。
• babel.config.js：配置babel参数
• src目录：存放项目源码及需要引用的资源文件
  • assets：存放静态资源文件
  • components：存放vue开发中小组件
  • App.vue：根组件
  • main.js：全局脚本文件（项目入口）
  • router.js：vue-router配置文件
  • store.js：Vuex插件的配置文件
• build：webpack相关基本配置
• config：vue基本配置文件
• dist目录：默认是打包后生成的静态资源文件，用于生产部署

---

1. 两者比较，使用v-show更好，原因时不会频繁的操作dom ↩︎

2. 修饰符可串联使用，而且使用顺序很重要
   不可把passive和orevent一起使用，浏览器会报错 ↩︎