我的位置:首页 > 资讯>Vue(一)

Vue(一)

时间:2020-03-17 15:54:00 来源:互联网 热度: 作者: 佚名 字体:

  • 指令:带有v-前缀的特殊属性。用于在表达式的值改变时,将某些行为应用到DOM上。下面的例子,用到了v-bind指令将某一层div的属性与checkbox的值绑定,当use为true时,引用class1的样式

<div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ use: false } }); </script>
  • v-if:v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>
  • v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
  • v-on:用于监听事件。
  • v-forv-for="(value, key, index) in object"  ,其中第一个参数是属性,第二个是键,第三个是索引。
  • 参数:在指令后以冒号指明,在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>
  • 修饰符:.指明一个指令应该以特殊方式绑定。
  • 过滤器:由"管道符"指示。