VUE

VUE

VUE插值表达式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vuejs/vue2.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
       <!-- {{msg}} -->
       {{user.msg}}{{user.name}}
       <p>{{lists[0]}}</p>
       <p>{{users[0].name}}</p>
       <p v-html="{{msgs}}"></p>
    </div>

    <script>
        // 创建一个vue实例
        const app = new Vue({
            // el用来给vue实例一个作用域
            el:"#app",
            data:{
                // 给vue定义一些相关的数据
                // msg:"欢迎使用vue",

                // 对象
                user:{
                    msg:"hello",
                    name:"admin",
                    password:"123",
                },

                // 集合
                lists:["1","2","3"],

                // 
                users:[{name:"123",age:"20"},{name:"00",age:"2"}],
           
                // 
                msgs:"<p>123</p>",
            },
        });
    </script>
</body>

 

VUE函数


    <div id="app">
        <p> {{msg}} </p>
        <p> {{age}} </p>
       
        <button @click="addage"> 增加年龄 </button>
        <button @click="addage"> 增加年龄 </button>
        <button @click="subage()"> 增加年龄 </button>
        
        
        <h1 v-show="shows">影藏</h1>
        <button @click="toggleshow">显示/隐藏</button>
    </div>
    

    <script>
        // 创建一个vue实例
        const app = new Vue({
            // el用来给vue实例一个作用域
            el:"#app",
            data:{
                // 给vue定义一些相关的数据
                msg: "欢迎使用vue",
                age: 20,
                shows:false,
            },
            methods:{
                addage: function(){
                    // 拿到data中的属性
                    // this代表整个vue实例
                    this.age = 1;
                },
                subage(){
                    this.age--;
                },
                changeage(age){
                    this.age = age;
                },
                toggleshow(){
                    this.shows = !this.shows;
                },
            },
        });
    </script>

 

JS数组

let arr =[1,2,3];
arr.push(4);
arr.splice(1,1);
arr.reverse();
arr.sort();

 

VUE   v-for

v-for写在哪一个标签中，就会生成多个对应的标签

在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值

    <body>
        <div id="app">
            <!-- v-for -->
            <!-- 
                v-for写在哪一个标签中，就会生成多个对应的标签

                注意：
                    在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值

             -->
            <span v-for="(value,key,index) in user">
                {{index}} --- {{key}} --- {{value}}<br>
            </span>
            <ul>
                <li v-for="(value,index) in lists">
                    {{index}} --- {{value}}
                </li>
            </ul>
            <ol>
                <li v-for="(u,index) in users" :key="u.id">
                    {{index}} --- {{u.name}} --- {{u.age}}
                </li>
            </ol>
            <!-- <ol>
                <li v-for="(value,key,index) in ((user) in users)">
                    {{index}} --- {{key}} --- {{value}}
                </li>
            </ol> -->
        </div>

        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    user:{name:"小强",age:23},
                    lists: ["北京","上海","广州","深圳","杭州"],
                    users: [{name:"小强",age:25},{name:"小红",age:18}]
                },
            });

        </script>
    </body>

 

VUE v-model

1、使用v-model指定可以实现数据的双向绑定
2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的
      MVVM架构：双向绑定机制
      Model：数据
       View：页面，页面展示数据
       VM：ViewModel 监听器

绑定案例：

<body>
        <div id="app">
            姓名：<input v-model="name"><br>
            年龄：<input v-model="age"><br>
            性别：<input v-model="sex"><br>
            <input type="button" value="采集" @click="getRes">
            结果
            <h2>{{name}} + {{age}} + {{sex}}</h2>
        </div>

        <script src="vuejs/vue2.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    name:"请输入姓名",
                    age:"请输入年龄",
                    sex:"请输入性别",
                },
                methods:{
                    getRes(){
                        alert(this.name + this.age + this.sex);
                    }
                },
            });
        </script>
   
</body>
查看代码 
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        .tou{
            margin-left: 20%;
            width: 600px;
            height: 500px;
            border: 5px solid black;

        }
        .test{
            width: 200px;
            height: 20px;
            margin: 5px;
            border-radius: 20px;
        }
        button{
            margin-left: 10px;
            margin-top: 5px;
        }
        .sexs{
            margin: 10px;
        }
        select{
            margin: 10px;
        }
        ul li{
            list-style: none;
            height: 30px;
            background-color: aqua;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app" class="tou">
        <div class="">
            <input type="text" v-model="name" class="test" placeholder="请输入姓名" required><br>
            <input type="text" v-model="age"  class="test"placeholder="请输入年龄" required><br>
            <div class="sexs">
                <input type="radio" v-model="sex" name="sex">男 
                <input type="radio" v-model="sex" name="sex">女<br>
            </div>
            <select name="" id="" v-model="address">
                <option selected value="计算机">计算机</option>
                <option value="java">java</option>
                <option value="c++">c++</option>
            </select><br>
            <button @click="sets">提交</button>
        </div>

        <hr>

        <div class="floor">
             <ul>
                <li>姓名----年龄----性别----专业-----爱好<li>
                <li v-for="(u,index) in users" :key="u.id">
                   {{u.name}} --- {{u.age}} --- {{u.sex}} --- {{u.address}}  
                    <button @click="dels(index)">删除</button>
                </li>
             </ul>   
        </div>
    </div>

    <script src="vuejs/vue2.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                users: [{name:"小强",age:25,sex:"男",address:"java"}]
            },
            methods:{
                sets(){
                    let u={name:this.name , age:this.age , sex:this.sex , 
                        address:this.address };
                    this.users.push(u);
                    this.name="";
                    this.age="";
                    
                },
                dels(index){
                    this.users.splice(index,1);
                },
            },
        });

    </script>
