Vue本地应用——列表循环,表单元素绑定

列表循环,表单元素绑定用到的命令有:

v-for
v-on补充
v-model

v-for

根据数据生成列表结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>
<body>
    <div id="app">
        <button @click="add">添加蔬菜</button>
        <button @click="remove">减少蔬菜</button>
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}四大神兽:{{item}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </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>
</body>
</html>

数组经常和v-for一起使用
语法是**(item,index)in** 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式

v-on补充

传递自定义参数,事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令补充</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt('老铁',666)"> 
        <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("点击!!!");
                    console.log(p1);
                    alert(p2);
                },
                sayHi:function(){
                    alert("输入完毕!!!")
                }
            }
        })
    </script>
</body>
</html>

事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

v-model

便捷的设置和获取表单元素的值(双向数据绑定)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="设置message" @click="setMessage">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <h3>{{message}}</h3>
    </div>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好"
            },
            methods:{
                getMessage:function(){
                    alert(this.message)
                },
                setMessage:function(){
                    this.message="hello"
                }
            }
        })
    </script>
</body>
</html>

绑定的数据会和表单元素的相关联
绑定的数据↔表单元素的数据

实例应用

实现一个日程记事本,要求具有以下功能:

新增
删除
统计
清空
隐藏

新增

生成列表结构——v-for 数组
获取用户输入——v-model
回车,新增数据——v-on .enter添加数据

删除

数据改变,和数据绑定的元素同步改变
事件的自定义参数
splice方法的作用

统计

基于数据的开发方式
v-text指令的作用

清空

点击清除所有信息(v-on 清空数据)

隐藏

没有数据时,隐藏元素(v-show v-if数组非空)

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
        <!-- 主体区域 -->
        <section id="todoapp">
            <!-- 输入框 -->
            <header class="header">
              <h1>小黑记事本</h1>
              <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
                class="new-todo" v-model="addValue" @keyup.enter="add(addValue)"/>
            </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" @click="clear" v-show="list.length!=0">
                Clear
              </button>
            </footer>
          </section>
          <!-- 底部 -->
          <footer class="info">
            <p>
              <a href="http://www.itheima.com/"
                ><img src="./img/black.png" alt=""
              /></a>
            </p>
          </footer>
          <!-- 开发环境版本,包含了有帮助的命令行警告 -->
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script>
              var app = new Vue({
                  el:"#todoapp",
                  data:{
                      list:["吃饭","睡觉","学习"],
                      addValue:"打游戏"
                  },
                  methods:{
                    add:function(value){
                        this.list.push(value)
                    },
                    remove:function(index){
                        this.list.splice(index,1)
                    },
                    clear:function(){
                        this.list=[]
                    }
                  }
              })
          </script>
</body>
</html>

应用小结

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制,比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式

你可能感兴趣的:(vue.js,javascript,前端)