vue学习笔记

一、定义：Vue 是一款用于构建用户界面的 JavaScript 框架

二、核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

三、使用方式：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面、

四、基础

4.1创建一个vue应用 --creatApp函数

·根组件      每个应用都需要一个“根组件”，其他组件将作为其子组件。

·挂载应用    应用实例需调用 .mount() 方法后渲染出来

·应用配置   config 对象允许我们配置一些应用级的选项

4.2 模板语法--Vue 使用一种基于 HTML 的模板语法

·文本插值       使用的是“Mustache”语法{{   }}

·原始HTML     想插入 HTML，你需要使用 v-html 指令

·Attribute绑定      双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应                               该使用 v-bind 指令

·v-bind 简写语法：“   ：”

·使用JavaScript表达式：

                        {{ number + 1 }}

                        {{ ok ? 'YES' : 'NO' }}

                        {{ message.split('').reverse().join('') }}

                        <div :id="`list-${id}`"></div>

·指令Directives:   指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我                们所介绍的 v-bind 和 v-html

·参数Arguments:在指令名后通过一个冒号隔开做

·修饰符Modifiers:修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定

4.3  响应式基础

·声明响应式状态    -----响应式代理 vs. 原始值

·声明方法

                DOM更新时机

                深层响应性

                有状态方法、

4.4计算属性

·计算属性缓存 vs 方法

        计算属性值会基于其响应式依赖被缓存

·可写计算属性

         计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

4.5类与样式绑定

·绑定 HTML class

        绑定对象、绑定数组

·绑定内联样式

         绑定对象、绑定数组、自动数组、样式多值

4.6条件渲染

·v-if：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

·v-else：使用 v-else 为 v-if 添加一个“else 区块”

·v-else-if：v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用

·v-show：另一个可以用来按条件显示一个元素的指令是 v-show

·v-if vs. v-show：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需                                     要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则

                             v-if 会更合适。

·v-if 和 v-for：不推荐

4.7列表渲染

·v-for：基于一个数组来渲染一个列表

·v-for与对象：

使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次（n 的初值是从 1 开始而非 0）

·通过key 管理状态

4.8事件处理

·监听事件

·内联事件处理器

·方法事件处理器

·事件修饰符  

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

·按键修饰符  

• .ctrl
• .alt
• .shift
• .meta

·鼠标按键修饰符    

• .left
• .right
• .middle

4.9表单输入绑定

基本用法

·文本

·多行文本

·复选框

·单选按钮

·选择器

4.10生命周期

注册生命钩子

4.11侦听器

·深层侦听器

·即时回调的侦听器

·回调的触发时机

·停止侦听器

4.12模板引用

·访问模板引用

·函数模板引用

4.13组件基础

·定义一个组件

·使用组件：要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中

·传递 props：Props 是一种特别的 attributes，你可以在组件上声明注册。

·监听事件--<BlogPost> 组件

·动态组件：通过 Vue 的 <component> 元素和特殊的 is attribute 实现的

     被传给 :is 的值可以是以下几种：

• 被注册的组件名
• 导入的组件对象

DOM 模板解析注意事项

·大小写区分

·闭合标签

·元素位置限制