</body>

input

<div id="app">
<input type="text" v-model="message">
<br>
<span>{{message}}</span>
<br>
    <button @click="changeValue">通过改变JS中message的值改变文本框的值</button>
    <hr>
    <input type="radio" name="gender" value="m" v-model="gender">男
    <input type="radio" name="gender" value="w" v-model="gender">女
    <hr>
    <input type="checkbox" name="hobby" value="a" v-model="hobby">A
    <input type="checkbox" name="hobby" value="b" v-model="hobby">B
    <input type="checkbox" name="hobby" value="c" v-model="hobby">C
            <!-- <button @click="show">查看</button> -->

            <hr>
            <select v-model="address">
                <option value="x">X</option>
                <option value="y">Y</option>
                <option value="z">Z</option>
            </select>
            <button @click="show">查看</button>

            <input type="file">
        </div>

<script src="js/vue.js"></script>
<script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    message:'',
                    gender:'w',
                    hobby:[],
                    address:'z',
                },
                methods: {
                    changeValue() {
                        this.message = prompt("请输入：");
                    },
                    show() {
                        // console.log(this.hobby);
                        console.log(this.address);
                    }
                },
            });

        </script>

 

注意：

1.注意vue实例的作用域

2.事件绑定（v-on:click）和属性绑定（v-bind:src）

3.v- if 和 v-show区别*********

4.双向绑定，应用在表单元素上

5.双向绑定在不同表单元素上的用法 radio checkbox select 

6.双大括号，Vue的属性或是事件用自己的数据不需要写大括号，其他需要写

7.Vue的解析过程，最终展示后的html页面，是没有vue语法的

 

事件修饰符

stop修饰符：阻止事件冒泡

 <div id="app" class="mains" @click="divClick">
        <div class="divaa">
            <button @click.stop="btnClick">按钮</button>
        </div>
    </div>
    
    <script src="vuejs/vue2.js"></script>
    <script>
        /**
         * 事件修饰符
         *      和事件连用，决定事件出发的条件
         *      或阻止事件的触发机制
         * 
         */
        const app = new Vue({
            el: "#app",
            data:{},
            methods:{
                btnClick(){
                    alert("btn");
                },
                divClick(){
                    alert("div");
                }
            }

        });
    </script>

 

事件修饰符：prevent

 <div id="app" class="mains" @click="divClick">
        <a href="http://www.bilibili.com"
         @click.prevent="aClick" >链接</a>

         <form action="aaa" >
            <input type="submit" 
            @click.prevent="submitClick" value="">
        </form>
    </div>
    
    <script src="vuejs/vue2.js"></script>
    <script>
        /**
         * 事件修饰符
         *      和事件连用，决定事件出发的条件
         *      或阻止事件的触发机制
         *      .prevent : 阻止标签的默认行为
         *      或在a标签的href="javascript.void(0)"
         *      
         */
        const app = new Vue({
            el: "#app",
            data:{},
            methods:{
                aClick(){
                    location.href = "http://www.baidu.com";
                    // alert("超级链接");
                },
                submitClick(){
                    alert("form");
                }
            }

        });
    </script>

 

事件触发事件：.once

事件只触发一次，之后执行标签的默认行为

 

键盘修饰符

  • .enter
  • .tab
  • .delete（对删除和退格都起作用）
  • .space
  • .up
  • .down
  • .left
  • .right

 

案例（表单添加删除）

查看代码 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vuejs/vue2.js"></script>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        .apps{
            width: 500px;
            height: 500px;
            padding-left: 40%;
        }
        input{
            width: 100px;
            height: 20px;
            border-radius: 20px ;
            border: 3px solid rgb(129, 129, 248);
        }
        ul li{
            width: 400px;
            height: 30px;
            margin: 5px;
        }
        a{
            border: 3px solid;
            text-decoration: none;
            color: red;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="app" class="apps">
        <input type="text" v-model="inputs"> <button @click="addLi">添加</button>
        <ul>
            <li v-for="(value,index) in message">
                {{index}} --- {{value}}
                <a href="#" @click="del(index)">删除</a>
            </li>
        </ul>
        <span>总数量：{{message.length}}条</span> <button @click="dels">删除所有</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
        
        const app = new Vue({
            el: "#app",
            data: {
                message:["第一次记事","汪峰发新专辑"],
                len:'',   
                inputs:"",        
            },
            methods:{
                addLi(){

                    this.message.push(this.inputs);
                    let lens = this.message.length;
                   
                    this.len = lens;
                    this.inputs='';
                },
                del(index){
                    this.message.splice(index,1);
                },
                dels(){
                    this.message = [];
                }
            }
        });
        /*
            1、追加
            2、注意文本框要清空
            3、删除除了删除记录，还要修改总记录数
            4、删除所有，所有记录删除，总记录数归0
        */
    </script>
</body>
</html>

 

posted @ 2022-08-27 15:38  一只神秘的猫  阅读(48)  评论(0)    收藏  举报