首页 > 代码库 > VUE的基础语法(二)

VUE的基础语法(二)

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

  例如{{name}},如果只想插入一次就用<span v-once>{{name}}</span>;\

每个通过vue绑定的属性都是返回json,所以这里面可以写表达式,但是不能写语句。

 

一.VUE指令

1.v-text    更新元素的textcontent

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.v-html  更新元素的innerhtml。(内容按普通html插入,不会作为Vue模板进行编译,只在可信内容上使用,永不用在用户提交的内容上)

<div v-html="html"></div>

3.v-show 值为布尔值true或false,来切换元素的display值

4.v-if   v-if与v-show的区别在于v-if的元素及数据绑定/组件被销毁并重建,而v-show只是改变display值,v-else以及v-else-if同上

5.v-for   基于源数据多次渲染元素或模板块,必须使用特定语法alias in expression,为当前遍历的元素提供别名。

 

    <div id="app">
        <div v-for="(item,index) in list">{{item.name}}--{{index}}</div>
     <--这里面item代表源数据里面的每个数据,这里支持第二个参数为当前项的索引,这里也可以用of来替代in in是代表遍历属性,of表示遍历值--> </div> <script type="text/javascript" src=http://www.mamicode.com/"js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ list:[ {name:"bgg"}, {name:"xiongmao"} ] } }) </script>

 6.v-on  绑定监听事件,事件类型由参数指定,用在普通元素上面只能监听原生DOM事件,用在自定义组件上面可以监听子组件触发的自定义事件,在监听原生Dom事件时,方法以事件为唯一的参数,如果使用内联语句,只可以访问一个$event属性v-on:click="handle(‘ok‘, $event)"         ------------重点--------------

 

-------------------修饰符--------------------------------

.stop    调用event.stoppropagation()事件

.prevent    阻止默认事件,调用event.preventdefault();

.capture       添加侦听事件的时候使用capture模式

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

.{keyCode |keyalias}   只当事件是从侦听器绑定的元素本身触发时才回调 

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

 

 

VUE的基础语法(二)