文档章节

vue指令

冷静_别动
 冷静_别动
发布于 2017/08/03 11:38
字数 862
阅读 6
收藏 0

指令(带有 v- 前缀的特殊属性)

v-text          文本

eg:<span  v-text="msg"></span>   等同于   <span>{{msg}}</span>

v-html         更新元素的innerHTML

eg:<div  v-html = “htm”></div>  data:{ htm : ‘<h1>HTML</h1>’}

         !v-if                 条件(根据表达式的真假,添加或删除)

            eg:<p  v-if = “seen”>出现</p>             data:{seen : true}

         !v-else          前一兄弟元素必须有 v-ifv-else-if  很是奇怪啊,不论if真假都执行else

    v-else-if  前一兄弟元素必须有 v-ifv-else-if

         !v-for            循环(与v-if在同一节点时v-for优先级高,这意味着v-if将分别重复运行于每个v-for循环中)

           eg:<ol><li  v-for = “todo in todoss”>{{ todo.text }}</ol>    data:{todoss: [{text:’学习’},{text:’qwe’}]}

                       //      1、学习            2、qwe

<div v-for="(val, key, index) in object"></div>

<div v-for="item in items" :key="item.id"> {{ item.text }} </div>

         !v-show        条件(根据表达式的真假,显示或隐藏)

         !v-on 缩写: @     绑定事件监听器

                    Eg:<button v-on:click.once="doThis"></button>   <!-- 点击回调只会触发一次 -->
             <button @click.stop="doThis"></button>      <!-- 停止冒泡 -->
       ?在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器):
         Eg:<!-- 内联语句 -->
                              <my-component @my-event="handleThis(123, $event)"></my-component>
                              <!-- 组件中的原生事件 -->
                              <my-component @click.native="onClick"></my-component>

         修饰符:

.stop - 调用 event.stopPropagation()。                       //阻止冒泡

.prevent - 调用 event.preventDefault()。                     //默认行为

.capture - 添加事件侦听器时使用 capture 模式。               //捕获模式

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

         !v-bind 缩写::     动态绑定一个或多个特性,或一个组件prop到表达式

        Eg:<img v-bind:src="imageSrc">               <!-- 绑定一个属性 à

            <!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
   v-model 在表单控件或者组件上创建双向绑定

          限制:<input>、<select>、<textarea>、components

          修饰符:

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为数字

.trim - 输入首尾空格过滤

        Eg:<div class="checkedd">

                <!--单选-->

                <input type="checkbox" id="checkbox" v-model="checked">

                <label for="checkbox">是冷不?{{checked}}</label><br />

                <!--多选与数组-->

                <input type="checkbox" id="jack" value="Jack" v-model="checkedNamess">

                <label for="jack">Jack</label>

                <input type="checkbox" id="john" value="John" v-model="checkedNamess">

                <label for="john">John</label>

                <br>

                <span>Checked names:{{checkedNamess}}</span>

            </div><hr />

            var check = new Vue({

                el : '.checkedd',

                data:{

                    checked:'',

                    checkedNamess:[]    !!多选绑定到数组

                }

            })

    !v-pre 不需表达式 跳过这个元素和它子元素的编译过程。可显示原始Mustache标签。跳过没指令的节点加快编译。(使v-pre作用内不执行vue)

                   Eg:<div class="abc"><span v-pre>{{abc}}</span></div>      //      {{abc}}

                            var abc = new Vue({

                                     el : '.abc',

                                     data : {

                                               abc:'ABC'

                                     }

                            });

    !v-cloak 不需要表达式 保持在元素上直到关联实例结束编译 一般用到css里

       Eg:<div v-cloak>{{ message }}</div>    //  不会显示,直到编译结束

 

            [v-cloak] {

                display: none;

}

    !v-once 不需要表达式 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

Eg:<!-- 单个元素 -->

<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->

<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

© 著作权归作者所有

下一篇: sinaads
冷静_别动
粉丝 0
博文 4
码字总数 4803
作品 0
私信 提问
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
2018/11/28
0
0
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
2018/05/20
0
0
React与Vue模板使用比较(一、vue模板与React JSX比较)

前言 本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山工具就让你出发了;Vue就像母亲,在你登山之前为你准备好...

barretem
03/05
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
2018/05/22
0
0
Vue.js 优雅地集成第三方 JavaScript

原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:LucaslEliane 校对者:Mcskiller, SevenOutman Vue....

LucasTwilight
03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用 rsync 备份 Linux 系统的一些介绍

备份一直是 Linux 世界的热门话题。回到 2017,David Both 为 Opensource.com 的读者在使用 rsync 备份 Linux 系统方面提了一些建议,在这年的更早时候,他发起了一项问卷调查询问大家,在 ...

Linux就该这么学
23分钟前
2
0
以太坊私有链搭建

https://blog.csdn.net/Blockchain_lemon/article/details/80589123

Moks角木
今天
3
0
自律给我自信-为什么要自律

为什么要自律 混一天和努力一天 看不到任何差别 3天看不到任何变化 7天也看不到任何效果 但是 1个月后, 会看到话题不同 3个月后, 会看到气场不同 6个月后, 会看到距离不同 3年后, 会看到...

周大壮
今天
4
0
读书replay计划说明

突然脑袋一闪,我有了这样一个主意:通过写博客的方式,将我阅读的书中的内容replay出来。 我一般会找着我感兴趣的书去读,一般也会读书中我感兴趣的章节,或者当下对我有用的章节,所以这个...

wanxiangming
今天
1
0
CentOS7安装xrdp环境可实现远程桌面访问

CentOS7安装xrdp环境可实现远程桌面访问 2018-07-14 06:39:28 分类:运维 阅读(2051) 评论(0) 在"Ubuntu系统安装xrdp桌面客户端及实现远程连接桌面"文章中有分享过在Ubuntu系统中安装XRDP环境...

linjin200
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部