首页 > 其他分享 >Day02 - Vue 基础知识

Day02 - Vue 基础知识

时间:2023-09-22 12:46:16浏览次数:52  
标签:Vue name img Day02 list jpg 基础知识 book 标签

模版语法

<body>
<div id="app1">
    <h1>模版语法</h1>
    <p>渲染字符串,------姓名:{{ name }}</p>
    <p>渲染字符串,------年龄:{{ age }}</p>
    <p>渲染数组类型,------>:{{ list1 }}</p>
    <p>渲染数组类型按照索引取值,------>:{{ list1[0] }}</p>
    <p>渲染对象类型,------>:{{ obj }}</p>
    <p>渲染对象类型中的姓名,------>:{{ obj.name }}</p>
    <p>渲染对象类型中的年龄,------>:{{ obj["age"] }}</p>
    <p>渲染标签类型字符串,------>:{{ link }}</p>
    <p>三目运算符,------>:{{ 8 > 9 ? 1 : 0 }}</p>
    <p>三目运算符,------>:{{ list1.length > 3 ? "正确" : "错误" }}</p>
    <p>简单运算,------>{{ age + 100 }}</p>
    <p>简单运算,------>{{ 100 + 100 }}</p>
    <p>函数返回结果渲染,------>{{ add(1, 2) }}</p>
</div>
<script type="module" src="/src/main.js"></script>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            name: "杨赋华",
            age: 18,
            list1: ["a", "b", "c"],
            obj: {name: "杨赋华", age: "18"},
            link: "<a href=\"https://mzt8.com/wp-content/uploads/2023/07/VOL_157_1.jpg\">每日妹子图</a>",
        },
    })
</script>

文本指令

<body>
    <div id="app1">
        <h1>文本指令 v-text v-html</h1>
        <h2>text把字符串内容渲染到标签内部</h2>
        <p v-text="name"></p>
        <p v-text="age"></p>
        <p v-text="list1"></p>
        <p v-text="link"></p>
        <h2>html把标签类型的字符串渲染成标签</h2>
        <p v-html="link"></p>
        <hr>
        <h1>文本指令 v-show v-if---通过true或false来控制标签</h1>
        <h2>v-show控制标签内部是否显示,通过display控制标签</h2>
        <p v-show="isShow">我是v-show的P标签</p>
        <h2>v-if控制标签内部是否显示,直接把该标签从dom中删除</h2>
        <p v-if="isShowTwo">我是v-if的P标签</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app1",
        data: {
            name: "杨赋华",
            age: 18,
            list1: ["a", "b", "c"],
            obj: {name: "杨赋华", age: "18"},
            link: "<a href=\"https://mzt8.com/wp-content/uploads/2023/07/VOL_157_1.jpg\">每日妹子图</a>",

            isShow: true, // true显示该标签,false隐藏该标签
            isShowTwo: true // true显示该标签,false删除该标签
        },
    })
</script>

小案例

// 通过点击按钮显示和不显示图片:代码
<body>
    <div id="app2">
        <p><button @click="Girls">点击按钮显示妹子</button></p>
        <img src="img/测试图.jpg" alt="" v-if="girlsimg" height="400px" width="400px">
    </div>

    <script>
        let vn = new Vue({
            el: "#app2",
            data: {
                girlsimg: false
            },
            methods: {
                Girls() {
                    this.girlsimg = !this.girlsimg
                }
            }
        })
    </script>
</body>

小总结

vue 的指令系统 ,放在标签,以v-开头的,每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部,但如果是标签字符串,会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制,在html中还存在
v-if:控制标签显示与否:通过dom操作做的,这个标签从dom中删除了

事件指令

用v-on绑定事件后,只要触发事件,就会执行函数
	v-on:点击事件,双击事件,滑动事件 ='函数'
        
用的最多的就是click事件 ,单击事件


v-on:click=‘函数’---》放在标签上,点击标签,就会触发函数执行---》函数必须写在methods中,可以用es6语法的简写
    methods: {
        // handleClick: function () {
            //     alert('美女')
            // }
        handleClick() {  // es6 语法
                       alert('美女')
                      },
     

        }
v-on: 可以使用 @ 替换

代码

<body>
    <div id="app1">
        <h1>事件指令</h1>
        <button v-on:click="cat">点我看美女</button>
        <!--    <img src="img/测试图.jpg" alt="" >-->
        <button v-on:click="cat1">点我看参数</button>
    </div>
    <script>
        new Vue({
            el: "#app1",
            data: {},
            methods: {
                cat() {
                    alert("美女")
                },
                cat1(a, b) {
                    console.log(a, b)
                }
            }
        })
    </script>
</body>
 <!--如果不传参数,默认第一个参数是,点击事件对象:PointerEvent-->
 <!--如果只穿一个参数,点击事件对象就不传了,第一个参数是传入得知第二个参数是undefined-->
 <!--如果传入两个参数,就会正常使用-->
 <!--如果传入多个参数,还是只会用对应的-->
 <!--如果一个传入正常参数,另一个传入绑定对象,第一个参数就是正常参数,第二个参数是绑定对象-->

