2022-08-27 第二小组张鑫学习笔记

实训四十九天 Vue

学习内容

Vue

创建Vue

<div id="app">
    <!-- 插值表达式 -->
    <h1>{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
    //1.创建一个vue实例
    const app = new Vue({
        //el(元素)用来给Vue实例一个作用域
        el: "#app",
        data: {
            //用来给Vue定义一些相关的数据
            msg: "欢迎使用Vue",
        },
    });
</script>

列表，数组操作

<div id="app">
    <h1>{{user.msg}}---{{user.name}}---
        {{user.password}}</h1>
    <h1>
        {{lisits[0]}}---{{lisits[2]}}---
        {{lisits[3]}}
    </h1>
    <h1>
        {{users[0].name}}---{{users[0].age}}
    </h1>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {
                msg: "hello Vue",
                name: "admin",
                password: "123456",
            },
            lisits: ["北京", "上海", "广州", "深圳", "杭州",],
            users:[{name:"小强",age:"25"},{name:"小红",age:"24"},],
        },
    });
</script>

字符串操作

<div id="app">
    <h1>{{msg.toUpperCase()}}</h1>
    <h1>{{msg.substring(0,2)}}</h1>
    <h1>{{msg.replace("o","e")}}</h1>
    <h1>{{msg.indexOf('u')}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "hello Vue",
        },
    });
</script>

插值闪烁

<div id="app">
    <!-- 插值闪烁 -->
    <h1>{{msg}}</h1>
    <!-- 不会有插值闪烁 -->
    <h1 v-text="msg"></h1>
    <h1 v-html="aaa"></h1>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        
        el: "#app",
        data: {
            msg: "hello Vue",
            aaa:"<em>hello!!</em>",
        },
    });
</script>

增减操作

<div id="app">
    <h1>年龄：{{age}}</h1>
    <input type="button" value="通过Vue事件
    改变年龄每次+1" v-on:click="addage">
    <input type="button" value="通过Vue事件
    改变年龄每次-1" @click="subage">
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        
        el: "#app",
        data: {
            age:23,
        },
        //定义函数
        methods:{
            addage:function(){
                //想办法 获取data中的age属性，让他自增
                //this代表的是整个vue实例
                this.age++;
            },
            subage(){
                this.age--;
            },
            
        },
    });
</script>

<div id="app">
    <h1>年龄：{{age}} 姓名：{{name}}</h1>
    <input type="button" value="改变age到指定的值" @click="changeage(32,'小强')">
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            age: 23,
            name:"小红",
        },
        //定义函数
        methods: {
            changeage(age,name) {
                this.age = age;
                this.name =name;
            },
        },
    });
</script>

显示隐藏

<div id="app">
    <button @click="toggleshow">显示/隐藏</button>
    <h1 v-show="thisshow">{{msg}}</h1>       
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        
        el: "#app",
        data: {
            msg:"欢迎光临",
            thisshow:true
        },
        methods:{
            toggleshow(){
                this.thisshow=!this.thisshow
            }
        },
    });
</script>

v-if v-show

<div id="app">
    <!-- 
        v-if直接操作DOM元素，底层
        v-show通过css控制DOM元素
     -->
    <h1 v-if="flase">欢迎光临</h1>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        
        el: "#app",
        data: {
        },
    });
</script>

鼠标悬停操作（图片）

        <style>
            .aa {
                border: 5px solid red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <img src="img/yyx.jpg" v-bind:class="{aa:s}" v-bind:title="t"
                @mouseover="hov" @mouseout="ou">
        </div>

        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    msg:"hello Vue",
                    t: "我是尤雨溪",
                    s: false,
                },
                methods: {
                    hov() {
                        this.s = true;
                    },
                    ou(){
                        this.s = false;
                    }
                },
            });

        </script>

图片切换

<div id="app">
    <img :src="src">
    <br>
    <button @click="changeimg">切换图片</button>
