2022-04-19

对于vue的部分解析与总结

ps：毕竟是国人写的框架官方文档已经很友善了，本文章在官方文档的基础上进行拓展，只对于功能部分demo级别的解析，不进行vue源码的解读过程

官方文档对于vue的概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

  • Q:渐进式框架？

  • A:框架本身支持项目的功能开发，以及后续的功能逐步拓展，可以很方便进行拓展维护

  • Q:自底向上逐层应用?

  • A:前端应用包含了需要渲染的[数据]以及数据操作[逻辑]和最终的数据[渲染]

  • Q:只关注视图层?

  • A:前端应用项目的结果，就是视图交互界面，侧重于界面操作和渲染性能

  • Q:便于整合？

  • A:通过Vue框架接管项目数据，管理数据在界面上的处理过程

  • Q:单页应用？

  • A:构建的前端项目，只包含一个html网页，所有界面的切换都是在一个页面中执行的

  • Q:驱动？

  • A:专有名词，描述的是支持的技术体系

概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

vue 的两个特性

  1. 数据驱动视图：

    • 数据的变化会驱动视图自动更新

    • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

  2. 双向数据绑定：

    在网页中，form 表单负责采集数据，Axios 负责提交数据。

    • js 数据的变化，会被自动渲染到页面上

    • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

Vue实例选项

Vue应用中，核心对象就是new Vue({})，各项功能都是通过选项进行添加的，常见的选项如下：

  • el选项

el：element缩写，表示节点、标签、元素的意思

Vue实例中，用于挂载/绑定一个html标签

  • data选项

data：数据的意思，描述了当前Vue实例对象管理的数据，以key:value键值对的形式出现

在el挂载的标签内部，可以直接使用data中声明的数据

  • watch选项

watch：查看、监看的意思，用于自动监听某个数据的变化

  • computed选项

computed：计算、运算的意思，用于根据数据的变化完成自动计算的操作

  • methods选项

methods：方法、函数的意思，用于在实例中声明可以调用的函数

  • filters选项

filters：过滤器的意思，用于在实例中按照条件进行数据筛选的函数

  • components选项

components：组件的意思，用于在实例中将一些重复的代码进行封装的操作

vue的指令Directive

1. 内容渲染指令

v-text/v-html

指令含义：数据渲染

指令作用：将指定的变量中的数据，展示到页面中

v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

注意事项：v-html使用的时候需要注意xss代码注入漏洞

v-text 指令的缺点：会覆盖元素内部原有的内容

{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！ v-text和v-html可以避免插值闪烁问题.当网速比较慢时, 使用{{undefined}}来展示数据, 有可能会产生插值闪烁问题。 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{undefined}}, 过一会才会展示正常数据.

<div id="app">
 <h2>1、插值表达式</h2>
 <p> {{ msg }}</p>
 <h2>2、v-text、v-html</h2>
 <p v-text="msg"></p>
 <p v-html="msg"></p>
</div>
<script src="./vue.js"></script>
<script>
 const app = new Vue({
 el: "#app",
 data: {
 msg: "<h3>hello vue!</h3>"
 }
 })
</script>

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

  • 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；

  • 简写是英文的 :

  • 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

   <div :title="'box' + index">这是一个 div</div>

3. 事件绑定

  1. v-on: 简写是 @

  2. 语法格式为：

<button @click="add"></button>
    methods: {
     add() {
     // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
     this.count += 1
     }
    }
  1. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
<button @click="add(3, $event)"></button>
    
    methods: {
     add(n, e) {
     // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
     this.count += 1
     }
    }

4.事件修饰符
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，
vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

事件修饰符 说明

.prevent 阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.stop 阻止事件冒泡
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发1次
.self 只有在 event.target 是当前元素自身时触发事件处理函数
例如

<a href="http://baidu.com" @click.prevent="onlickClick">百度首页</a>

vue 的指令与过滤器

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如

<!--只有在key是Enter时调用vm.submit-->
<input @keyup.enter="submit">
<!--只有在key是Esc时调用vm.clearInput-->
<input @keyup.esc="clearInput">

4. 条件渲染指令

v-if/v-show

指令含义：用于条件判断是否展示指定DOM

  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
*   如果要频繁的切换元素的显示状态，用 v-show 性能会更好
  1. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
*   如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

指令作用：用于在页面上控制视图进行显示/隐藏

注意事项：v-if通过DOM挂载方式判断显示/隐藏、v-show通过display样式控制显示/隐藏

结论：如果一个元素需要频繁的进行显示隐藏操作，建议使用v-show，性能上有一定的优化

一般使用方法

  1. 直接给定一个布尔值 true 或 false
    <p v-if="true">被 v-if 控制的元素</p>
  2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
  <p v-if="type === 'A'">良好</p>

多重判断的vue语句使用

v-if/v-elif/v-else

指令含义：条件判断指令

指令作用：根据不同的条件显示不同的内容

注意事项：使用v-if操作时，一定是页面中显示/隐藏操作并不频繁的页面视图

<p v-if="roleid===1">尊敬的管理员您好，欢迎访问本系统</p>
<p v-else-if="roleid===2">尊敬的会员您好，欢迎访问本系统</p>
<p v-else>游客您好</p>

（5）v-for

指令含义：列表渲染指令

指令作用：将页面中的数据数据循环渲染展示到页面中

