<!--注意html中使用的时候，前面要加 ~ ，js中使用只需要包含 @ 就好了-->
<img src="~@/assets/image/tabbar/home.png" alt="">

<img :src="abc" alt="">

<!--html-->
<button>Button</button>
<button>Button</button>
<button>Button</button>

<!--css略-->
<!--html部分代码-->
<div class="box">
    <div class="left">
        <ul>
            <li>0</li>
            <!--省略1-8-->
            <li>9</li>
        </ul>
    </div>
    <div class="right">
        <div>0</div>
        <!--省略1-8-->
        <div>9</div>
    </div>
</div>
<!--js部分代码-->
<script>
    $(function () {
        //默认显示第一个元素
        $('.right>div').eq(0).show();
        $('.left ul li').click(function () {
            // 高亮选中，恢复其他
            $(this).css('background-color','yellowgreen');
            $(this).siblings().css('background-color','');
            // 获取选中的小标，用于选中展示哪张图片
            var index = $(this).index();
            // 显示选中，隐藏其他
            $('.right>div').eq(index).show();
            $('.right>div').eq(index).siblings('div').hide();
        })
    })
</script>

<!--上方排他部分，可以缩减为-->
<script>
    $('.right>div').eq(index).show().siblings('div').hide();
</script>

<!--原版-->
<!--没有动画效果，需要定义两个动作-->
<script>
    $(function () {
        $('body>ul>li').mouseover(function () {
            $(this).children('ul').show();
        });
        $('body>ul>li').mouseleave(function () {
            $(this).children('ul').hide();
        });
    });
</script>
<!--新版-->
<!--更加简洁好理解-->
<script>
    $(function () {
        $('body>ul>li').hover(function () {
            $(this).children('ul').slideDown();
        },function f() {
            $(this).children('ul').slideUp();
        })
    });
</script>
<!--高级缩减版-->
<!--非常简洁-->
<script>
    $(function () {
        $('body>ul>li').hover(function () {
            $(this).children('ul').slideToggle();
        })
    });
</script>
<!--升级缩减版-->
<!--防止出现动画排队的情况-->
<script>
    $(function () {
        $('body>ul>li').hover(function () {
            $(this).children('ul').stop().slideToggle();
        })
    });
</script>

<!--html部分代码-->
<ul>
    <li class="odd">
        <div class="big odd">这个是1</div>
        <div class="small odd">1</div>
    </li>
    <!--中间以奇偶排列增加6个li，略-->
    <li class="even">
        <div class="big odd">这个是8</div>
        <div class="small odd">8</div>
    </li>
</ul>

<div class="parent">
  <div class="son"></div>
</div>
<script>
  $('.parent').on('click',function(){
    console.log('父盒子');
  })
  $('.son').on('click',function(event){
    console.log('子盒子');
    // 阻止事件冒泡
    event.stopPropagation();
  })
</script>

<div id="app">
  <cpm :key="index" v-for="(item,index) in id" :id="index"></cpm>
</div>
<script>
  // 局部组件
  const cpmc = Vue.extend({
        props: ["id"],
        data: function () {
          return {};
        },
        template: `
          <div>
            <h2>这个是组件{{id+1}}号</h2>
            <p>红红火火恍恍惚惚</p>
          </div>
          `,
      }
  );

  let vue = new Vue({
    el: "#app",
    data: {
      message: 1,
      id: [{ id: 0 }, { id: 1 }, { id: 3 }, { id: 4 }, { id: 5 }],
    },
    methods: {},
    components: {
      'cpm': cpmc,
    },
  });
</script>

<div id="app">
  <comp></comp>
</div>
<script src="../../js/vue.js"></script>
<script>

  //全局组件
  Vue.component('comp',{
    data: function(){
      return {
        items: [1,2,3,4,5],
      }
    },
    template: `
      <div>
        <h2 :key="index" v-for="(item,index) in items">{{index+1}}</h2>
      </div>
    `
  })
  const app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

<div id="app">
     <cpn></cpn>
   </div>
   <!-- 下面全局组件会找到id为cpn的script标签，
 将里面的内容作为模板渲染到整个dom中 -->
   <script type="text/x-template" id="cpn">
     <h2>这个是写在script里面的模板</h2>
   </script>
   <script src="../../js/vue.js"></script>
   <script>
     Vue.component("cpn", {
       template: "#cpn",
     });
     const app = new Vue({
       el: "#app",
       data: {
         message: "",
       },
     });
   </script>

