Vue2.0 学习笔记（二）

mlc0819
190 阅读7分钟

Vue2.0 基础篇

vlogo.jpeg

前言： Vue 是渐进式的前端开发框架，什么是渐进式呢,就是可以边学边用，学多少用多少，可以逐步的在自己的项目中使用 vue 的部分语法；是纯前端 js，只要有浏览器就可以运行的，与后端无关。它是基于 MVVM 设计模式的，关于什么是 MVVM 我们后面会说到的。我们往后慢慢看，一步一步来，什么都是不能一口吃个胖子的，除非你特牛哈哈哈，就当我没说

一、Vue 基础

  1. 刚开始我们就从先解决一下上面的问题。关于什么是 MVVM
    • 先说一下我们曾经的前端程序，主要就分为三个部分
      • HTML：专门用来定义网页的内容
      • CSS：专门用来定义网页的样式
      • JavaScript：专门为网页添加交互行为
    • 那么问题就来了：HTML 和 CSS 的功能不够强大，不支持程序的基本功能，比如：变量、运算、分支、循环
    • 那么，我们就来到了正题上，解决办法就来了，那就是：MVVM 设计模式；什么是 MVVM呢？
      • 第一个 M，模型对象（Model）：
        1. 专门替界面保存所属的变量和函数的特殊的对象
        2. 只要界面上需要变量和函数时，都要保存到模型对象中
      • 第一个 V，图形界面（View）：
        1. 包括 HTML + CSS
        2. 增强版：支持程序的基本功能
      • 剩下的 VM，视图模型（ViewModel）：
        1. 自动将模型对象中的变量和函数，自动传递到界面上指定位置的特殊对象
        2. 只要希望自动将模型对象中的变量和函数运送到界面上，都要定义视图模型

      这就是传说中的 MVVM：一定要记住哦：M（Model）模型对象、V（View）图形界面、VM（ViewModel）视图模型

  2. 接下来我们说一下Vue是如何实现 MVVM的：
    • 首先创建 new Vue()事件：
      • 隐藏 data 中的变量，自动为 data 中变量创建访问器属性，，在new Vue 中使用任何变量，其实都只能是访问器属性
      • 引入 methods 并打散 methods 为多个函数
        1. 原 methods 中的函数，不再属于 methods ，而是属于 new Vue() 对象
        2. methods 中的函数打散后与访问器属性平级，methods 中的方法想要访问访问器属性变量，必须加 this
    • new Vue() 中 el: "#app" 指引着 new Vue() 对象创建虚拟 DOM 树:
      • 扫描 el 属性：“#app” 所指的页面区域的真实 DOM 树，只找出可能发生变化的元素，保存进虚拟 DOM 树中
      • 只要 new Vue() 中修改了变量，就是修改了访问器属性
        1. 访问器属性向虚拟 DOM 树发出通知
        2. 虚拟 DOM 树扫描内部所有可能发生变化的元素，找出受变量修改影响的个别元素
        3. 虚拟 DOM 树，利用内部已经封装好的 DOM 操作，只修改页面上受影响那个的元素，不受影响的不改变
    • 总结一下：Vue 的绑定原理同等于，访问器属性 + 虚拟 DOM
    • 接下来我们说一下虚拟 DOM 的优点
      • 小 —— 只包含受影响的元素
      • 遍历块
      • 更新效率高 ——只更新受影响的元素，不受影响的元素保持不变
      • 避免重复编码—— 封装了 DOM 增删改查操作，可自动更新页面内容

二、Vue 基础常用的指令

那么接下来我们就说一下 Vue 中的一些基础的和常用到的指令，也不详细的一一展示给大家了，就列举出来，还有一些使用方法，简写和作用写给大家 还有最重要的一点：Vue 全部都是写在 <div id='app'> <div>里的

    {{变量名}}	 绑定语法
	可以放；有返回值的 语法正确的 js 表达式
	不可以放：分支，循环，没返回值的
