Javascript

vue学习07——学习笔记

本文主要是介绍vue学习07——学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

学习来源：https://vuejs.bootcss.com/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

前置条件：要在我们的html文件中引入vue.js  ,如下：

<script src="https://unpkg.com/vue@next"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
</body>
</html>

 

1、v-for

格式举例：

<ul>
　　<li v-for="todo in todos">{{todo}}</li>

</ul>

含义：类似python中的for循环，将todos中的每一个todo循环遍历出来，放在li中，假设todos中有2个数，遍历出来如下:

<ul>
<li>1<li>
<li>2<li>
</ul>

其中数值1，2来源于todos中，todos的值以数组形式存放在下方：

   data() {
                return {
                    todos: [
                        {text: "吃饭"},
                        {text: "学习"},
                        {text: "打游戏"}

                    ]
                }
            }

实战举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="xuexi">
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
</div>
</body>
<script>
    const test =
        {
            data() {
                return {
                    todos: [
                        {text: "吃饭"},
                        {text: "学习"},
                        {text: "打游戏"}

                    ]
                }
            }

        }
    Vue.createApp(test).mount("#xuexi")
</script>
</html>

 

 

2、v-on

格式举例：

<button v-on:click="clickThing">v-on格式举例</button>

含义：相当于点击事件，我们只需要在methods中2写入click时间，即可执行对应操作

实战举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="xuexi">
    <button v-on:click="submit">v-on举例，点击alert出数值1</button>
</div>
</body>
<script>
    const test =
        {
           methods:{
               //v-on举例，点击alert出数值1
               submit(){
                   alert(111111111)
               }
           }

        }
    Vue.createApp(test).mount("#xuexi")
</script>
</html>

 

 

3、v-if

格式举例：

<p v-if="seen">v-if格式举例，如果为真，则展示该p，否则隐藏</p>

含义：及if语句，如果对应tag中的if为true时，执行对应操作。为false时执行另一操作。需要在data的返回结果中给定默认true还是false

实战举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="xuexi">
<p v-if="seen">v-if格式举例，如果为真，则展示该div，否则隐藏</p>
    <button v-on:click="hidden">点击后将v-if修改为false，隐藏对应区域</button>
</div>
</body>
<script>
    const test = {
        data() {
            return {
                seen:true //默认展示
            }

        },
        methods:{
            hidden(){
                this.seen=false  //隐藏
            }
        }
    }
    Vue.createApp(test).mount("#xuexi")
</script>
</html>

 

 

 

4、v-model

格式举例：

<input  v-model="test"/>

含义：能够表单输入和应用状态之间的双向绑定，能够运用在以后的表单提交

 实战举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="xuexi">
    <input  type="text" placeholder="请输入用户名" v-model="formData.username"/>
     <input type="password"  placeholder="密码" v-model="formData.password"/>
    <button v-on:click="submit">提交</button>
</div>
</body>
<script>
    const test =
        {
            data() {
                return {
                    formData:[
                        {username:""},//用户名默认为空
                        {password:""},//密码默认为空
                    ]
                }
            },

            methods:{
                //提交用户名和密码信息,并弹窗展示对应信息
                submit(){
                    console.log(this.formData.username) //打印用户名
                     console.log(this.formData.password)//打印密码
                }

    }

        }
    Vue.createApp(test).mount("#xuexi")
</script>
</html>

 

这篇关于vue学习07——学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航