Vue学习笔记-基础知识

---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

Vuejs

简介

渐进式框架

将vue作为应用的一部分嵌入，提升交互体验
后期开发使用: Core+Vue-router+vuex

功能特点

解耦试图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

安装方式

1. 直接CDN引入
   开发环境版本
   生产环境版本
2. 下载和引入
   开发环境
   生产环境
3. NPM安装
   webpack
   CLI

MVVM

mvvm解析图

各图层解析

计算器实例中的MVVM

生命周期

定义

事物从诞生到消亡的整个过程
生命周期函数在这里插入图片描述

• created
• mounted
  

代码规范

缩进两个空格
CLI->.editconfig 两个空格

ES6补充

let(变量)

块级作用域

• es5的闭包：函数有自己的作用域
• es6的let：if和for都有自己的作用域

const(常量)

不许赋值，且无法改变

对象字面量的增强型写法

方法和函数的区别

方法一般和实例挂钩
函数一般直接定义在script里面

Vue对象的options

el属性

决定Vue对象挂载到哪一个元素上

类型: string/HTMLElement

data属性

存储数据

类型: Object/Function
数据可以是直接定义的
也可以是服务器加载出来的

methods属性

函数

类型: { [key:string]:Function}

computed: 计算属性

本质: 使用Vue实例的其他options转换获得
set(),get()

• 与methods的区别
  计算属性在多次使用时，会调用缓存

V-全家桶

插值语法

mustache语法
v-once
v-html
v-text
v-pre:{{}}
v-cloak:斗篷

v-on：事件监听

• 语法糖：@
• 参数：
  一个参数默认调用event，多个参数调用使用$event
  
  

v-bind：动态绑定

• 语法糖(‘:’)

v-if/v-else

• 条件判断

v-show

• if和show的区别
  if条件为假，包含该指令的元素不会存在dom中
  show则为元素添加一个行内样式：display：none

let具有块级作用域

v-for

• 遍历数组

1. 在遍历的过程中，没有使用索引值
   <li v-for="item in a">{{a}}</li>
2. 使用索引
   <li v-for="{item,index} in a">{{index}}-{{item}}</li>

• 遍历对象

1. 只获取一个值，则为value
   <li v-for="item in info">{{item}}</li>
2. 获取value和key
   <li v-for="{value,key} in info">{{value}}-{{key}}</li>
3. 获取value、key和index
   <li v-for="{value,key,index} in info">{{value}}-{{key}}-{{index}}</li>

• 使用key
  <li v-for="item in info" :key="item'>{{item}}</li>
  高效更新虚拟DOM

v-model：表单绑定

• 是一个语法糖，背后包含：
  v-bind绑定value属性
  v-on给当前元素绑定input事件
• 结合radio、checkbox、select(muplite)
• 值绑定：在input中使用的
• 修饰符：

1. lazy：不实时同步，在数据失去焦点或者回车后更新
2. number：指定为number类型
3. trim：自动过滤内容两边空格

Vue对象

el：挂载
data：
methods
computed

标签

input标签

• placeholder：预览
  placeholder 属性提供可描述输入字段预期值的提示信息（hint）
  该提示会在输入字段为空时显示，并会在字段获得焦点时消失
  VUE内部复用之前输入的内容
• key：区别

响应式数组方法

• push：元素压入末位
  this.a.push(‘a’)
• pop：删除末位元素
• shift：删除首位元素
• unshift：数组最前面加入元素
• splice：删除/插入/替换
  start
  num：
  value
  sort：排序
  reverse：翻转
  Vue.set(a,0,‘b’)
  Vue.delete(对象,参数)
  注意：通过索引值不能实时更新数组
函数可变参数：fun(...num)

函数

声明式编程

filter()：过滤

• 传入的函数必须返回布尔值
  为真时参数加入新的数组中
  为假则过滤掉

map()：遍历

• 新建数组遍历更改

reduce()：汇总

• 参数：
  之前值,参数,初始化值

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》