指令：
    v-bind	用来标记属性值变化，可简写为 ' :  '
		双引号内，要遵守 js 语法
    v-show	控制一个元素的显示和隐藏
		双引号内，是变量和 js 表达式
		如果结果为 true 元素显示
		如果结果为 false 元素隐藏
		v-show 会被替换为 display：none
    v-if v-else-if v-else		在元素之间根据条件显示隐藏
		如果 v-if 的结果为 true 则删除 v-else 所在的元素
		如果 v-if 结果为 false 则删除 v-if 所在的元素
    v-for :key  反复生成多个相同结构的元素组成的列表  :key="唯一标识"
		v-for="(元素值，下标) of 数组" :key="下标"
		v-for="(元素值，下标) in 数组/对象" :key="下标/对象唯一属性"
		v-for="数值 of 整数" :key="i "
    v-on	为元素绑定事件
		可以简写为 “ @ ”
		不传实参值，可以省略 （）
		需要获取事件对象时，传入 “$event" 参数
    v-html 加载并解析html标签，覆盖当前元素开始标签到结束标签之间的旧内容
当网络状况不好时，new Vue 对象下载可能会延迟，导致用户短暂的看到页面上的 {{}}，用 v-text 和 v-cloak 解决
    v-text 用指令加载属性值，代替 {{}}
    v-cloak 在 new Vue 加载之前隐藏元素特殊指令
	手工在样式表中添加 [v-cloak]{display:none}
	在需要暂时隐藏的元素上添加 v-cloak 指令
	原理：当 new Vue 加载完后，移除所有 v-cloak 
    v-once 标记一个元素只在首次加载时更新一次内容，之后不再更新
    v-pre 保护元素中的 {{}} 不被 new Vue 编译

这里我们说一些注意事项：

  1. v-if 的原理

每次删除真实 DOM 树中的元素对象，虚拟 DOM 中始终保存着 v-if 和 v-else 两个元素对象，每次变量发生变化时，扫描虚拟 DOM 树中两个元素对象决定那个元素显示

  1. v-if 和 v-show 的区别

v-show 用 display：none 隐藏元素

v-if 用删除元素的方式达到隐藏的目的

所以我们在使用的过程中，一定要找准每一个指令的使用时机，比如在，一个元素需要经常性的显示隐藏、或者不断替换，就用 v-show；如果一个元素一整次使用只会出现一次，或者替换一次的时候，用 v-if，这样可以做到一定的优化

  1. v-for 里的一些坑

    • 使用 数组[下标]=新值 的方式修改数组中的某个位置的元素，数组内容可以修改成功，页面不会改变，即无法使用该方法动态修改属性

      1. 原因：vue 中没有给数字下标添加访问器属性，不受监控
      2. 临时解决方法：

        对数组进行修改时，不用下标进行修改，用数组 API 函数进行修改 使用 数组.splice()，修改数组数据

      3. 将来学习 Vue3 之后使用 Vue3

    • 运行时，为对象添加新属性，新属性不会自动更新界面

      1. 原因：vue2 中，只对刚开始时，对象中现有的属性添加访问器属性，运行时，程序动态添加的属性，无法实时自动获得访问器属性
      2. 解决：升级 vue3

    • v-for 的问题：

      1. 只要修改一个元素，v-for 无法区分页面上的 HTML 元素，就会删除整个列表，重建整个列表
      2. 解决方法；vue 规定，只要使用 v-for 就必须为元素绑定 :key 属性，且属性值是不重复的下标值或属性名
      3. 更新元素时，v-for 可以根据 元素上绑定的 key 属性值，只找到一个对应的 HTML 元素，修改其内容，不会更新列表，效率高

    • 总结一下：v-for 必须带 :key 表示为每个元素添加唯一标识，避免更新一个元素时重建整个列表

以上就是 Vue 的指令，都一一列举出来了，慢慢欣赏吧，自我感觉挺全面的了，只是没有具体写例子😳😳、

三、结尾篇

结尾的话，也没有什么好说的，那就这样吧，祝大家元宵节快乐，同时祝大家学习每天进步，都可以找到一份好的工作，同时，昨天刚拿到驾照，今天封面给大家炫耀一波

avatar
文章
阅读
粉丝