Vue学习day03笔记

Vue学习day03笔记

图片转换（Vue学习day02知识点综合小案例）

列表数据采用数组保存，用v-bind指令设置元素属性src，因图片切换需频繁切换显示状态，用v-show而不用v-if。

<div id="mask">
      <div class="center">
          <h2 class="title">
              <img src="./img/logo02.png" alt="">
              好好看的小哥哥
          </h2>
          <img :src="imgArr[index]" alt="">
          <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
              <img src="./img/prev.png" alt="">
          </a>
          <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right" >
            <img src="./img/next.png" alt="">
         </a>
      </div>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
          el:"#mask",
          data:{
              imgArr:[
                "./img/00.jpg",                 
                "./img/01.jpg",
                "./img/02.jpg",
                "./img/03.jpg",
                "./img/04.jpg",
                "./img/05.jpg",
                "./img/06.jpg",
                "./img/07.jpg",
                "./img/08.jpg",
                "./img/09.jpg",
                "./img/10.jpg",
              ],
              index:0
          },
          methods:{
              prev:function(){
                 this.index--; 
              },
              next:function(){
                 this.index++;
              }
          }
      })
    </script>

v-for（根据数据生成列表结构）

数据结合的类型有数组、对象、数字、字符串、迭代器，其中数组最为常用。
语法：(item,index) in 数据 item代表每一项，index代表索引，命名可以修改
可结合其他指令使用
数组长度的更新会同步到页面上，是响应式的

<div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}好好看的小哥哥：{{item}}
            </li>
        </ul>
        <ul>
            <h2 v-for="item in vegetables" v-bind:title="item.name">
                {{item.name}}
            </h2>
        </ul>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["白敬亭","许凯","邓伦"],
                vegetables:[ 
                    {name:"西蓝花炒蛋"},
                    {name:"蛋炒西蓝花"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"花菜炒蛋"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
        })
    </script>

v-on补充（传递自定义参数，事件修饰符）

参考文档：http://cn.vuejs.org/v2/api/#v-on
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车

<div id="app">
        <input type="button" value="点击" @click="doIt(12345,'上山打老虎')">
        <input type="text" @keyup.enter="sayHi">
        
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                   alert("您好呀！")
                }
            }
        })
    </script>

v-model（获取和设置表单元素的值）

便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据与表单元素的值双向绑定，更改一方另一方即发生变化。

<div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
        <input type="button" value="修改message" @click="setM">
        
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"nihaoya"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="您好呀";
                }
            }
        })
    </script>

记事本（小综合）

功能：新增、删除、统计、清空、隐藏
新增：生成列表结构（v-for 数组），获取用户输入（v-model），回车新增数据（v-on .enter添加数据）
删除：点击删除指定内容（v-on splice 索引）
统计：统计信息个数（v-text length）
清空：点击清除所有信息（v-on 清空数组）
隐藏：没有数据时隐藏元素（v-show v-if 数组非空）

 <section id="todoapp">
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" autocapitalize="autofocus" @keyup.enter="add"
            autocomplete="off" placeholder="请输入任务" class="new-todo">
        </header>
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)"></button> 
                    </div>
                </li>
            </ul>
        </section>
        <footer class="footer">
            <span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong> items left</span>
            <button class="clear-completed" v-show="list.length!=0" @click="clear">
                clear
            </button>
        </footer>
    </section>
    <footer class="info">
    </footer>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","看剧剧","吃饭饭"],
                inputValue:"好好学习，天天向上"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>