注意事项：该列表渲染指令，一般需要结合key属性进行数据绑定，后续事件操作时详细说明

<h2>v-for</h2>
<ul>
 <li v-for="(t, index) in techs" :key:"index">
 {{ index }} - {{ t.id }} - {{ t.name }}
 </li>
</ul>
 techs：要迭代的数组
 t：存储数组元素的变量名
 index：迭代到的当前元素索引，从0开始。
 :key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.不加:key有可能导致排列顺序的紊乱

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符 作用 示例
.number 自动将用户的输入值转为数值类型 <input v-model.number="age" />
.trim 自动过滤用户输入的首尾空白字符 <input v-model.trim="msg" />
.lazy 在“change”时而非“input”时更新 <input v-model.lazy="msg" />

（6）v-bind

指令含义：属性动态绑定指令

指令描述：通过变量的方式动态维护一个标签的属性值

注意事项：需要动态改变标签属性时，可以选择通过v-bind指令进行操作

<h2>v-bind</h2>
<img v-bind:src="result"
 style="width: 200px; height: 200px;"/>
<img :src="result"
 style="width: 200px; height: 200px;"/>
<!--
 result: "./images/success.webp"  or "./images/failed.webp"
 result变量数据发生变化，动态改变图片src路径
-->

（7）v-on

指令含义：给标签添加事件操作

指令描述：通过v-on:事件名称可以给一个标签添加事件操作函数，完成事件处理

注意事项：事件绑定的函数一定要出现在实例的methods选项中才能生效

<h2>v-on</h2>
<!-- 绑定事件的处理指令 -->
<button v-on:click="changeResult">[标准语法]改变结果</button>
<button @click="changeResult">[快捷语法]改变结果</button>
<img v-bind:src="result"
 style="width: 200px; height: 200px;"/>
<img :src="result"
 style="width: 200px; height: 200px;"/>

<script src="./vue.js"></script>
<script>
const app = new Vue({
 el: "#app",
 data: {
 ....
 result: "./images/success.webp"
 },
 methods: {
 changeResult() {  // 声明在实例选项methods中的事件处理函数
 this.result === "./images/success.webp"?
 this.result = "./images/failed.webp":
 this.result = "./images/success.webp"
 }
 }
})
</script>

（8）v-model

指令含义：数据双向绑定指令

指令描述：Vue中用于操作表单元素的指令，可以很方便的维护表单数据

<h2>9、v-model</h2>
<input type="password" v-model="pwd" placeholder="请输入密码"/>
<p>记录数据：{{ pwd || '等待记录' }}</p> //也可以使用三元表达式 通过表单的input框对pwd判断
<p>记录数据：{{ pwd ? pwd : '等待记录' }}</p>

  1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等

  2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型

  3. 单个复选框, 绑定的是boolean类型

  4. 多个复选框, 绑定的是数组

  5. select单选对应字符串，多选对应也是数组

（9）custom directive

vue发展到现阶段基本的指令都有所注册，很少要自定义注册指令

指令含义：自定义指令

指令描述：项目需要一些基础DOM操作，可以封装自定义指令完成简单功能

注意事项：由于现在Vue组件化开发的流行，自定义指令的操作方式已经很少


① 全局指令

// 定义完成后，任意Vue实例中都可以使用这个指令
Vue.directive('指令名称', {
 inserted: function(el) { 指令处理函数 }
})

② 局部指令
const app = new Vue({
 el: "#app",
 data: {...},
 ....
 directives: {
 '指令名称': function(el) { 指令处理函数 }
 }
})

③ 代码操作：页面加载时获取焦点
<h2>10、自定义指令</h2>
<input type="text" v-focus>

<script src="./vue.js"></script>
<script>
 // ① 全局指令
 /*Vue.directive('focus', {
 inserted: el => {
 el.focus()
 }
 })*/
 const app = new Vue({
 el: "#app",
 data: {...},
 ...
 directives: {  // ② 局部指令，只在当前实例范围中生效
 focus: {
 inserted: el => {
 el.focus()
 }
 }
 }
 }) 
</script>

vue路由router

Vue页面跳转(两种方法)
方法一(标签实现)
<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
 :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
 <span class="tabNav-ico tabNav-book"></span>
 <span class="tabNav-txt">书 架</span>
</router-link>
123456
方法二(this.$router.push()实现)

当this.$router.push()只有一个参数时 默认为跳转地址 最多可传两个参数 第二个参数为地址参数

 <a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
 <span class="tabNav-ico tabNav-home"></span>
 <span class="tabNav-txt">首 页</span>

</a>
toIndex: function(){
 this.$router.push("/?entityId="+ localStorage.getItem("entityId"));

}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2022-04-07
    1.什么是vue的生命周期？ Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、...
    黑衣阅读 400评论 0赞 0
  • 2022-04-05
    1.什么是vue的生命周期？ Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、...
    菜包阅读 394评论 0赞 0
  • vue面试题 2021-05-19
    1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller，是模型(mod...
    c88cfe19384a阅读 1,564评论 0赞 1
  • 04-Vue指令
    什么是指令 官方解释: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 att...
    仰望_IT阅读 315评论 0赞 0
  • 2022-03-10
    一 vue vue的优点? 渐进式 组件化开发 虚拟dom 响应式数据 单页面路由 数据与试图分开用户体检好,内容...
    如果俞天阳会飞阅读 331评论 0赞 0