2022-08-27 第五组张明敏学习笔记

最新推荐文章于 2024-09-11 17:19:24 发布

小张同学的小张

最新推荐文章于 2024-09-11 17:19:24 发布

阅读量235

点赞数

分类专栏： vue 前端文章标签：学习前端 vue.js

本文链接：https://blog.csdn.net/qq_50392643/article/details/126561391

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

一、Vue

1、简介

1.vue是一套用于构建用户界面的渐进式JavaScript框架
2.特点：

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

2、使用

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

3.指令

内置指令

v-bind : 单向数据绑定，可简写为:xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听，可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染(动态控制节点是否存存在)
v-show : 条件渲染(动态控制节点是否展示)
v-text : 1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会。
v-html: 1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v- html可以识别html结构。
3.严重注意: v-html有安全性问题! ! ! !

4.事件修饰符

Vue中的事件修饰符:

1.prevent:阻止默认事件
2.stop: 阻止事件冒泡
3.once:事件只触发一次
4.capture:使用事件的捕获模式:
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

案例:

1.点餐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dc{
            height: 400px;
            width: 600px;
            background-color: pink;
        }
    </style>

</head>
<body>
    <div id="app">
    <h1>{{msg}}</h1>
        <button value="-"  @click="subcount">-</button> 
        <span>{{count}}</span>
        <button value="+" @click="addcount">+</button>

</div>
    
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data: {
                msg:"欢迎来到本小店",
                count:0,
            },
            methods: {
                addcount:function(){
                    if (this.count==10){
                        alert("不能再多了")
                    }else{
                        this.count++;
                    }
                },
                subcount(){
                    if (this.count==0){
                        alert("不能再多少了")
                    }else{
                        this.count --;
                    }
                },
            }
          
        });
    </script>
</body>
</html>

2.动态显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <h1 v-show="flag">{{msg}}</h1>
        <button v-test="text" @click="toggleshow">显示/隐藏</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app =new Vue({
            el:"#app",
            data:{
                msg:"欢迎使用Vue",
                flag: true,
                text: "显示",
            },
            methods: {
                toggleshow(){
                    this.flag = !this.flag;
                    if(!this.flag){
                        this.text = "隐藏";
                    }else{
                        this.text = "显示";
                    }
                }
            },
        })
    </script>

</body>
</html>

3.图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </style>
</head>
<body>
    <div id="app">
        <img :src="src">
        <br>
        <button @click="changeimg">切换图片</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
         const app = new Vue({
            
            el: "#app",
            data: {
               src:"img/1.jpg" ,
            },
            methods: {
                changeimg() {
                    this.src = "img/2.jpg"
                }
            },
        });

    </script>
    </script>
</body>
</html>

小张同学的小张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-08-27 第五组张明敏学习笔记

1.vue是一套用于构建用户界面的渐进式JavaScript框架采用组件化模式，提高代码复用率、且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。...
复制链接

扫一扫