</div>
<script src="js/vue.js"></script>
<script>
     const app = new Vue({
        
        el: "#app",
        data: {
           src:"img/yyx.jpg" ,
        },
        methods: {
            changeimg() {
                this.src = "img/linnasi.png"
            }
        },
    });
</script>

<style>
            img{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <img :src="src" width="1000" @click="change">
        </div>

        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    msg:"hello Vue",
                    src :"img/1.jpg",
                },
                methods: {
                    change() {
                       let imgname = this.src; 
                       let s = imgname.split(".");
                       let ext = s[1];
                       let pre = s[0].split("/");
                       let dir = pre[0];
                       let na = parseInt(pre[1]);
                       na ++;
                       if(na > 4) {
                         na = 1;
                       }
                       this.src = dir + "/" + na + "." + ext;
                    }
                },
            });

        </script>

v-for

<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>

双向绑定

<!-- 
    双向绑定：
        1、HTML部分发生变化，Vue实例中对应的属性也会变化
        2、Vue中发生变化，HTML中同样变化
 -->
<div id="app">
    <!-- 
        总结：
            1、使用v-model指定可以实现数据的双向绑定
            2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的
        MVVM架构：双向绑定机制
            Model：数据
            View：页面，页面展示数据
            VM：ViewModel 监听器
     -->
    <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>

数组基本操作

<script>
    let arr = [5,2,-1];
    // 在数组的末尾追加
    arr.push(4);
    // 删除数组的末尾的元素
    // arr.pop(2);
    // 从指定位置删除指定个数个元素
    // arr.splice(1,1);
    // 修改
    // arr[1] = -1;
    // 反转
    // arr.reverse();
    // 从小到大排序
    // arr.sort();
    // 查找
    // console.log(arr.find());
    // 包含
    // console.log(arr.includes(0));
    
    // console.log(arr);
</script>

案例增删统计

<!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>
</head>

<body>
    <!-- 
        注意事项
        1.注意Vue实例的作用域
        2.事件（v-on:click），属性绑定的完整写法(v-bind:src)
        3.v-if和v-show区别
        4.双向绑定 应用在表单元素上
        5.双向绑定在不同表单元素的用法 radio checkbox select
        6.双大括号，Vue的属性或事件用Vue自己的数据，不需要写双大括号
                    其他地方，必须大括号
        7.Vue解析过程，最终展示HTML页面            
     -->
    <div id="app">
        <input type="text" v-model="message"> <button @click="add()">添加</button>
        <ul>
            <li v-for="(item,index) in list"> {{item}}<a href="#" @click="del(index)">删除</a></li>

        </ul>
        <span>总数量：{{num}}条</span> <button @click="delAll()">删除所有</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({

            el: "#app",
            data: {
                num: 2,
                message: "",
                list: ["第一次记事", "汪峰发新专辑"]

            },
            methods: {
                add() {
                    this.num++;
                    this.list.push(this.message);
                    this.message = " ";

                },
                del(index) {
                    this.list.splice(index, 1)
                    if (this.num > 0) {
                        this.num--;
                    }

                },
                delAll() {
                    this.list = [];
                    this.num = 0;

                }
            }

        });
            /*
1、追加
2、注意文本框要清空
3、删除除了删除记录，还要修改总记录数
4、删除所有，所有记录删除，总记录数归0
*/

    </script>
</body>

</html>

posted @ 2022-08-27 22:05 菜鸡成长记阅读(40) 评论(0) 收藏举报

刷新页面返回顶部

zxscj

2022-08-27 第二小组 张鑫 学习笔记

实训四十九天 Vue

学习内容

Vue

创建Vue

列表，数组操作

字符串操作

插值闪烁

增减操作

显示隐藏

v-if v-show

鼠标悬停操作（图片）

图片切换

v-for

双向绑定

数组基本操作

案例 增删统计

2022-08-27 第二小组张鑫学习笔记

案例增删统计