526互联

Day02 - Vue 基础知识

发布时间 2023-09-22 12:41:16作者: Way*yy

模版语法

<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--->安装到自己手机上