<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>