Vue基础，数据绑定，事件绑定

<template>
  <div id="app">
    <!-- 1.{{msg}}绑定数据-->
    <h2>你好vue--{{msg}}</h2>

    <br />
这是一个根组件
    <br />
    <h3>{{obj.name}}</h3>

    <br />
    <hr />
    <!--2.数组循环遍历-->
    <ul>
      <li v-for="(item,index) in list">
        <!-- index获取索引值-->
        {{index}}--{{item}}
      </li>
    </ul>
    <!--2.1数组嵌套遍历-->
    <ul>
      <li v-for="item in list1">
        {{item.cate}}
        <ol>
          <li v-for="cars in item.list">{{cars.title}}</li>
        </ol>
      </li>
    </ul>

    <br />
    <hr />
    <!--3.条件判断-->
    <p v-if="no">现在你看到我了</p>
    <p v-if="true">现在你看到我了</p>
    <p v-if="ok">现在你看到我了</p>

    <br />
    <hr />
    <!--4.数据绑定-->
    <div v-bind:title="title">鼠标瞄上可以显示</div>
    <img src="//www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif" alt />
    <img :src="src" alt />
    <!--4.数据绑定v-bind:可以简写为:-->

    <br />
    <hr />
    <!--5.html绑定-->
    <div v-html="h"></div>  <!--解析成html输出-->

    <br />
    <hr />
    <!--6.class绑定-->
    <div v-bind:class="{'blue':ok}">我是一个div :class控制</div>
    <!--6.1.class绑定-->
    <ul>
      <li v-for="(item,index) in list" :class="{'blue':index==0}">
        <!-- index获取索引值-->
        {{index}}--{{item}}
      </li>
    </ul>

    <br />
    <hr />
    <!--7.style对象绑定-->  <!--也可以是内联样式-->
    <div v-bind:style="styleObject">我是一个div :style控制</div>

    <br />
    <hr />
    <!--8.双向数据绑定及事件绑定  -->
    <h2>{{msg}}</h2>
    <input type="text" v-model="msg" />  <!--input和h2里的msg值同时变化-->
    <button v-on:click="getMsg()">获取表单里面的数据get</button>  <!--v-on:可以简写为@-->
    <button @click="setMsg()">设置表单的数据set</button>
    <br />
    <input type="text" ref="userinfo" />
    <br />
    <div ref="box">我是一个box</div>
    <br />
    <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
    <br /> <br />
    <button @click='requestData()'>请求数据</button>
    <p>--------------------------------</p>
    <ul>
      <li v-for="item in list0">  <!--点击请求数据，在li里出现-->
        {{item}}
      </li>  
    </ul>
    <button @click="deleteData(111)">执行方法传值111</button> <!--可添加事件及按键修饰符：@click.stop ...  -->
    <button data-aid="自定义的属性" @click="event($event)">事件对象</button>

    <br>
    <hr>
    <!-- 9.todoLis待办事项t添加删除修改状态-->  <!--用双向数据绑定-->
    <input type="text" v-model="todo" @keydown="doAdd($event)"> <!--事件对象对enter键执行doAdd事件-->
    <button @click="doAdd()">+增加</button>
    <br>---------------------------------
    <h2>进行中</h2>
    <ul>
      <li v-for="(item,index) in list3" v-if="!item.checked"> 
        <input type="checkbox" v-model="item.checked"> {{item.title}}-- <button @click="doRemove(index)">-删除</button>
      </li>  
    </ul>
    <h2>已完成</h2>
     <ul>
      <li v-for="(item,index) in list3" v-if="item.checked"> 
        <input type="checkbox" v-model="item.checked"> {{item.title}}-- <button @click="doRemove(index)">-删除</button>
      </li>  
    </ul>
    
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    //业务逻辑里面定义的数据,可以是属性，对象,数组。。。
    return {
      ok: true,
      no: false,
      msg: "你好vue",
      obj: {
        name: "Jack"
      },
      list: ["111", "222", "333"],
      list1: [
        {
          cate: "汽车品牌",
          list: [{ title: "大众" }, { title: "奥迪" }]
        },
        {
          cate: "汽车品牌",
          list: [{ title: "大众" }, { title: "奥迪" }]
        }
      ],
      title: "我是一个title",
      src:
        "//www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif",
      h: "<h2>我是h2</h2>",
      styleObject: {
        color: "red",
        fontSize: "22px"
      },
      list0:[],
      todo:'',
      list3:[{
        title:'学习vue',
        checked:false,

      }],
    };
  },
  methods: {
    /*放方法的地方*/
    getMsg() {
      // alert('vue方法执行了');
      //方法里面获取data里面的数据
      alert(this.msg);
    },
    setMsg() {
      this.msg = "我是改变后的数据";
    },
    getInputValue() {
      console.log(this.$refs.userinfo);
      this.$refs.box.style.background = "red";
      //获取ref定义的dom节点
      alert(this.$refs.userinfo.value);
    },
    requestData(){
      for(var i=0;i<=4;i++){
        this.list0.push('我是第'+i+'条数据。');
      }
    },
    deleteData(d){
      alert(d);
    },
    event(e){
      // e.srcElement 获取dom节点
      e.srcElement.style.background='red';
      alert(e.srcElement.dataset.aid); //打印自定义属性的值
    },
    doAdd(){
      //获取文本框输入的值 再把文本框的值push到list3 用对象来判断改变状态
      this.list3.push({
        title:this.todo,
        checked:false
      });
      //push完之后初始化todo的值
      this.todo='';
    },
    doAdd(e){
      if(e.keyCode==13){
        this.list3.push({
        title:this.todo,
        checked:false
      });
      //push完之后初始化todo的值
      this.todo='';
      }
    },
    doRemove(index){
      // alert(index)
      this.list3.splice(index,1);
    },

  }
};
</script>

<style lang="css">
.blue {
  color: blue;
  color: red;
}
*{
  list-style: none;
}
</style>