Vue - 内部指令

1、插值

 A：<span>TEXT:{{text}}</span>
 {{text}}会被相应的数据类型text属性值替换，当text值改变时候，文本中的值也会相应的发生变化
 
 B：有时候只需要渲染一次数据，后续的数据变化不再关心，可以通过“*”实现
 <span>TEXT:{{*text}}</span>
 
 C：双大括号标签会将里面的值作为字符串来处理，如果值是HTML代码，可以使用过3个大括号表示

2、表达式

表达式：

 <!-- 合法表达式 -->
 A：js表达式 {{cents/100}}
 B：三元表达式 {{true ? 1 : 0}}
 C：{{example.split(",")}}
 
 <!-- 无效实例 -->
 A：{{var logo = 'DDFE'}}
 B: {{if(true) return 'DDFE'}}  条件控制语句是不支持的，可以使用三元表达式

表达式后面添加过滤符：

A: {{examole | toUpperCase}}   这里的toUpperCase就是过滤器
 
B: 允许过滤器串联 {{example | filter1 | filter2}}
 
C: 过滤器支持传入参数，{{example | filter a b}}，这里的a和b均为参数，用空格隔开

3、指令

 A：指令是带有v-前缀的特殊特性，值限定为绑定表达式，也就是js表达式以及过滤器
 
 B：指令的作用是当表达式的值发生变化的时候，将这个变化也反应到DOM上，
    eg：<div v-if="show">DDFE</div>  当show为true的时候，展示DDFE字样，否则不展示
 
 C：有一些指令的语法有些不一样，在指令与表达式之间插入一个参数，用冒号分隔，如v-bind指令
    eg:<a v-bind:href="url"></a>
        <div v-bind:click="action"></div>

内部指令：

v-if：根据表达式的值在DOM中生成或移除一个元素

 <div id="example">
     <p v-if="greeting">hello</p>
 </div>
 
 <script>
     var exampleVM2 = new Vue({
         el : '#example',
         data : {
             greeting : false
         }
     })
 </script>
 
 结果：
 <div id="example"></div>
 
 <!-- 因为v-if指令是一个指令，需要添加到一个元素 -->
 <!-- 如果想切换多个元素，可以使用template元素包装元素 -->
 <template v-if="ok">
     <p>Title</p>
     <p>ssss</p>
     <p>aaaa</p>
 </template>
 
 结果：
 <div id="example">
     <p>Title</p>
     <p>ssss</p>
     <p>aaaa</p>
 </div>

v-show：根据表达式的值来显示或者隐藏HTML元素，也就说说要是为false，元素上面就会多一个内联样式style="display:none",v-show不支持<template>语法

v-else：必须跟着v-show或v-if，充当else的功能，最好不要和v-show一块使用，可以用另一个v-show替代

v-model：在表单控件元素上创建双向数据绑定

 <body id="example">
     <form>
         <input type="text" v-model="data.name" placeholder="">
 
         <input type="radio" id="one" name="" value="One" v-model="data.sex">
         <input type="radio" id="two" name="" value="Two" v-model="data.sex">
 
         <input type="checkbox" name="" value="book" id="book" v-model="data.interest">
         <input type="checkbox" name="" value="swim" id="swim" v-model="data.interest">
         <input type="checkbox" name="" value="game" id="game" v-model="data.interest">
 
         <select v-model="data.indentity">
             <option value="teacher" selected>教师</option>
             <option value="doctor">医生</option>
         </select>
     </form>
 </body>
 <script>
     new Vue({
         el : '#example',
         data : {
             data : {
                 name : "",
                 sex : "",
                 interest : [],
                 indentity : ''
             }
         }
     })
 </script>

-----------

除了以上用法，该指令后面还可以添加多个参数（number，lazy，debounce）：

number：将用户的输入自动转化为Number类型，如果原值的转化结果为NaN,则返回原值

-----------

lazy：在默认情况下，v-model在input事件中同步输入框的值与数据，添加lazy属性，将数据改到在change事件中发生

 <input type="" name="" v-model="msg" lazy>

-----------

debounce：设置一个延时，在每次敲击之后延时同步输入框的值与数据

<input type="text" v-model="msg" debounce="5000">
<-- 5s之后才会改变 -->

v-repeat：基于源数据重复渲染元素，数组中的每一个对象，都会创建一个Vue对象，在重复元素中，可以访问重复实例以及父实例的属性，使用$index呈现对应的数组索引

 <body id="example">
     <ul id="demo">
         <li v-repeat="items" class="item-{{$index}}">
             {{$index}} - {{parentMsg}} {{childMsg}}
         </li>
     </ul>
 </body>
 <script>
     var demo = new Vue({
         el : '#demo',
         data : {
             parentMsg : '滴滴',
             items : [
                 {childMsg : '顺风车'},
                 {childMsg : '专车'}
             ]
         }
     })
 </script>

