vuejs数据和事件 

<body>
　　<div id='root'>{{number}}</div>
　　<script>
　　　　new Vue({
　　　　　　el:'#root',
　　　　　　data:{
　　　　　　　　msg:'hello world',
　　　　　　　　number:123
　　　　　　}
　　　　})
　　</script>
</body>
 
数据写法
{{number}} //这个语法我们把他叫做插值表达式，除了这种写法,还有两种写法
<h1 v-text='number'></h1> //不编译html,引号内部是个变量
<h1 v-html='number'></h1> //编译html

 

事件
<div id='root'>
　　<div v-on:click="handleClick">{{content}}</div>
</div>
<script>
　　new Vue({
　　　　el:'#root',
　　　　data:{
　　　　　　content:'hello'
　　　　},
　　　　methods: {
　　　　　　handleClick:function(){
　　　　　　　　this.content = 'world';
　　　　　　}
　　　　}
　　})
</script>

用指令v-on:click绑定，方法写在methods选项里面，在vue里面把hello变成world，之前要去改变dom，vuejs里面不用改变dom，直接改变数据就好了，this.content表示这个实例Vue里面data的content的数据

 

v-on:click可以简写称@click
<div @click="handleClick">{{content}}</div>

 



posted @ 2018-08-27 06:40  wzndkj  阅读(396)  评论(0)  编辑  收藏  举报