zoukankan      html  css  js  c++  java
  • 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>



  • 相关阅读:
    Django-ORM
    深入理解vue 修饰符sync
    PS切图
    用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
    float浮动导致父元素高度坍塌的原因及清除浮动方法
    vue keep-alive
    ES6 箭头函数
    ES6 Module(模块)
    MVC模式 和 MVVM模式
    移动端适配代码
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9539954.html
Copyright © 2011-2022 走看看