属性指令

作用:
	每个标签都有属性,动态替换属性的值,就要用到属性指令
用法;
	v-bind:属性="指令"
    简写:
        :id = "变量"
        :name = "变量"

代码

<body>
<div id="app1">
    <h1>属性指令</h1>
    <div>
        <button @click="hander">点我看美女</button>
        <hr>
        <button @click="handle">点我放大美女</button>
        <hr>
        <img v-bind:src="img_url" alt="美女图" :height="height" :width="width">
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            img_url: "",
            height: "100px",
            width: "100px",
        },
        methods: {
            hander() {
                this.img_url = "img/测试图.jpg"
            },
            handle() {
                this.height = "1800px"
                this.width = "1000px"

            }
        }
    })
</script>

点击切换图片

<body>
<div id="app1">
    <h1>属性指令</h1>
    <div>'/
        
        '
        '/
        
        '/
        <h1>点我切换图片</h1>
        <button @click="handers">点我切换美女</button>
        <hr>
        <img :src="img_urls" alt="" :height="height" :width="width">
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            img_urls: "img/测试图.jpg",
            img_list: ["img/测试图.jpg", "img/测试图1.jpg", "img/测试图2.jpg", "img/测试图3.jpg", "img/测试图4.jpg", "img/测试图5.jpg", "img/测试图6.jpg"]
        },
        methods: {
            handers() {
                this.img_urls = this.img_list[Math.floor(Math.random() * this.img_list.length)]
                this.height = "500px"
                this.width = "400px"
            }
        }
    })
</script>

类属性

    <style>
        .red {
            background-color: aqua;
        }

        .purple {
            background-color: brown;
        }
    </style>

<body>
<div id="app1">
        <button @click="henderClass">点我显示class</button>
        <hr>
        <div :class="isClass?'red':'purple' ">
            <h1>My name is 陈冠希</h1>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            img_url: "",
            height: "100px",
            width: "100px",

            heights: "100px",
            widths: "100px",

            img_urls: "img/侧视图.jpg",
            img_list: ["img/测试图.jpg", "img/测试图1.jpg", "img/测试图2.jpg", "img/测试图3.jpg", "img/测试图4.jpg", "img/测试图5.jpg", "img/测试图6.jpg"],
            isClass: true
        },
            henderClass() {
                this.isClass = !this.isClass
            }
        }
    })
</script>

style和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .big {
            font-size: 60px;
        }

        .back {
            background-color: greenyellow;
        }

    </style>
</head>
<body>
<div id="app">
    <h1>class和style:能够绑定什么类型的变量:字符串,数组,对象</h1>

    <h2>style绑定字符串,数组,对象</h2>
    <div :style="style_obj">
        <button @click="handleXi">点击变细</button>
        <button @click="handleFont">点击字变小</button>
        <p>我是div内的p</p>
    </div>
    <h2>class绑定字符串,数组,对象</h2>
    <div :class="class_obj">
        <button @click="handleClick1">点击去掉背景</button>
        <button @click="handleClick2">点击子变大</button>
        <button @click="handleClick3">点击子变小</button>
        <p>我是div内的p</p>
    </div>


</div>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // style是字符串类型
            style_str: 'background: red;font-size: 60px;font-weight: bold',
            // style是数组类型
            style_list: [{'background': 'red'}, {fontSize: '60px'}, {fontWeight: 'bold'}],
            // style:是对象类型(建议用对象)
            style_obj: {'background': 'red', fontSize: '60px', 'font-weight': 'bold'},

            // class 是字符串类型
            class_str: 'big back',
            // class 是数组类型--->推荐用它
            class_list: ['big', 'back'],
            // class 是对象类型
            class_obj: {big: true, back: true}
        },
        methods: {
            handleXi() {
                this.style_str = 'background: red;font-size: 60px'
                this.style_list.pop()
            }, handleFont() {
                this.style_obj.fontSize = '30px'
            }, handleClick1() {
                // this.class_str = 'big'
                // this.class_list.pop()
                this.class_list.shift()
            }, handleClick2() {
                this.class_list.push('big')
            }, handleClick3() {
                this.class_obj.big = false

            }
        }
    })
</script>
</html>

条件渲染

v-if 、 v-else-if 、 v-else


<body>
<div id="app1">
    <span v-if="score >= 90">优秀</span>
    <span v-else-if="score >= 70 && score<=90">良好</span>
    <span v-else-if="score >= 60 && score<=70">一般</span>
    <span v-else>不及格</span>
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            score: 80
        }
    })
</script>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="src/JS/Vue.js"></script>
    <script src="src/JS/jQuery.js"></script>
    <script src="src/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
    <script type="module" src="/src/main.js"></script>
    <style>
        .big {
            font-size: 60px;
        }

        .back {
            background-color: greenyellow;
        }
    </style>
    <title></title>
</head>
<body>
<div id="app1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
                    <button class="btn btn-danger" @click="deleteShow">点我删除购物车</button>

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>id号</th>
                            <th>商品名字</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in good_list">
                            <th scope="row">{{ item.id }}</th>
                            <td>{{ item.name }}</td>
                            <td>{{ item.price }}</td>
                            <td>{{ item.count }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            good_list: []
        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            deleteShow() {
                this.good_list.pop()
            }
        }
    })
