Vue基础入门（一）------指令和过滤器

最新推荐文章于 2024-10-02 05:39:15 发布

举一个栗子吖

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量1.5k

点赞数 1

分类专栏：前端框架 Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45359288/article/details/124076141

版权

前端框架 Vue 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

在这里插入图片描述

1. Vue 的调试工具

Vue Devtools下载地址
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
配置步骤：

打开Chrome浏览器，点击右上角三个点，选择更多工具 里面的扩展程序
将下载好的插件拖进来安装，再打开开发者模式，勾选如下选项

在这里插入图片描述
4. 在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前页面

2. Vue 简介

Vue(读音/Vju:/，类似于View)是一套用于构建用户界面的渐进式前端框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。

Vue 的特性

数据驱动视图
双向数据绑定

2.1 数据驱动视图

在这里插入图片描述

2.2 双向数据绑定

在这里插入图片描述

2.3 MVVM

在这里插入图片描述

3. Vue 的基本使用

3.1 基本使用步骤

导入 vue.js 的 script 脚本文件
在页面中声明一个将要被 vue 所控制的 DOM 区域
创建 vm 实例对象（vue 实例对象）

3.1 基本代码与 MVVM 的对应关系

在这里插入图片描述

4. Vue 的指令

4.1 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

4.2 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

内容渲染指令	用途	备注
v-text	会覆盖元素内默认的值	很少用
{{ }}	插值表达式：解决 v-text 覆盖默认文本内容的问题	常用
v-html	把包含 HTML 标签的字符串渲染为页面的 HTML 元素	v-text 指令和插值表达式只能渲染纯文本内容

<body>
  <!-- 希望Vue能够控制下面这个div，帮我们把数据填充到div内部 -->
  <div id="app">
    //注意：v-text 指令会覆盖标签内部原本的内容 ，这个方法几乎不用
    <p v-text="username">zhangsan</p> //zs覆盖zhangsan
    <p v-text="sex">性别</p>  //female覆盖性别

    //插值表达式, 解决 v-text 会覆盖默认文本内容的问题，实际开发用的多
    <p>姓名：{{username}}</p>
    <p>性别：{{sex}}</p> 

    //v-text指令和插值表达式只能渲染纯文本内容
    //v-html指令：把包含 HTML 标签的字符串渲染为真正的html内容
    <p v-html="info"></p>  
  </div>

  <!--  1. 导入Vue库文件，在window全局就有了Vue这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>

  <!--  2. 创建Vue的实例对象 -->
  <script>
    //创建Vue的实例对象
    const vm = new Vue({
      //el属性是固定的写法，表示当前vm实例要控制页面上哪个区域，接受的值是选择器
      el: '#app',
      //data对象就是要渲染到页面上的数据
      data: {
        username: 'zs',
        sex: 'female',
        info: '<h4 style="color:pink; font-weight:bold;">终于开始学习Vue.js啦</h4>'
      }
    })
  </script>
</body>

4.3 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

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

4.4 事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听，简写形式（简写为英文的 @ ）。语法格式如下：

在这里插入图片描述
注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：
$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event（e）被覆盖的问题

在这里插入图片描述

4.5 双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据
在这里插入图片描述

4.6 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是： v-if 和 v-show
在这里插入图片描述
在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

4.7 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法，其中：

item 是被循环的每一项
items 是待循环的数组

在这里插入图片描述

key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）