Vue初学笔记

Posted 2020-09-14

一、Vue介绍

1、   渐进式框架Vue

 

只关注视图层（view）

2、   Vue中两个核心点

1>  响应的数据绑定

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

利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作

2>  组合的试图组件

UI页面映射为组件树

划分组件可维护、可重用、可测试

 

例：饿了么UI组件库 http://element.eleme.io/#/zh-CN

3、   虚拟DOM

JS运行速度很快，但操作DOM速度很慢

 

通过Render函数从模板中抽离出虚拟DOM树，从而生成真实的DOM结构

 　　

4、   MVVM模式

M：Model数据模型

V：View 视图模板

VM：view-model 视图模型

 

5、   Vue实例

1>、渐进式学习提纲

基础语法：vue实例          模板语法

          计算属性          class与style绑定

          条件与列表渲染    事件处理器

          表单控件绑定      组件

       高级进阶：vue插件编写      mixin混合

                 过渡效果         自定义指令

                 Vue-router：路由系统的使用

                 VueX：状态管理器

       构建工具：nodejs：javascript运行环境

                 Webpack ：模块管理和打包工具

                 Vue-cli：脚手架配置

2>、Vue实例

每一个应用都是通过Vue这个构造函数创建根实例（root instance）启动new Vue（选项对象）

需要传入选项对象，对象包含挂载元素、数据、模板、方法等。

el：挂载元素选择器     String|htmlElement

data：代理数据         Object|Function

methods：定义方法      Object

      Vue代理data数据

          每个Vue实例都会代理其data对象里的所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。

      Vue实例自身属性和方法

          暴露自身的属性和方法，以$开头，例如：$el  $data..

6、   声明式渲染

声名式

只需要声明在哪里（where）做什么（what），而无需关心如何实现（how）

命令式

           需要以具体代码表达在哪里（where）做什么（how），如何实现（how）

           例子：求数组中每一项的倍数

               命令式：

                      使用for循环拿出每一项，然后求知完成后，再放入另一数组中

               声明式：

                      使用map方法，关注如何求值

Vue声明渲染

            初始化根实例，vue自动将数据绑定在DOM模板上

7、   指令

什么是指令？

是一种特殊的自定义行间属性

指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上

在Vue中，指令以v-开头

 

v-bind：动态绑定数据，简写为：

v-on：绑定事件监听器，简写为@

v-text：更新数据，会覆盖已有结构

v-html：可以解析数据中的html结构

v-show：根据值的真假，切换元素的display属性

v-if：根据值的真假，切换元素会被销毁、重建

v-else-if：多条件判断，为真则渲染

v-else：条件都不符合渲染

v-for：基于源数据多次渲染元素或模板块

v-model：在表单控件元素上创建双向数据绑定

v-pre：跳过元素和子元素的编译过程

v-once：只渲染一次，随后数据更新不重新渲染

v-cloak：隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none}

 

8、   模板

1、 Html模板

基于DOM的模板，模板都是可解析的有效的HTML

插值

文本：使用“Mustache”语法(双大括号){{value}}

      作用：替换实例上的属性值，当值改变时，插值内容处会自动更新

           原生的html：双大括号输出的是文本，不会解析html

           属性：使用v-bind进行绑定，可以响应变化

           使用javascript表达式：写简单的表达式

2、 字符串模板

Template字符串

Template选项对象的属性

模板将会替换挂载的元素，挂载元素的内容都将被忽略

根节点只能有一个

将html结构写在一对script标签中，设置type=“x-template

3、 模板-render函数

Render函数

Render 选项对象的属性

createElement(标签名,[数据对象],子元素);

     子元素为文本或数组

 　　

数据对象属性

 

 　　

二、To do list

1、 列表渲染

v-for指令

  根据一组数据的选项列表进行渲染

  语法：value，key in items

        value，key of items

变异方法

  vue提供一组方法，对数组进行操作时，会触发视图更新

  push()     pop()     shift()     unshift()

  splice()   sort()    reserve()

2、 事件处理器

v-on指令

  用来监听DOM事件触发代码

  语法：

       v-on:eventName=“eventHandle”

  指令简写：

       @

  事件处理函数

       写在methods中统一管理

  事件对象

       在事件处理函数中获取

       内联事件处理函数执行，传入事件对象

          $event

  事件修饰符

       事件处理函数只有纯粹的逻辑判断，不处理DOM事件的细节

       例如：组织冒泡、取消默认行为、判断按键

       修饰符的位置：

           v-on：eventName.修饰符

       修饰符：

           .stop     .prevent     .capture     .self     .once

       按键修饰符

           .enter    .tab         .delete      .esc

           .space    .up          .down        .left     .right

              .ctrl     .alt         .shfit       .meta

              .按键

       条件渲染

           v-show指令

             根据表达式的值，用来显示/隐藏元素

             语法：

                   v-show=“表达式”

             元素会被渲染在页面中，只根据表达式的值进行CSS切换

       动态class

           动态绑定class

              Class也为元素的属性，可以使用v-bind：class

              语法：

                  ：class=“{className:表达式}”

                           表达式的值为true 添加className

                           表达式的值为false 不添加className

                  ：class=“[className,className]”

       自定义指令

           除了vue内置的指令，可以自己设置指令

           选项对象的directives属性

           {

               Directives:{}

            }

           钩子函数：

               Update被绑定元素所在的模板更新时使用

               钩子函数中的参数：

                     el:指令所绑定的元素，可以用来直接操作DOM

                     binding：一个对象

                              value:指令的绑定值

       计算属性

               模板是为了描述视图的结构，模板太多放入逻辑，导致模板过重难以维护

               在计算一个计算属性时，vue更新他的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。

             语法：

                 在选项对象中

                 {

                     ...

                    computed:{}

}

      

 

三、组件

1、什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义标签， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件的基本组成：样式结构、行为逻辑、数据

2、 注册组件

全局注册

  可以在任何模板中使用，使用之前要先注册   

  语法：使用    Vue.component(组件名，选项对象)

  组件名命名约定：

        驼峰（camelCase）、烤串（kebab-case）

  在html中使用组件

        使用烤串（kebab-case）命名法

  例如：注册：Vue.component(‘my-component’,{})

        使用：<my-component></my-component>

局部注册

  在组件实例中通过选项对象注册，只在所注册的作用域中使用

  {

      Components:{

            组件名：选项对象

      }

  }

3、 组件通信

父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

父组件>子组件

  组件实例的作用域是孤立的，不能在子组件直接用父组件的数据。

  可以在组件上使用自定义属性绑定数据，在组件中需要显式的用props声明自定义属性名。

子组件>父组件

  需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

4、 注意事项

1>  组件中的data必须是函数

2>  每个组件都是相互独立的，如果它们共用一个对象，在更改一个组件数据的时候，会影响其他组件。如果是函数的话，每个组件都有自己独立的数据，不会相互影响。

5、 受限制的元素

DOM模板解析

  Vue是在浏览器解析和标准化HTML后才能获取模板内容，所以有些元素限制了能被他包裹的元素

  例如：ul中只能放li；select中只能放option

  某些元素中放入了自定义元素，不符合W3C标准，最终会解析错误

 

  变通的方式是使用特殊属性is来扩展HTML标签功能

  例如：<table>

          <tr is=”custom-select”></tr>

        </table>