01-vue第一天学习笔记

1.vue快速上手

1.1 概念：vue是一个用于构建用户界面的渐进式框架

1.2 插值表达式

1. 语法：{{表达式}}
2. 注意点：
   1. 使用的数据必须存在(data)
   2. 支持的是表达式，而非语句
   3. 不能在标签属性中使用{{}}插值

1.3 vue响应式

1. 概念：数据更换，视图会自动更新。使用数据驱动视图

1.4 vue指令

1. 概念：带有v-前缀的特殊属性，不同指令对应不同功能

<!-- v-html -->
<div id="app">
    <div v-html="msg"></div>
  </div>
  
  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <a href="http://www.itcast.cn">学it, 来黑马</a>
        `
      }
    })
  </script>


<!-- v-show和v-if -->
  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="false" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  </script>


<!-- v-else-if和v-else -->
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else-if="gender === 0">性别：♀ 女</p>
    <hr>
    <p v-if="grade >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="grade >= 70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="grade >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender:0,
        grade:85,
      }
    })
  </script>

  <!-- v-on -->
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="flag">黑马程序员</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag:true
      },
      methods: {
        fn() {
          this.flag = !this.flag
        }
      }
    })
  </script>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="fn(price1)">可乐{{price1}}元</button>
      <button @click="fn(price2)">咖啡{{price2}}元</button>
    </div>
    <p>银行卡余额：{{money}}元</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        price1:5,
        price2:10,
        money:1000
      },
      methods: {
        fn(cost) {
          this.money -= cost
        }
      }
    })
  </script>

  <!-- v-bind -->
  <div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
      <img v-bind:src="list[index]" :title="title[index]">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ],
        index: 0,
        title: [
          '上课咯',
          '都是知识',
          '不进脑子呀',
          '容我想想',
          '敲敲码',
          '小菜一碟',
        ]
      }
    })
  </script>

  <!-- v-for -->
  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="item in booksList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del(id) {
            this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>

  <!-- v-model -->
  <div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login() {
          console.log(this.username + this.password)
        },
        reset() {
          this.username = '',
          this.password = ''
        }
      }
    })
  </script>

综合案例-小黑记事本

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="input" />
    <button class="add" @click="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <div class="view">
          <span class="index">{{index + 1}}.</span> <label>{{item.name}}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length > 0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="all">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="../vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      list: [
        {id:1,name:'去学习'},
        {id:2,name:'打台球'},
        {id:3,name:'喝水'},
      ],
      input: ''
    },
    methods: {
      del(id) {
        this.list = this.list.filter(item => item.id !== id)
      },
      add() {
        //判断一下输入框是否为空
        if(this.input.trim() === '') {
          alert('请输入内容')
          return
        }
        //将新输入的任务添加到列表的最前面
        this.list.unshift({
          id: +new Date(),
          name: this.input
        })
        //清空输入框
        this.input = ''
      },
      all() {
        this.list = []
      }
    }
  })

</script>