<div id="app">
     <cpn></cpn>
   </div>
   <!-- 下面全局组件会找到id为cpn的template标签，
 将里面的内容作为模板渲染到整个dom中 -->
   <template id="cpn">
     <h2>这个是写在template标签里面的模板</h2>
   </template>
   <script src="../../js/vue.js"></script>
   <script>
     Vue.component("cpn", {
       template: "#cpn",
     });
     const app = new Vue({
       el: "#app",
       data: {
         message: "",
       },
     });
   </script>

<!-- 子组件模板内容 -->
<template id="tags">
  <div>
    <!-- 设置子组件的点击事件 -->
    <button :key="item.id" v-for="item in tags_list" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>


<div id="app">
  <!-- 引用模板，注册监听事件，与子组件的点击事件中传回的第一个参数同名，接收默认自带子组件传递过来的数据，这里cpnClick括号内不写，下方监听函数也可以直接使用item参数 -->
  <tags @item-click="cpmClick"></tags>
</div>
<script src="../../js/vue.js"></script>
<script>
  Vue.component("tags", {
    template: "#tags",
    data: function () {
      return {
        tags_list: [
          { id: "aaa", name: "热门推荐" },
          { id: "bbb", name: "男生上衣" },
          { id: "ccc", name: "男生裤子" },
          { id: "ddd", name: "女生上衣" },
          { id: "eee", name: "女生裤子" },
        ],
      };
    },
    methods: {
      btnClick: function(item){
        // 设置子组件的点击事件，传回的数据名称以及数据
        this.$emit('item-click',item);
      }
    }
  });
  const app = new Vue({
    el: "#app",
    data: {
      message: "",
    },
    methods: {
      cpmClick: function(item){
        console.log('触发了父组件的点击事件,收到了'+item.name+'按钮传来的参数');
      }
    }
  });
</script>

<div id="app">
  <form action="http://itcast.cn">
    <div>
      <span>姓名：</span>
      <span>
          <input type="text" v-model='uname'>
        </span>
    </div>
    <div>
      <span>性别：</span>
      <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
    </div>
    <div>
      <span>爱好：</span>
      <input type="checkbox" id="ball" value="1" v-model='hobby'>
      <label for="ball">篮球</label>
      <input type="checkbox" id="sing" value="2" v-model='hobby'>
      <label for="sing">唱歌</label>
      <input type="checkbox" id="code" value="3" v-model='hobby'>
      <label for="code">写代码</label>
    </div>
    <div>
      <span>职业：</span>
      <select v-model='occupation' >
        <option value="0">请选择职业...</option>
        <option value="1">教师</option>
        <option value="2">软件工程师</option>
        <option value="3">律师</option>
      </select>
    </div>
    <div>
      <span>个人简介：</span>
      <textarea v-model='desc'></textarea>
    </div>
    <div>
      <!--注意要使用js的方式来提交-->
      <input type="submit" value="提交" @click.prevent='handle'>
    </div>
  </form>
</div>
</body>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      uname: 'Jamie',
      gender: 1,
      hobby: ['1','2'],
      occupation: 1,
      desc: 'Jamie is a softwareEngineer!',
    },
    method:{
    }
  })
</script>

<div id="app">
  <!--这里三行的作用等价-->
  <input type="text" v-model="msg"><br>
  <input type="text" v-bind:value="msg" v-on:input="handle"><br>
  <input type="text" :value="msg" @input="msg=$event.target.value"><br>
  <div>{{msg}}</div>
</div>
<script src="../../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      msg: '',
    },
    methods: {
      handle: function (event){
        //使用最新的输入域中的内容来更新msg的内容
        this.msg = event.target.value;
      }
    }
  })
</script>

<!--正常情况下，父盒子的点击事件会被冒泡触发，使用.stop修饰
	之后，就可以阻止事件冒泡-->
<div id="app" @click="handleFather">
  <button @click.stop="handle">click</button>
</div>
<script src="../../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {

    },
    methods: {
      handleFather: function (){
        alert('I am father!')
      },
      // 当直接调用函数名作为指令的时候，事件对象会
      // 作为第一个参数传进来，（有参数则为最后一个）
      handle: function (event){
        // 这里也有同样的作用
        // event.stopPropagation();
        alert('I am son!');
      }
    }
  })
</script>

<div id="app">
  <!--被prevent修饰之后，a标签的工作不再是跳转了-->
  <a href="https://www.baidu.com" @click.prevent="handle">百度</a>
</div>
<script src="../../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
      handle: function (event){
        console.log('点击了!');
      }
    }
  })
</script>