Vue基础指令

文章目录

  • v-clock
  • v-text
  • v-html
  • v-bind【属性绑定】
  • v-on 【事件绑定】
    • 事件修饰符
  • v-model 数据双向绑定
  • v-for
  • v-if 和 v-show

v-clock

如果网速较慢,vue元素还没有渲染情况下,页面会显示源代码的 例如:{{mesage}}
我们可以使用 v-clock,作用就是为Vue绑定的元素上添加该属性,只需要配合CSS设置样式就可以解决屏幕闪烁问题。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../lib/vue-2.6.12.js">script>
    <style>
        [v-clock]{
            display: none;
        }
    style>
head>
<body>
<div id="app">
    {{msg}}
div>
body>
<script>
    new Vue({
        el:'#app',
        data:{msg:'hello .. world'}

    });
script>

html>

v-text

v-text也是显示文本信息,但是该指令不存在闪烁问题,另外该指令会覆盖信息展示区域,插值表达式只会替换自己的占位符

=={{msg}}==

====

页面展示效果如下:
Vue基础指令_第1张图片

v-html

将信息以html格式输出

=={{msg}}==

====

Vue基础指令_第2张图片

v-bind【属性绑定】

v-bind用于绑定数据和元素属性

页面效果如下
Vue基础指令_第3张图片
v-bind: 也可以简写成 :
例如上面的 v-bind:value=“mybtn” 可以简写成 :value=“mybtn”

v-bind会把后面的值当成变量去解析,所以,可以对该变量做其它的操作,例如运算…



页面渲染
Vue基础指令_第4张图片

v-on 【事件绑定】

v-on指令实现事件的绑定,事件触发函数必须在methods中指定

Vue基础指令_第5张图片

v-on:也可以简写为@


事件修饰符

事件修饰符:

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once 事件只触发一次

示例

有问题,先去百度

v-model 数据双向绑定

v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定。
v-model 只能运用在 表单元素中。

一个简易的计算器

  

在这里插入图片描述

v-for

v-for指令的用法有如下几种

  • 迭代数组

普通数组

索引值:{{i}} --- 每一项:{{item}}

var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] }, methods: {} });

Vue基础指令_第6张图片
对象数组

Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}

Vue基础指令_第7张图片

  • 迭代对象的属性

值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}

Vue基础指令_第8张图片

  • 迭代数字

这是第 {{ count }} 次循环

Vue基础指令_第9张图片
注意:

当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。
Vue基础指令_第10张图片

v-if 和 v-show

v-if 和 v-show都是控制元素的显示和隐藏

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好

  

这是用v-if控制的元素

这是用v-show控制的元素

你可能感兴趣的:(Vue,vue)