简单认识vue的几个基本元素：

爱意藏于秋

于 2024-08-04 18:14:03 发布

阅读量754

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2202_75444261/article/details/140898108

版权

简单认识vue的几个基本元素：

v-for 标签：

作用：列表渲染，遍历容器的元素或者对象的属性；

语法：v-for= “（item， index）in items ”

语法分析：

item为for循环所承接的对象，这里可以把它看成一个临时放东西的一个盒子，盒子里的东西会根据每一次的index的变化而在items里拿到顺序下标的数据

v-on 标签：

作用：对html标签进行事件绑定

语法：v-on：事件名 = “函数名” or @事件名 = “函数名”

app（{

data(){return{a = 1}},

methods:{  onA:function(){ alter("a值为:"+a) }  }

}）

//函数均需放在methods内

v-on：事件名，这里的事件名常用的有哪些事件呢？

v-on 常见的事件包括但不限于：‌

click：‌鼠标点击事件，‌当用户点击某个元素时就会触发。‌
dblclick：‌鼠标双击事件，‌当用户双击某个元素时触发。‌
focus：‌获取焦点事件，‌当元素获得焦点时触发。‌
blur：‌失去焦点事件，‌当元素失去焦点时触发。‌
mouseover：‌鼠标悬浮事件，‌当鼠标移至某个元素上方时触发。‌
mouseout：‌鼠标移出事件，‌当鼠标移出某个元素上方时触发。‌
keyup：‌键盘松开事件，‌当用户松开键盘上的某个键时触发。‌
keydown：‌按键按下事件，‌当用户按下键盘上的某个键时触发。‌
submit：‌表单提交事件，‌当表单被提交时触发。‌
change：‌输入框内容改变事件，‌当输入框内容发生变化时触发。‌
scroll：‌滚动事件，‌当用户滚动页面或某个可滚动元素时触发。‌
其实这些都是重点，画个线只是为了好看罢了。刚学用这些足够了。

vue也允许开发者定义当这些事件发生时应执行的操作。‌此外，‌

v-on指令还可以使用修饰符来进一步定制事件处理的行为，‌

例如.stop用于阻止事件冒泡，‌.prevent用于阻止事件的默认行为等

v-bind标签：

作用：动态为HTML标签绑定属性值，比如：href，src，style 样式等

语法：v-bind：属性名 = “属性值” or ：属性名 = “属性值”

其作用就在于将实现具体的数据内容不出现在标签上，单独放在data()里面，这样更好看，更安全。

注意：绑定的数据必须在data中定义

v-if 标签：

作用：控制元素的显示与隐藏（与 v-show 同而存异）

语法： v-if = “表达式”，若表达式返回true ，所在标签显示；否则，隐藏。

原理：基于条件判断，来控制创建或一处元素节点（条件渲染）

第一层：v-if

第二层：v-else-if

第三次：v-else

使用场景：要么显示，要么不显示，不需要频繁切换的场景

v-show 标签：

作用：控制元素的显示与隐藏

语法：v-show = “表达式”，若表达式返回true ，所在标签显示；否则，隐藏。

原理：基于CSS样式display来控制显示或隐藏

使用场景：需要频繁切换隐藏的场景（比如：有时候鼠标放在一个地方就会出现一个可选窗口悬浮在主窗口上方的样式）

v-model标签：

作用：在表单元素的input上使用，实现，双向数据绑定。已然方便的获取 or 设置表单项数据

语法：v-model = “变量名”

目的简单，就是为了实现双向数据绑定，数据内容默认实时更新

有人在想：代码咋写呢？

我：满足你。我给你！

你：好

我：嗯嗯，已读，乱回。

乱例展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
    <div id="pp">
        <h2 v-text="message+'!'"></h2>
        <h2>什么马：{{ message+school.name }}</h2>
    </div>
    <div id="text">
        <p v-html="content"></p>
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on指令" @click="doIt">
        <input type="button" value="v-on指令双击事件" @dblclick="doIt">
        <button @click="carry">this</button>
        <input type="text" @keyup.enter="windowup">
    </div>
    <h1 id="pp"></h1>
    <div id="countNum">
        <button @click="sub">
            -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
            +
        </button>

    </div>
    <div id="imgshow">
        <input type="button" value="图片消失与显示" @click="changeIsShow"></input>
        <button @click="addAge">+</button>
        <img src="java之父.png" v-show="age>=20">
        <img :src="imgSrc">
    </div>
    <div id="model">
        <input type="text" v-model="message">
        <h1>{{message}}</h1>
    </div>
    <script>
        new Vue({
            el: "#model",
            data: {
                message: "落九川"
            },
            methods: {
                changeM: function () {
                    this.message;
                }
            }
        })
    </script>
    <script>
        new Vue({
            el: "#imgshow",
            data: {
                isShow: false,
                age: 19,
                imgSrc: "java之父.png"
            },
            methods: {
                changeIsShow: function () {
                    if (this.age % 2 == 0) {
                        this.isShow = !this.isShow
                    }
                },
                addAge: function () {
                    this.age++;
                },
            }
        })
    </script>
    <script>
        new Vue({
            el: "#countNum",
            data: {
                num: 0
            },
            methods: {
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点了，最大了")
                    }
                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("已经最小了！")
                    }
                }
            }
        })
    </script>
    <script>
        new Vue({
            el: "#text",
            data: {
                content: "<a href='http://www.baidu.com'>百度官网</a>",
                forthis: "京东"
            },
            methods: {
                doIt: function () {
                    alert("做it");
                },
                carry: function () {
                    alert(this.forthis + "顺丰");
                },
                windowup: function () {
                    alert("是否输入完成？")
                }
            },
        })
    </script>
    <script>
        new Vue({
            el: "#pp",
            data: {
                message: "白龙马",
                name: "houjia",
                school: {
                    name: "马敏",
                    age: "21",
                    sex: "女"
                },
                scores: [100, 99, 98, 97]
            }
        })
    </script>
</body>

</html>

爱意藏于秋

关注

12
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
简单认识vue的几个基本元素：

item为for循环所承接的对象，这里可以把它看成一个临时放东西的一个盒子，盒子里的东西会根据每一次的index的变化而在items里拿到顺序下标的数据。语法：v-bind：属性名 = “属性值” or ：属性名 = “属性值”：‌滚动事件，‌当用户滚动页面或某个可滚动元素时触发。v-on：事件名，这里的事件名常用的有哪些事件呢？：‌鼠标点击事件，‌当用户点击某个元素时就会触发。：‌鼠标悬浮事件，‌当鼠标移至某个元素上方时触发。：‌获取焦点事件，‌当元素获得焦点时触发。
复制链接

扫一扫