Vue的基本使用与指令

梓逸
2021-07-01 / 0 评论 / 0 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月17日,已超过14天没有更新,若内容或图片失效,请留言反馈。

一、推荐大家安装的 VScode 中的 Vue 插件

[button color="info" icon="" url="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" type=""]Vue 3 Snippets[/button]
[button color="info" icon="" url="https://marketplace.visualstudio.com/items?itemName=octref.vetur" type=""]Vetur[/button]

二、vue 的基本使用

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

    <div id="app">{{url}}</div>
    <script src="../vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',//el指定选择器
    
            data: {
                url: 'www.xxhzm.cn'
            }
        })
    </script>
    

三、vue 的指令与过滤器

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

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

注意:指令是 vue 开发中最基础、最常用、最简单的知识点。

3.1 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个:
v-text
{}
v-html

v-text

用法示例:
1.png

{} 语法
vue 提供的 {} 语法,专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {} 语法的专业名称是插值表达
式(英文名为:Mustache)。
用法示例:
2.png

v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素,
则需要用到 v-html 这个指令
3.png

3.2 属性绑定指令

如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令。用法示例如下:
4.png
由于 v-bind 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 : )。

注意:原生 DOM 对象有 onclick、oninput、onkeyup、onmouseover 等原生事件,替换为 vue 的事件绑定形式后,
分别为:v-on:click、v-on:input、v-on:keyup、v-on:mouseover

3.3 事件绑定指令
通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明:
5.png

由于 v-on 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 @ )。

在使用 v-on 指令绑定事件时,可以使用 ( ) 进行传参,示例代码如下:
6.png

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

 <div id="app">
        <input type="text" @keyup.enter="enter">
        <input type="text" @keyup.esc="esc">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                enter() {
                    console.log('你按到了enter')
                },
                esc() {
                    console.log('你按到了esc')
                }
            }

        })

在第一个表单内按enter键就会输出你按到了enter,第二个esc同上

3.4 双向绑定指令

vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据例子:

<div id="app">
    <p v-model="username">{{ username }}</p>
    <input type="text" v-model="username">

</div>
<script src="../vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: '小小孩子们'
        }
    })

在输入框内更改内容p标签会同步变更
input
select
textarea
都可以使用v-model

3.5 条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个,分别是:

  1. v-if
  2. v-show

1.jpg
2.jpg

v-if 和 v-show 的区别
实现原理不同:
v-if 指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏
v-show 指令会动态为元素添加或移除 style="display: none;" 样式,从而控制元素的显示与隐藏

性能消耗不同:
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此:
如果需要非常频繁地切换,则使用 v-show 较好
如果在运行时条件很少改变,则使用 v-if 较好

但实际开发中基本都使用v-if

使用v-if判断成绩
3.jpg
演示地址:https://www.xxhzm.cn/vue/day1/v-if.html

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

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

v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items,示例代码如下:

[collapse status="false" title="代码"]

  <div id="app">
        <table class="table table-bordered table-hover">
            <thead>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{ index }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="../vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: '张三'
                }, {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '王五'
                }]
            }
        })

[/collapse]
5.jpg
4.jpg

注意:v-for 指令中的 item 项和 index 索引都是形参,可以根据需要进行重命名。例如 (user, i) in userlist

使用 key 维护列表的状态
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种
默认的性能优化策略,会导致有状态的列表无法被正确更新。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲
染的性能。此时,需要为每项提供一个唯一的 key 属性:

key 的注意事项

  1. key 的值只能是字符串或数字类型
  2. key 的值必须具有唯一性(即:key 的值不能重复)
  3. 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
  4. 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
  5. 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

示例:

 <!-- 官方建议,只要用到了v-for指令,那么一点要绑定一个 :key 属性 -->
 <!-- 而且,尽量把id作为key值 -->
 <!-- 官方对key的值类型是有要求的 key的值只能是字符串或数字类型 -->
 <!-- key的值千万不能重复,否则会终端进行报错 Duplicate keys detected  -->
   <tr v-for="(item , index) in list" :key="item.id">
   <td>{{ index }}</td>
   <td>{{ item.id }}</td>
   <td>{{ item.name }}</td>
   </tr>


0

评论

博主关闭了所有页面的评论