Vue声明式渲染、条件与循环、事件绑定、双向绑定

1.vue声明式渲染{{ message }}

export default {

  name: "App",

data: {

    message: 'hello '  ，

    syk:122

}

}

效果图}

2.v-if

export default {

  name: "App",

data: {

    seen: true

  }

}

export default {

  name: "App",

data: {

    seen: true

  }

}

运行结果为if 当seen: false时运行结果为else

export default {

  name: "App",

data: { type: 'E' }  

}      运行结果为Not A/B/C

 v-show：

v-show

data: {seen1: true} 运行结果为v-show

tips:v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

3.v-for

export default {

  name: "App",

data: {

    arr: [

      { text: '学习 JavaScript' },

      { text: '学习 Vue' },

      { text: '整个牛项目' }

    ]

  }

}

tips：要写:key="" 否则会报错

    v-for 还支持一个可选的第二个参数，即当前项的索引。

export default {

  name: "App",

data:{

parentMessage: "Parent",

      items: [{ message: "Foo" }, { message: "Bar" }],

}

}

用 v-for 来遍历一个对象

export default {

  name: "App",

data: {

    object: {

      title: 'How to do lists in Vue',

      author: 'Jane Doe',

      publishedAt: '2016-04-10'    }

  }

}

4.v-on:click

export default {

  name: "App",

data: { message: 'hello'  },

}

methods: {

    reverseMessage: function(){

      this.message = this.message.split('').reverse().join('')

    }

  }

tips:v-on:click="reverseMessage"可简写为@click="reverseMessage"

内联处理器中的方法

5.v-model双向绑定

export default {

  name: "App",

 data: { message: 'Hello Vue!'  }

}