vue学习07——学习笔记

2022-04-28 00:01:55 阅读：158 来源： 互联网

标签：vue 07 Title text Vue 学习举例 test todos

学习来源：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,Title,text,Vue,学习,举例,test,todos
来源： https://www.cnblogs.com/XiqueBlogs/p/16201186.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue学习07——学习笔记

1、v-for

2、v-on

3、v-if

4、v-model