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>



原文地址:https://www.cnblogs.com/wzndkj/p/9539954.html