有时候，我们更希望显式的访问变量，而不是隐式的回退到父元素，这时可以通过使用别名的方式进行实现：

v-repeat = ‘item in items’ （vue.js 0.12.8 及以后版本支持in分隔符）

-----------

要是要重复一个包含多个DOM元素的块，可以使用<template>

-----------

对于含有原始值的数组，可以简单的通过使用$value来获取值

 <body id="example">
     <ul id="tags">
         <li v-repeat="tags">
             {{$value}}
         </li>
     </ul>
 </body>
 <script>
     var demo = new Vue({
         el : '#tags',
         data : {
             tags : ['js','mvvm','value']
         }
     })
 </script>
 
 //输出
 js
 mvvm
 value

-----------

数组数据发生变动的时候，vue的监测方法，能触发视图更新：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

$set ----- demo.items.$set(0,{childMsg : 'Changed!'})

$remove --- demo.item.$remove(0)

filter ：返回新数组

concat ：返回新数组

slice ：返回新数组

demo.items = demo.items.filter(function(item){
	return item.childMsg.match(/hello/);
})

-----------

在vue中不能检测到下面数组的变化：

A: 直接用索引设置元素,eg:vm.items[0] = {}

　解决方案：可以直接用$set方法

B: 修改数据的长度 ,eg:vm.items.length=0

　解决方案：用一个空数组替换items

-----------

也可以使用v-repeat遍历一个对象，每一个重复的实例都有一个特殊的属性$key,对于原始值，可以使用$value获取

3种方法：$add(key,value),$set(key,value),delete(key,value)

<body id="example">
    <ul id="repeat-object">
        <li v-repeat="primitiveVlaue">{{$key}} : {{$value}}</li>
        <li>======</li>
        <li v-repeat="objectVlaue">{{$key}} : {{msg}}</li>
    </ul>
</body>
<script>
    var demo = new Vue({
        el : '#repeat-object',
        data : {
            primitiveVlaue : {
                a : 'a',
                b : 'b',
                c : 'c'
             },
             objectVlaue : {
                 one : {
                     msg : 'hello'
                 },
                 two : {
                     msg : 'didi'
                 }
             }
        }
    })
</script>
<!-- 输出 -->
a : a
b : b
c : c
=======
one : hello
two : didi

-----------

v-repeat支持整数，就是重复的次数

<div id="range">
    <div v-repeat="val">hi! {{$index}}</div>
</div>
<!-- 输出 -->
hi! 0
hi! 1
hi! 2
 
<span v-repeat="n in 6">{{n}}</span>
<!-- 输出 -->
0 1 2 3 4 5

-----------

filterBy：

<input type="" name="" v-model="searchText">
<ul>
    <li v-repeat="user in users | fiterBy searchText in 'name">{{user.name}}</li>
</ul>
 
users[
    {
        name : '快1',
        tag : '1'
    }
    {
        name : '快2',
        tag : '2'
    }
    {
        name : '快3',
        tag : '3'
    }
]

orderBy：

<body id="example">
    <ul>
        <li v-repeat="user in users | orderBy field reverse">{{user.name}}</li>
    </ul>
</body>
<script type="text/javascript">
    var demo = new Vue({
        el : '#example',
        data : {
            filed : 'tag',
            reverse : false,
            users : [
                {
                    name:'快1',
                    tag : 1
                },
                {
                    name:'快5',
                    tag : 5
                },
                {
                    name:'快3',
                    tag : 3
                }
            ]
        }
    })
</script>
<!-- 输出 -->
快1
快3
快5

v-for:基于源数据重复渲染元素，使用$index呈现相应的数据索引

v-for='item in items' 或者在1.0.17版本之后支持 v-for='item of items'

<body id="example">
    <ul id="demo">
        <li v-for='item in items' class="item-{{$index}}">
            {{$index}} - {{parentMessage}} {{item.msg}}
        </li>
    </ul>
</body>
<script>
    var demo = new Vue({
        el : '#demo',
        data : {
            items : [
                {msg : 'didi'},
                {msg : 'ddddd'}
            ]
        }
    })
</script>

v-text：更新元素的textContent

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

v-html：更新元素的innerHTML。如果想要复用模板，则应当使用partials

<span v-html="html"></span>
<!-- same as -->
<span>{{html}}</span>

v-bind：用于响应更新HTML特性，将一个或多个attribute或者一个组件prop动态绑定到表达式

<!-- 绑定attribute -->
<img v-bind:src="data:imageSrc" alt="">
<!-- 缩写 -->
<img :src="data:imageSrc">
 
