Vuejs数据渲染

Vuejs是什么？
三大框架之一，良好的生态

• Vue-cli（vuejs脚手架工具，方便配置）
• 单文件组件+声明（响应式）式渲染
• 生命周期

Vue-cli
官方命令行工具
npm install -g vue-cli
vue init webpack my-project（都是默认值即可）
npm install && npm run dev

main.js

new Vue({
  //el:组件选择器，哪个组件是vuejs的实例
  el: '#app',
  data:{
    title:'hello Vue and Gwr',
    todos:['吃饭','喝水','亲宝宝']
  }
})

index.html

<div id="app">
      <p>{{title}}</p>
      <ul>
        <li v-for='todo in todos'>{{todo}}</li>
      </ul>
    </div>

v-if=’’：条件渲染
v-for=’ item in items '：列表渲染