VUE

Posted 2020-12-10 liuqingqing-bloom

正课:

1. 原生DOM vs 函数库 vs 框架

2. 什么是Vue

3. 如何使用Vue

4. 绑定语法

5. 指令

6. 双向绑定

 

1. 原生DOM vs 函数库 vs 框架

 原生DOM: 优点: 跨平台好

            缺点: 繁琐

 函数库jQuery: 优点: 对原生DOM的每个API进行了简化

               缺点: 并没有简化开发的步骤

 框架Vue,AngularJS,React: 优点: 彻底简化了开发的步骤

                        缺点: 需要转变观念

什么是框架：已经是一个半成品的项目，封装了大量重复性劳动，人只要提供个性化定制即可。

2. 什么是Vue:

 Vue是基于MVVM设计模式的渐进式的前端js框架

   渐进式: 可以有选择的逐步使用框架中的组件

     vs"全家桶": 必须全盘使用所有组件

   前端js框架: 不需要nodejs，仅靠浏览器就可独立运行

     为什么后续需要nodejs？将Vue框架中浏览器不认识的新技术翻译为浏览器认识的ES5的对等标准——已经封装好了

 

 何时: vue侧重于以数据操作为主的前端项目开发(增删改查加事件绑定)

 

3. 如何使用Vue:

 下载: cn.vuejs.org

  最新稳定版: 2.6

    开发版: 未压缩的，包含完备注释和错误提示信息

      优: 可读性好

      缺: 体积大，不便于传输

    生产版: 代码经过压缩，删除了所有注释和错误提示信息

      优: 体积最小化，便于传输

      缺: 不便于学习和阅读

  使用Vue 2种方式:

   1. 下载独立的vue.js，在网页中引入:

   2. 用脚手架代码:

版本：2.5

开发版：未压缩版本，有完备的错误提示

生产版：压缩版本，删除了错误提示 

 

 原理: MVVM设计模式:

  旧的前端代码划分:

   html: 定义网页的内容，专门保存网页内容和结构的文档

   css: 定义网页的样式

   js: 为网页添加交互行为(增删改查，事件绑定)

问题：HTML和css太蠢，不会动态变化一切交互都只能靠js添加。

导致js中大量重复的代码和重复的步骤 

  MVVM设计模式将前端内容重新划分: （步骤）

   1. 界面(View):增强版的html+css，可根据数据自动变化

       为HTML添加了动态功能: 变量，if else, for

   2. 模型数据(Model): 所有页面上需要的/可能发生变化的数据。集中定义在data={ 数据1:值1, 数据2:值2, ... }

     往往模型数据都是ajax从服务端请求来的。

   3. 控制器(ViewModel)：将视图View和模型数据(Model)绑定在一起，

    绑定: 监控视图和模型，始终保持模型数据与页面自动同步

 

    控制器ViewModel中(new Vue()对象)包含两大子系统:

     1. 响应系统: 监控模型中每个变量的变化，为每个模型自动添加get()和set()

         只要有变量发生变化，都会自动经过set()和get()中会触发通知：xx变量变为xx新值

         本质: 将data中每个属性都提升为new Vue对象的访问器属性。只要修改new Vue对象的访问器属性，就可修改data中的变量。但是，同时会发出通知！

通知会发给虚拟DOM树

     2. 虚拟DOM树:

      什么是: Vue临时生成的仅保存可能变化的元素和属性的DOM树(创建new vue时，通过扫描完整DOM树，仅提取可能变化的元素和属性，组成的一颗及精简的虚拟DOM树)

        何时生成: new Vue()边扫描受监控的页面元素，边创建虚拟DOM树，仅保留可能发生变化的元素

        何时使用: 响应系统通知某个变量被改变时，告知虚拟DOM树。虚拟DOM树快速遍历自己，找到受影响的DOM元素，仅修改受影响的DOM元素

      总结: 虚拟DOM树:

        1. 内容少，遍历极快

        2. 封装了重复性的增删改查DOM操作//仅修改受影响的DOM元素的属性或内容

 

