vue的指令

ThinkSNS 发布于2019-08-26 13:25 / 2893人阅读

摘要：所有的指令都是以开头。将模板中的数据以字符串的形式输出。等价于防止刷新时出现在页面上通过控制的来控制元素的实现和隐藏。减缓首次加在压力，提高性能。单向数据绑定完整写法简写一般用于的获取学习学习学习绑定事件。

vue所有的指令都是以 " v-" 开头。

v-html：类似于 js中的innerHTML 。可以解析模板中的标签。

v-text：类似于 js中的innerText。将模板中的数据以字符串的形式输出。不会解析模板中的标签。等价于 {{ }} :防止刷新时{{ }}出现在页面上

v-show：通过控制css的display来控制元素的实现和隐藏。如果是频繁切换则推荐用此方法。节约性能。

v-if：当属性值为true时，则显示当前的元素，为false，那么显示v-false的元素。如果是偶尔切换，甚至不切换，则建议使用这个。减缓首次加在压力，提高性能。

v-else-if：配合着 v-if 使用，当条件不成立时，执行这步。

v-else ：当以上条件都不成立时，执行这一步。

 1 
 2     
 3 
 4     
 5     Title
 6 
 7 
 8 
 9     小于0
10     0-9
11     大于10
12 
13 
14 
15 
23

v-once:只绑定一次，当数据再次发生变化，也不会导致页面刷新，写在不想刷新的标签上。
v-bind：单向数据绑定

一般用于class的获取

1 
2     学习Vue
3     学习Node
4     学习React
5

1 var vm= new Vue({ 2 el:‘.box‘, 3 data:{ 4 isColor:true, 5 isSize:true 6 } 7 })

v-on: 绑定事件。

监听DOM事件，函数需要定义在methods中，不能和data中的内容重名，不能使用箭头函数

如果在绑定时，fn不带（），那么函数会默认接收一个事件对象e，mouseEvent ，如果绑定时带有小括号，那么默认接收事件对象，
既需要事件对象，又需要参数，需要在绑定的小括号中加一个$event,后面才是真正的实参
v=for:循环

循环数组

1
2 {{item}}

1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 arr:[1,2,4,574,45,448] 5 }, 6 })

效果如下：item 代表每一项

循环字符串

1 {{item}}

1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 str:"fdhsde" 5 }, 6 })

效果如下： item 代表着每一个字符

循环对象

{{item}}--{{key}}--{{index}}

 1     var vm=new Vue({ 
2         el:"#app",
 3         data:{
 4             obj:{
 5                 name:"qi",
 6                 age:"22",
 7             }
 8 
 9 }, 
10     })

效果如下：第一个参数是属性值，第二个参数是属性名，第三个参数是索引。

循环数字

效果如下：

v-cloak ：用于元素加载数据比较多时，vue解析时间比较长，为了防止{{}}出现，给该元素加上v-cloak属性，直到vue中把DOM数据插入到真实DOM中时，让当前的元素显示；

1 
2     {{value.name}}
3

1 [v-cloak] { 2 display: none; 3 }

但是有的时候会不起作用，可能的原因有二：

1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

1 [v-cloak] {
2     display: none !important;
3 }

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

v-model：只用于表单元素忽略了value。checkbox selected，将数据绑定的视图上，视图修改会影响数据的变化（双向数据绑定）

单选框中使用v-model ：会将都绑定val的划分成一组，只能选择其中一个
在复选框中，如果只有一个，v-model 会将值默认转换成布尔类型的值
如果v-model 在复选框中同时绑定一个值，那么会把这几个进行分组，把选中的值，同一放进数组中
如果多个input框同时绑定一个相同的v-model，通过是否在数组中进行选中或者不选择，各自来控制自己的状态
用于下拉框那么select上v-model绑定的值：跟option中的value属性有关，那么如果没有value属性，那么会取option标签中的内容

混合云云服务器 vue的计算属性指令的交互详解 vue的cdn加速 jsp的指令有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108798.html

每个人都能实现的vue自定义指令

摘要：指令绑定的前一个值，仅在和钩子中可用。字符串形式的指令表达式。上一个虚拟节点在上可根据需要定义一些钩子函数只调用一次，指令第一次绑定到元素时调用。指令的值可能发生了改变，也可能没有。前文先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多...

NickZhou 2019-08-21 18:23 评论0 收藏0
深入解析Vue源码

摘要：你可以使用的方法传入指令和定义对象来注册一个全局自定义指令。深度数据观察如果你希望在一个对象上使用自定义指令，并且当对象内部嵌套的属性发生变化时也能够触发指令的函数，那么你就要在指令的定义中传入。 Vue简介数据绑定 /** *假设有这么两个钟东西 **/ //数据 var object = { message: Hello World! } //DOM {{ messag...

weapon 2019-08-20 18:31 评论0 收藏0
Vue 混合、自定义指令、插件

摘要：当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合自定义指令除了默认设置的核心指令和也允许注册自定义指令。 vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合 ...

whlong 2019-08-21 16:17 评论0 收藏0
Vue.js学习第一课

摘要：示例了解一门语言，或者学习一门新技术，编写示例是我们的必经之路。分割线元素是否渲染在中，取决于前面使用的是还是指令。添加完对象后，重置对象删一个数组元素 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 MVVM模式下...

sf_wangchong 2019-06-27 16:34 评论0 收藏0
002-读书笔记-Vue官网认识数据与指令

摘要：首先把改成的形式这是一段测试文字绑定最后的显示效果如下，如果要看具体的形式，可以在谷歌人员开发工具中自行查看指令的组成部分经过上面的介绍，应该对指令有一个大概的认识，下面就来对指令的每一项进行说明。这篇笔记主要用来说明 Vue 中数据的定义和指令的一些特性，后续会做更深入的说明。 1.Vue中的data函数 1-1 使用data函数由于使用的是单文件组件，因此 Vue 组件中的数据...

hqman 2019-08-21 17:15 评论0 收藏0
使用vue自定义指令开发一个表单验证插件validate.js

摘要：今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...

warnerwu 2019-05-23 17:26 评论0 收藏0