vuejs-指令详解
来源:互联网 发布:数据分析思维书籍 编辑:程序博客网 时间:2024/06/01 07:12
<div id="example-2"> <p v-if="greeting">Hello!</p> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example-2', data: { greeting: true } }) </script>
由于v-if是一个指令,需要将它添加到一个元素上。但是如果想要切换多个元素,则可以把元素当做包装元素,并在其上使用v-if,最终的渲染结果不会包含它。代码如下: <div id="example-2"> <template v-if="greeting"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 1</p> </template> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example-2', data: { greeting: true } }) </script>
v-show
v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素被隐藏。查看DOM时,会发现元素上多了一个内联样式style=”display:none”。
如图所示:
注:v-show不支持语法。
一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。
v-else
v-else就是JavaScript中的else的意思,它必须跟着v-if或者v-show使用。如下代码:
<div id="example"> <P v-if="ok">我是对的</P> <p v-else="ok">我是错的</p> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example', data: { ok: false } }) </script>
将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做。我们可用用另一个v-show替换v-else。v-modelv-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下:<div id="example"> <form> 姓名: <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别: <input type="radio" id="one" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" id="two" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" id="jack" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" id="john" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" id="move" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" id="mike" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份: <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { data:{ name:'', sex:'', interest:[], identity:'' } } }) </script>
除了以上用法,在v-model指令后面还可以添加多个参数(number、lazy、debounce)。1.number如果想要用户的输入自动转换为Number类型(如果原值的转换结果为NAN,则返回原值),则可以添加一个number特性。2.lazy在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。代码如下: <div id="example"> <input v-model="msg" lazy style="width:500px;"/><br/> {{msg}} </div> <script type="text/javascript"> new Vue({ el: '#example', data: { msg:'内容是在change事件后才改变的~' }, watch:{ } }) </script>
3.debounce设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如,在input中输入内容时要随时发送ajax请求),那么它较为有用。v-repeatv-repeat(已经废除)指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。数组变动检测Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(), pop(), shift(), unshift(), splice(), sort(), reverse() example1.items.push({ message: 'Baz' }); example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/); });
vue.js还增加了两个方法来观测变化:、set、remove。我们应该尽量避免直接设置数据绑定的数组元素,因为这些变化不会被vue.js检测到,因而也不会更新视图渲染。可以使用<div id="example"> <input v-model="searchText"/> <ul> <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { users:[ { name:'快车', tag:'1' }, { name:'出租车', tag:'2' }, { name:'顺风车', tag:'3' }, { name:'专车', tag:'4' } ] } }) </script>
在输入框中输入’专车’,得到如图所示的结果:2.orderBy(0.12版本)实现降序排列,例: <div id="example"> <ul> <li v-for="user in users | orderBy field reverse">{{user.name}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { field:'tag', reverse:-1, users:[ { name:'出租车', tag:'2' }, { name:'快车', tag:'1' }, { name:'顺风车', tag:'3' }, { name:'专车', tag:'4' } ] } }) </script>
结果:专车顺风车出租车快车v-for使用$index来获得相应的数组索引。<div id="example"> <ul> <li v-for="item of items" class="item-{{$index}}"> {{$index}} - {{parentMessage}} - {{item.msg}} </li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { parentMessage:'滴滴', items:[ {msg:'顺风车'}, {msg:'专车'} ] } }) </script>
结果:0 - 滴滴 - 顺风车1 - 滴滴 - 专车注:vuejs1.0.17及以后低版本支持of分隔符,更接近JavaScript遍历器语法。有时我们可能想重复一个包含多个DOM元素的块,可以使用,如: <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul> v-for也支持整数 代码如下: <div> <span v-for="n in 10">{{ n }} </span> </div> 或者 <div> <span v-for="n in 10">{{ $index }} </span> </div>
v-text
v-text指令可以更新元素的textContent.
{{msg}}
得到的结果一样。
v-html
v-html指令更新元素的innerHTML。
<div id="example"> <p v-html="html"></p> <p>{{{html}}}</p> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { html:'<p>效果一样</p>' } }) </script>
注:不建议在网站上直接动态渲染任意HTML片段,很容易导致XSS攻击。v-bindv-bind指令用于响应更新HTML特性,将一个或者多个attribute,或者一个组件prop动态绑定到表达式。v-bind可以简写为:ButtonButton在绑定class或者style时,支持其他类型的值,如数组或对象。如: <div id="example"> <div :class="[classA,{classB:isB,classC:isC}]"></div> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { classA:'A', isB:false, isC:true } }) </script>
结果如图:
如果没有参数时,可以绑定到一个对象。注意,此时class和style绑定不支持数组和对象(对象key会转换为小写)。代码如下:
<div id="example"> <div v-bind="{id:someProp,'OTHERATTR':otherProp}"></div> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { someProp:'idName', otherProp:'prop' } }) </script>
结果如图:
在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为:
.sync——双向绑定,只能用于prop绑定。
.once——单次绑定,只能用于prop绑定。
.camel——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定,通常用于绑定用驼峰命名的SVG特性,比如viewBox。
v-on
v-on指令用于绑定事件监听器。事件类型由参数指定。
如果访问原始DOM事件,可以使用$event传入方法。
<div id="example"> <button v-on:click="greet">Greet</button> </div> var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 methods 对象中定义方法 methods: { greet: function (event) { // 方法内 this 指向 vm alert('Hello ' + this.name + '!') // event 是原生 DOM 事件 alert(event.target.tagName) } } })
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> ‘Hello Vue.js!’
按键修饰符
[v-cloak] { display: none; } html: <div v-cloak> {{ message }} </div>
- vuejs-指令详解
- vuejs-指令详解
- vuejs 详解
- Vuejs的其他指令
- Vuejs中的 一些指令和案例
- vueJs
- vuejs
- VueJS
- vuejs
- vueJS
- vuejs
- vuejs
- VueJs探索之watch用法详解
- Vue-cli 开启 Vuejs 项目----详解
- VueJs探索之watch用法详解
- Vue.js学习系列(五)---vuejs指令
- VueJS第二天2--关于自定义过滤器 自定义指令。。。
- 八小时实现迷你版vuejs六:实现常用指令
- android开发 button的实现方法(OnClickListener)
- Neo4j CQL -(1)- CREATE命令
- threeJS中4*4矩阵实现平移和旋转的原理
- 迭代方法优于循环
- java中数组
- vuejs-指令详解
- 工作、学习、跑步以及生活
- Java程序员应该知道的10个调试技巧
- 软件测试
- DOM简介【DOM】
- java并发编程
- 为什么Docker会受欢迎?
- 响应式背景图片的几种方法
- 如何下载安装Eclipse插件MiddleGenIDE