vue.js的常用指令

vue.js的常用指令

1、v-html 、v-text
标签内绑定内容，v-html可以显示含有标签的
2、v-model
一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
3、v-show
他跟元素的显示和隐藏有关系,v-show指令取值为true/false，分别对应着显示/隐藏
4、v-if 、v-else-if、v-else

<div id="app-3"v-bind:title='tit'>     <p v-if="seen">现在你看到我了if</p>     <p v-else-if="seen2">现在你看到我了elseif</p>     <p v-else>现在你看到我了else</p></div>

script:

var app3 = new Vue({        el: '#app-3',        data: {            seen: false,            seen2:true,            tit:'标题信息'        }    })

5.v-on : 绑定事件
v-on : click 可以简写为@click,@绑定一个事件。
6.v-once 只渲染一次

<div id="app-7">    <input type="text" v-model='mg'/>    <p v-once>{{mg}}</p></div>

<script>    var app7 = new Vue({        el: '#app-7',        data: {            mg: 'hello vue!'        }    })

7.v-bind: 绑定属性
可以直接简写为 ： 这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。
8.v-for
把数组的值展现到视图上

<div id="app-4">    <ul>        <li v-for="(todo,index) in todos">            {{ index+':'+todo.text }}        </li>    </ul></div>

<script>    var app4 = new Vue({        el: '#app-4',        data: {            todos: [                {text: '学习 JavaScript'},                {text: '学习 Vue'},                {text: '整个牛项目'}            ]        }    })