4. 绑定语法:

 {{变量名}} Interpolation 插值

  告知Vue框架，这里需要哪个变量

  {{}}中还可写一切正确的有返回值的js表达式:

   比如: 运算, 三目, 函数调用，访问数组元素，访问对象属性，模板字符串

 问题: 只能绑定内容，不能绑定属性和事件等...

 

5. 指令directive

 什么是: Vue新增的增强HTML功能的特殊属性

 为什么: HTML缺少动态原因所需的要素: 运算, 分支，循环

 包括:

  1. 专门绑定属性值的指令: v-bind

    何时: 绑定属性值

    如何: <ANY v-bind:属性名="js表达式">

     v-bind: 让普通的属性的""中也可以执行js程序

      其实可省略: v-bind

      所以: 今后只要绑定属性都用 :属性名="js表达式"

  2. 事件绑定: v-on

    如何:

     HTML中: <ANY v-on:事件名="处理函数名">

     <script>中

     new Vue({

       el:"#app",

       data:{ 模型变量 },

       methods:{

                 处理函数 (){

          this.模型变量

        }

       }

     })

     其实: v-on: 可简写为@，

      所以，今后绑定事件都用@事件名="处理函数"

  3. v-if: 为HTML添加分支结构

    v-if 控制一个元素的显示隐藏

     <ANY v-if="条件表达式"

    v-if   v-else  可控制两个元素二选一显示

     <ANY v-if="条件表达式"

     <ANY v-else

    v-if   v-else-if   v-else  可控制多个元素多选一显示

     <ANY v-if="条件表达式"

     <ANY v-else-if="条件表达式"

     <ANY v-else

  4. v-show: 控制一个元素显示隐藏

    用法同v-if:  <ANY v-show="条件表达式"

      本质: 用display:none隐藏元素

     v-if的本质: 用删除元素节点的方式，隐藏元素

  5. v-for: 根据数组反复生成多个相同结构的元素

    用法: <ANY v-for="elem of 数组">

           //elem可当做模型变量使用，用作绑定

         </ANY>

      of会依次读取数组中每个元素

       每读取一个元素就创建一个<ANY>

  6. 绑定html片段:

   问题: {{}}无法绑定HTML片段，它会努力保持HTML片段原样显示

   解决: v-text="变量" 不行，v-text等效于{{}}

        v-html="变量" 可以，会被浏览器解析为正文

    总结: 只要绑定的内容是HTML片段，都用v-html

  7. v-cloak: 在vue加载完之前，短暂隐藏{{}}语法，不让用户看到

     如何:

      1. 在界面中想隐藏的元素/父元素上添加v-cloak自定义属性

      2. 在页面的<style>中用属性选择器找到所有有v-cloak属性的元素，设置隐藏:

           <style>[v-cloak]{ display:none }</style>

      结果: 当vue对象加载完成，会自动查找所有v-cloak属性，自动移除。所有元素就重新显示出来

  8. v-pre: 保护内容中碰巧出现的{{}}不被VUE编译，保持原样显示

  9. v-once: 控制一个变量只在开始时绑定一次，之后即使模型变量变化，也不再更新.

 

6. 双向绑定:

 单向绑定: 将内存中模型数据中的值绑定到界面上(Model->View)

 问题: 无法绑定表单元素的值

      表单元素值的修改，无法自动映射到内存中

 解决: 今后只要绑定表单元素，都用双向绑定

 什么是双向绑定: 即能将Model中的数据绑定到界面上（Model->View），又能自动将界面上的修改，映射到内存中(View->Model)

  如何: <表单元素 v-model:value="模型变量">

   简写: 1. <input type="text"

          <textarea>

          <select>

          都可简写为: v-model="模型变量"

                         省略:value，默认绑定value属性

        2. <input type="checkbox">

           可简写为: v-model="模型变量"

                         但默认绑定的是checked

        3. <input type="radio">

           可简写为: v-model="模型变量"

            但用模型变量和radio的value做比较

              如果模型变量的值=radio的value时，就选中

              如果模型变量的值!=radio的value时，就不选中