Vue基础指令

最新推荐文章于 2024-06-27 22:42:30 发布

千寻物语

最新推荐文章于 2024-06-27 22:42:30 发布

阅读量3.7k

点赞数 20

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43863895/article/details/115312060

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

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设置样式就可以解决屏幕闪烁问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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也是显示文本信息，但是该指令不存在闪烁问题，另外该指令会覆盖信息展示区域，插值表达式只会替换自己的占位符

<div id="app">
    <p>=={{msg}}==</p>
    <p v-text="msg">====</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{msg:'hello .. world'}

    });
</script>

页面展示效果如下：
在这里插入图片描述

v-html

将信息以html格式输出

<div id="app">
    <p>=={{msg}}==</p>
    <p v-text="msg">====</p>
    <p v-html="msg"></p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{msg:'<font color="red">hello world</font>'}

    });
</script>

在这里插入图片描述

v-bind【属性绑定】

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

<div id="app">
    <input type="button" v-bind:value="mybtn"/>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{mybtn:'自定义按钮'}

    });
</script>

页面效果如下
在这里插入图片描述
v-bind: 也可以简写成：
例如上面的 v-bind:value=“mybtn” 可以简写成 :value=“mybtn”

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

<div id="app">
    <input type="button" v-bind:value="mybtn"/><br><br>
    <input type="button" v-bind:value="mybtn + '123'"/>
</div>

页面渲染
在这里插入图片描述

v-on 【事件绑定】

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

<div id="app">
    <input type="button" value="按钮" v-on:click="show"/>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{mybtn:'自定义按钮'},
        methods:{
            show: function(){
                alert('Hello');
            }
        }

    });
</script>

v-on:也可以简写为@

<input type="button" value="按钮" @click="show"/>

事件修饰符

事件修饰符：

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

示例

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

v-model 数据双向绑定

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

一个简易的计算器

  <div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calc">
    <input type="text" v-model="result">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { // 计算器算数的方法
          // 逻辑：
          var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          this.result = eval(codeStr)
        }
      }
    });
  </script>

在这里插入图片描述

v-for

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

迭代数组

普通数组

<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

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

在这里插入图片描述
对象数组

<div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>

在这里插入图片描述

迭代对象的属性

<!-- 循环遍历对象身上的属性 -->
<div id="app">
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '张三',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>

在这里插入图片描述

迭代数字

<div id="app">
    <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 5">这是第 {{ count }} 次循环</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

在这里插入图片描述
注意:

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

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

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
在这里插入图片描述

v-if 和 v-show

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

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

  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- v-if 的特点：每次都会重新删除或创建元素 -->
    <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->
    <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
      }
    });
  </script>

千寻物语

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Vue基础指令

文章目录v-clockv-textv-htmlv-bind【属性绑定】v-on 【事件绑定】事件修饰符v-model 数据双向绑定v-forv-if 和 v-showv-clock如果网速较慢，vue元素还没有渲染情况下，页面会显示源代码的例如:{{mesage}}我们可以使用 v-clock，作用就是为Vue绑定的元素上添加该属性，只需要配合CSS设置样式就可以解决屏幕闪烁问题。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录