在绑定class或者style的时候，支持其他类型的值，如数组或对象
<body id="example">
    <div :class="[classA,{classB:isB,classC:isC}]"></div>
</body>
<script type="text/javascript">
    var demo = new Vue({
        el : '#example',
        data : {
            dataA : 'A',
            isB : false,
            isC : true
        }
    })
</script>

-----------

当没有参数的时候，可以绑定到一个对象，但是此时的class以及style绑定不支持数组和对象

<body id="example">
    <div v-bind="{id:someProp,'OTHERAttr':otherProp}"></div>
</body>
<script type="text/javascript">
    var demo = new Vue({
        el : '#example',
        data : {
            someProp : 'idName',
            otherProp : 'prop'
        }
    })
</script>

v-on：绑定事件监听

在监听自定义事件时，内联语句可以访问一个$arguments属性，他是一个数组，包含了传给子组件的$emit回调的参数

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在监听原生DOM事件时，如果只定义一个参数，DOM event为事件的唯一参数，如果在内联语句处理器中访问原生DOM事件，则可以用特殊变量$event把它传入方法

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello',$event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

v-on后面不仅可以跟参数，还可以增加修饰符

.stop --- event.stopPropagation()
.prevent --- event.preventDefault()
.capture --- 添加事件侦听器时使用capture模式
.self --- 只当事件从侦听器绑定的元素本身触发时才会触发回调
.{keyCode | keyAlias} -- 只在指定按键上触发回调，键值包含【esc:27、tab：9、enter：13、spac：32、'delete'：[8,46]、up：38、left:37、right：39、down：40】

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<button @click.prevent></button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<button @keyup.enter="onEnter"></button>
<!-- 键修饰符，键代码 -->
<button @keyup.13="onEnter"></button>

v-el:为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素，可以用v-el:some-el设置this.$els.someEL

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
通过this.$els获取相应的DOM元素
this.$els.msg.textContent
this.$els.otherMsg.textContent

v-pre:编译时跳过当前元素和它的子元素

v-cloak：保持在元素上直到关联实例结束编译　　

Vue - 内部指令的更多相关文章

Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
Vue 2.0入门基础知识之内部指令
1.Vue.js介绍当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
【复习】VueJS之内部指令
Vuejs 源码:https://github.com/zhuangZhou/vuejs 下载Vue.js 官网:http://vuejs.org live-server使用 live-server是 ...
vue的指令
我之前学了学angular 发现angular和vue的指令有点类似先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示实现按钮(HTML元素)级别权限控制涉及知识点: 路由守卫 Vuex使用 Vue自定义指令导航守卫前端工程采用Github开源项目Vue-elem ...
vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
vue自定义指令用法总结及案例
1.vue中的指令有哪些?

随机推荐

Qt控件样式 Style Sheet Demo
迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...
V4L2框架分析学习一
转载于http://www.techbulo.com/1193.html 1.概述 Video4Linux2是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口.凡 ...
使用Open xml 操作Excel系列之二--从data table导出数据到Excel
由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...
CMake学习笔记
C++开发者必备技能CMake 先简单介绍一下,CMake是一个跨平台的编译工具,它可以根据不用的平台,不同的编译环境,生成不同的MakeFile,从而控制编译的过程. 使用CMake的步骤: 1. ...
excel使用技巧
1,如何得到开口向下的大括号 1,插入左右方向的大括号. 2,点击绘制的大括号,旋转出现绿点,旋转90度,即可. 问题2:Excel如何截图 1,选中截图内容,选择复制->复制为图片->( ...
跟着百度学PHP[6]超级全局变量
超级全局变量在PHP 4.1.0之后被启用, 是PHP系统中自带的变量,在一个脚本的全部作用域中都可用. 参考文献:http://www.runoob.com/php/php-superglobals ...
cstring to char *例子
Cstring m_strDescPath = ""; //类的成员变量 //"打开文件"对话框,选择文件,返回其路径 m_strDescPath = Boot ...
django 强制登录最佳实践
参考: https://python-programming.courses/recipes/django-require-authentication-pages/ 即通过中间件来做AOP拦截.不用 ...
Mac挂载NTFS移动硬盘读取VMware虚拟机文件
一.Mac 挂载NTFS移动硬盘进行读写操作 (Read-only file system) 注意如下图所示先卸载,然后按照下图的命令进行挂载.然后cd /opt/003_vm/ &&am ...
arm_GPIO_简单编程例题
题目分析下面的汇编led.s,查看S5PV210手册,说明程序的功能,和最终的运行结果,以及相关的硬件原理图,S5PV210手册可以在教学资源里的学习资料文件夹中下载. .equ GPH3CON ...

Vue - 内部指令

Vue - 内部指令的更多相关文章

随机推荐

热门专题