</script>
</html>

v-for能循环的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1>循环数组-->见过了</h1>
                <p v-for="(value,index) in girls">第 {{index + 1}}个女神是:{{value}}</p>
                <h1>循环对象</h1>
                <p v-for="(value,key) in userinfo">key值是:{{key}},value值是:{{value}}</p>
                <h1>循环字符串</h1>
                <p v-for="(value,index) in s">第 {{index}}个字母是:{{value}}</p>
                <h1>循环数字</h1>
                <p v-for="i in 10">{{i}}</p>

            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '高圆圆'],

            userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
            s: 'hello world'
        },
        methods: {}
    })
</script>
</html>

获取所有图书接口,vue+bootstrap+jquery的ajax,显示在前端 ------->跨域问题

后端代码:
class Cat_All_Book(ViewSetMixin, APIView):
    @action(methods=["GET"], detail=False)
    def cat_book(self, request, *args, **kwargs):
        book_obj = Book.objects.all().filter(is_delete=0)
        book_list = []
        for book in book_obj:
            book_list.append({"book_id": book.pk, "book_name": book.book_name, "book_price": book.book_price})
        response = Response(book_list, )
        response["Access-Control-Allow-Origin"] = "*"
        return response
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="src/JS/Vue.js"></script>
    <script src="src/JS/jQuery.js"></script>
    <script src="src/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
    <script type="module" src="/src/main.js"></script>
    <title></title>
</head>

<body>
<div id="app1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <button class="btn btn-success" @click="cat_book">点我显示购物车</button>
                    <button class="btn btn-danger">点我删除书籍</button>

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>图书ID</th>
                            <th>图书名字</th>
                            <th>图书价格</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="book in books_list">
                            <td>{{ book['book_id'] }}</td>
                            <td>{{ book["book_name"] }}</td>
                            <td>{{ book["book_price"] }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app1",
        data: {
            books_list: []
        },
        methods: {
            cat_book() {
                var _this = this;
                $.ajax({
                    url: "http://127.0.0.1:8000/book/cat_book/",
                    methods: "get",
                    success: function (args) {
                        _this.books_list = args;
                        console.log(_this.books_list)
                    }
                })
            }
        },
    })
</script>
</html>

把uniapp,开发工具hbuilder下载,点击切换美女图片--->包成安装apk--->安装到自己手机上


标签:Vue,name,img,Day02,list,jpg,基础知识,book,标签
From: https://www.cnblogs.com/chao0308/p/17722006.html

相关文章

  • Day01 - Vue介绍
    前端介绍1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2Ajax的出现->后台发送异步请求,Render+Ajax混合3单用Ajax(加载数据,DOM渲染页面):......
  • Day06 - Vue项目的使用
    解析Vue项目//1为什么浏览器中访问某个地址,会显示某个页面组件 -根组件:App.Vue必须是:<template><divid="app"><router-view></router-view></div></template> -配置路由: //先导入 importy......
  • Day05 - Vue之动态组件、插槽、项目的创建
    动态组件//关键字: component//使用方法:<component:is="who"></component>//component标签的is属性等于组件名字,这里就会显示这个组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><link......
  • Vue中qs的使用
    1、qs是什么qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。2、qs安装qs,是axios中自带的,也是npm仓库所管理的包。安装方式:npminstallqsVue项目导入:importqsfrom'qs'Vue项目中的main.js中设置全局属性的方式:Vue......
  • VUE中的data(){return}与data:{}区别
    组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。data:{}data:{msg:0}使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。data(){return}data(){......
  • vue3 父子组件通信 setup
    父传子father<template><div><h2>父传子Father</h2><!--<buttonclass="bg-green-300roundedp-1">父按钮</button>--><divclass="w-[200px]h-[200px]bg-violet-200">......
  • VUE3+vite+arco design 项目初始化
    意见反馈系统总结创建项目首先选择一个文件夹进入命令窗口使用vite创建项目npmcreatevite@latest初始化项目后进入项目安装依赖npminstall运行npmrundev使用arcodesign组件库安装npminstall--save-dev@arco-design/web-vue引入import{createApp}fr......
  • Vue3组件通信方式
    Vue3组件通信方式不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。比如:vue2组件通信方式props:可以实现父子组件、子父组件、甚至兄弟组件通信自定义事件:可以实现子父组件通信全局事件总线$bus:可以实现任意组件通信pubsub:发布订阅模式......
  • vue 解决报错
    目录vue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errnoarco-init项目初始化失败!Error:spawnSyncpnpm.cmdENOENTvue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errno最近入门vue,用字节跳动的arco初始化一个项目的时候报错......
  • vue学习问题解决
    报错errorComponentname"Index"shouldalwaysbemulti-wordvue/multi-word-component-names解决方法1、问题说明:在创建组件命名时,引用index.vue的过程中报错;2、报错的原因及分析:其一、报错的全称为:errorComponentname"index"shouldalwaysbemulti-wordvue/multi-w......