Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

激进的程序员

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量227

点赞数 1

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_59347653/article/details/126562792

版权

Vue

htmlcss—>javascript—>JQuery

---->vue,react,angular

一个JavaScript库

vue也可以说是JavaScript框架。

尤雨溪

创建一个Vue实例

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

数据的获取和遍历

<body>
        <div id="app">
            <h1>{{user.msg}} --- {{user.name}} --- {{user.password}}</h1>
            <h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}</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",
                    },
                    lists: ["北京","上海","广州","深圳","杭州"],
                    users: [{name:"小强",age:25},{name:"小红",age:18}]
                },
            });

        </script>
    </body>

插值闪烁

在Vue中使用插值表达式时，遇到网速慢的情况，就会出现闪烁的问题。

<body>
        <div id="app">
            <!-- 插值闪烁 -->
            <h1>123{{msg}}</h1>
            <!-- 不会有插值闪烁 -->
            <h1 v-text="msg">123</h1>
            <h1 v-html="aaa"></h1>
        </div>

        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    msg:"<em>helle Vue</em>",
                    aaa: "<em>hello!!!</em>"
                },
            });

        </script>
</body>

年龄改变

<body>
        <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: {
                    msg:"hello Vue",
                    age: 23,
                },
                methods: {
                    addage: function() {
                        // 想办法拿到data中的age属性，让它自增
                        // this代表的是整个的vue实例
                        this.age ++;
                    },
                    subage() {
                        this.age --;
                    }
                }
            });
        </script>
    </body>

v-if v-show

 <body>
        <div id="app">
            <!-- 
                面试题：99.99999999%
                v-if直接操作DOM元素，底层
                v-show是通过css控制DOM元素
             -->
            <h1 v-if="true">欢迎光临</h1>
            //当v-if为ture时，显示信息
            //当v-if为false时，不显示信息
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    msg:"hello Vue",
                },
            });
        </script>
    </body>

图片切换

<body>
        <div id="app">
            <img :src="src" width="300" @click="change">
        </div>

        <script src="js/vue.js"></script>
        <script>
            //图片地址为：img/1.jpg到img/5.jpg
            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 > 5) {
                         na = 1;
                       }
                       this.src = dir + "/" + na + "." + ext;
                    }
                },
            });

        </script>
    </body>

v-for

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

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

<body>

<div id="app">
            
            <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>

双向绑定

双向绑定：

1、HTML部分发生变化，Vue实例中对应的属性也会变化

2、Vue中发生变化，HTML中同样变化

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

总结：

1、使用v-model指定可以实现数据的双向绑定

2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的

MVVM架构：双向绑定机制

Model：数据

View：页面，页面展示数据

M：ViewModel 监听器

字符串的方法

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