Vue的学习(2)

Vue.js的模板语法

1.数据绑定的最常见的方法是插值法，写法{{}}

2.输出html代码，命令为v-html

例如：

<div id="app">

　　<p v-html="">

　　</p>

<div>

<script>

new Vue({

el: '#app',

　 data:{

　　message:'<h1>加油，Abby</h1>'

　　}

})

</script>

3.属性绑定命令v-bind

例如：

.class1{

　　background: #444;
       color: #eee;

}

<div id="app">

　　<p>{{5+5}}</p>

　　<p v-bind:class=“‘calss1’ : use”>你好</p>

</div>

<script>

　　new Vue({

　　　　el:'#app',

　　　　data:{

　　　　　　use:false;

　　　　}

　　})

</script>

4.v-if根据表达式的true和false决定是否执行下面的语句

5.v-model实现数据的双向绑定

例如：

<div id="app">

　　<p>{{result}}</p>

　　<p v-model="result"></p>

</div>

<script>

　　new Vue({

　　　　el:'#app';

　　　　data:{

　　　　　　result:'你好'

}

})

</script>

注意：v-model是用在input,select、textarea、checkbox、radio表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

6.v-on 用来实现监听事件

例如：

<div id="app">

　　<p>{{message}}</p>

　　<button v-on:click="reverses">点击反转</button>

</div>

<script>

　　new Vue({

　　　　el:'#app',

　　　　data:{

　　　　message:'abcd'

　　},

　　　　 methods:{

　　　　　　reverses:function(){

　　　　　　　　return this.message=this.message.spilt('').reverse().join('');

}

}

})

</script>