Day_01 Vue基础

最新推荐文章于 2024-07-15 22:27:12 发布

胖ۣۖ虎ۣۖ

最新推荐文章于 2024-07-15 22:27:12 发布

阅读量360

点赞数

分类专栏： JavaWeb 文章标签： java 数据库 mysql

本文链接：https://blog.csdn.net/lbw18/article/details/123287510

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

1-Vue指令介绍(掌握)

概述
- 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
- 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令

2-Vue文本操作(掌握)

概述
- 使用v-html、v-text指令，将Vue变量插入到标签内容中。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-Vue文本操作</title>
</head>
<body>
<div id="app">

    <span v-html="msg1"></span><br>
    <span v-text="msg2"></span><br>
    <span>{{msg3}}</span>

</div>

</body>
<script src="/day01/js/vue.js"></script>
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            msg1:"<font color='red'>hello1</font>",
            msg2:"<font color='red'>hello2</font>",
            msg3:"<font color='red'>hello3</font>"
        },
        methods:{

        }
    })

</script>
</html>

注意事项
- {{插值表达式}}会有插值闪烁问题。

3-Vue的事件处理(掌握)

概述
- 可以用"v-on:事件名"指令监听DOM事件，并在触发时运行函数；也可简写成 “@事件名”

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-Vue的事件处理</title>
</head>
<body>
<div id="app">

    <button onclick="fn1()">点我呀1~~~</button>
    <button v-on:click="fn2()">点我呀2~~~</button>
    <button @click="num++">点我呀3~~~</button><br>

    {{num}}

</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            fn2() {
                console.log("点我呀2~~~");
                this.num++;
            },
            fn3() {
                console.log("点我呀3~~~");

            }
        }
    });

    function fn1() {
        console.log("点我呀1~~~");
        vue.num++;
    }

</script>
</html>

4-Vue事件修饰符(掌握)

概述
- .stop ：阻止事件冒泡
- .prevent ：阻止默认事件发生

①阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-Vue的事件修饰符</title>
</head>
<body>
<div id="app">

    <div @click="fn1()">

        <button @click.stop="fn2()">按钮</button>

    </div>

</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {},
        methods: {

            fn1(){
                console.log("div被点了~~~");
            },

            fn2(){
                console.log("button被点了~~~");
            }

        }
    })

</script>
</html>

②阻止默认事件发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-Vue事件修饰符</title>

    <!--②阻止默认事件发生-->
</head>
<body>

<div id="app">

    <a href="index.html" @click.prevent="fn1()">跳转到index.html</a>

</div>

</body>
<script src="js/vue.js"></script>

<script>

    var vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn1(){//跳转到百度
                location.href = "http://www.baidu.com"
            }
        }
    })

</script>
</html>

5-Vue双向绑定(掌握)

概述
- 之前的插值表达式、v-text、v-html可以看做是单向绑定，Vue实例中的变量影响了视图渲染,但是反过来就不行!
- 可以将Vue中定义的变量的值显示到页面上,同时也可以将页面上的值绑定到Vue的变量上
- 既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型，目前v-model的可使用元素有: input、select、textarea、checkbox、radio、components(Vue中的自定义组件)

需求1 : 将输入框中的值动态显示到div标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-Vue双向绑定</title>
    <!--①需求:将输入框中的值动态显示到div标签中-->
</head>
<body>

<div id="app">

    软件技术班有{{num}}个学生~~~<br>

    请您输入新的人数 : <input type="text" v-model="num">
</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            num: 200
        },
        methods: {}
    })

</script>
</html>

需求2 : 将选中的多选框中的值,动态显示到span中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-Vue双向绑定</title>
    <!--②需求2:将选中的多选框中的值,动态显示到span中-->
</head>
<body>
<div id="app">

    爱好1:<input type="checkbox" value="javase" v-model="hobbys"><br>
    爱好2:<input type="checkbox" value="javame" v-model="hobbys"><br>
    爱好3:<input type="checkbox" value="javaee" v-model="hobbys"><br>

    已选中的爱好:
    <span>{{hobbys}}</span>

</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            hobbys:[
                "javase",
                "javaee"
            ]

        },
        methods: {

        }
    })

</script>
</html>

胖ۣۖ虎ۣۖ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day_01 Vue基础

文章目录1-Vue指令介绍(掌握)2-Vue文本操作(掌握)3-Vue的事件处理(掌握)4-Vue事件修饰符(掌握)5-Vue双向绑定(掌握)1-Vue指令介绍(掌握)概述是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。常用指令2-Vue文本操作(掌握)概述使用v-html、v-text指令，将Vue变量插入到标签内容中。代码实现<!DOCTY
复制链接

扫一扫