VUE学习笔记

1. Vue核心

1.1 Vue简介

1.1.1 官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

1.1.2 介绍与描述

  1. 动态构建用户界面的渐进式JavaScript框架

1.1.3 Vue的特点

  1. 遵循MVVM模式
  2. 代码简洁,体积小,运行效率高,适合移动/PC端开发
  3. 它本身只关注UI,也可以引入第三方库开发项目

1.1.4 与其它JS框架关联

  1. 借鉴Angular的模板与数据绑定技术
  2. 借鉴React的组件化和虚拟DOM技术

1.1.5 Vue周边库

  1. vue-cli:vue脚手架
  2. vue-resource
  3. axios
  4. vue-router:路由
  5. vuex:状态管理
  6. element-ui:基于vue的UI组件库(PC端)
    ...

1.2 初识Vue

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;
注意区分：js表达式 和 js代码(语句)
	1.表达式 一个表达式会产生一个值，可以放在任何一个需要值的地方：
		(1). a
		(2). a+b
		(3). demo(1)
		(4). x === y ? 'a' : 'b'
	2.js代码(语句)
		(1). if(){}
		(2). for(){}

//创建Vue实例
new Vue({
	el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:'atguigu',
		address:'北京'
	}
})

1.3 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1.3.1 模板的理解

html中包含了一些JS语法代码,语法分为两种,分别为:

  • 插值语法(双大括号表达式)
  • 指令(以v-开头)

1.3.2 插值语法

  1. 功能:用于解析标签体内容
  2. 语法:{xxx},xxx会作为js表达式解析

1.3.3 指令语法

  1. 功能:解析标签属性,解析标签体内容,绑定事件
  2. 举例:v-bind:href='xxx',xxx会作为js表达式被解析
<a v-bind:href='url'/>
  1. 说明:Vue中有很多的指令,此处只是用v-bind举例

1.4 数据绑定

1.4.1 单向数据绑定

  1. 语法: v-bind:href="xxx"或简写为:href
  2. 特点: 数据只能从data流向页面

1.4.2 双向数据绑定

  1. 语法: v-model:value="xxx"或简写为 v-model="xxx"
  2. 特点: 数据能从data流向页面,也能在页面上流向data(通常涉及修改与保存时使用)

1.5 MVVM模型

  1. M:模型(Model):对应data中的数据
  2. V:视图(View):模板
  3. VM:视图模型(ViewModel):Vue实例对象
    image

1.6 数据代理

1.6.1 Object.defineProperty

  1. 语法 Object.defineProperty(obj, prop, descriptor)
  2. 参数
    • obj: 要定义的属性
    • prop: 要定义或修改的属性名称或Symbol
    • descriptor: 要定义或修改的属性描述符
  3. 方法

    • get
      属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。 默认为 undefined。

    • set
      属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。 默认为 undefined。

1.6.2数据代理

通过vm对象来代理data对象中属性的操作（读/写）

1.6.3 代理的好处

更加方便的操作data中的数据

1.6.4 基本原理

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
image

1.7 事件处理

1.7.1 绑定监听

  1. v-on:xxx="fun"
  2. @xxx="fun"
  3. @xxx="fun(参数)"
  4. 默认事件形参:event
  5. 隐含属性对象:$event

1.7.2 事件修饰符

  1. .prevent: 阻止事件的默认行为 event.preventDefault()
  2. .stop: 停止事件冒泡 event.stopPropagation()
  3. .once: 事件只触发一次
  4. .capture: 使用事件的捕获模式
  5. .self: 只有event.target是当前操作的元素时才出发事件
  6. .passive: 事件的默认行为立即执行,无需等待事件回调执行完毕

1.7.3 按键修饰符

  1. 常用别名
    • 回车 => enter
    • 删除 => delete
    • 退出 => esc
    • 空格 => space
    • 换行 => tab(特殊,必须配合keydown去使用)
    • 上 => up
    • 下 => down
    • 左 => left
    • 右 => right
  2. Vue未提供别名的按键,可以使用原始的key值去绑定,但要注意转为kebab-case(短横线命名)
    • CapsLock => caps-lock
  3. 系统修饰符(用法特殊): ctrl,alt,shift,meta
    • 配合keyup使用:按下修饰键同时,再按下其他键,随后释放其他键,事件才触发
    • 配合keydown使用:正常触发事件
  4. 也可以使用keyCode去指定具体的按键(不推荐)
  5. Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

1.8 计算属性

1.8.1 计算属性-computed

  1. 要显示的数据不存在,要通过计算得来
  2. 在computed对象中定义计算属性
  3. 在页面中使用{{方法名}}来显示计算的结果

1.8.2 监视属性-watch

  1. 通过vm对象的$watch()或watch配置来监视指定的属性
  2. 当属性变化时,回调函数自动调用,在函数内部进行计算

1.9 class与style绑定

1.9.1 理解

  1. 在应用界面中,某些元素的样式是变化的
  2. class/style 绑定就是专门用来实现动态样式效果的技术

1.9.2 class绑定

  1. :class='xxx'
  2. 表达式是字符串:'classA'
  3. 表达式是对象:
  4. 表达式是数组:['classA','classB']

1.9.3 style绑定

  1. :style="{color:activeColor,fontSize:fontSize+'px'}"
  2. 其中activeColor/fontSize是属性

1.10 条件渲染

1.10.1 条件渲染指令

  1. v-if与v-else
  2. v-show

1.10.2 比较v-if与v-show

  1. 如果需要频繁切换v-show比较好
  2. 当条件不成立时,v-if的所有子节点不会解析(项目中使用)

1.11 列表渲染

1.11.1 v-for

  1. 使用v-for指令基于数组来渲染列表
  2. 使用形式 v-for="item in items" items 是源数据数组,而item是被迭代的数组元素别名
  3. 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
  1. 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
posted @ 2022-09-29 17:31  黑子桑  阅读(23)  评论(0)  编辑  收藏  举报