vue插值语法，文本指令，属性指令，事件指令，class和style，条件渲染，列表渲染

内容回顾

drf注意事项

# 1 put,post 提交的json格式必须是标准json字符串格式
# 2 字符串中不小心加了空格
# 4 认证类，当前登录用户可以不去数据库查出来
# 5 斜杠问题(中间件：django.middleware.common.CommonMiddleware)
	-delete----》301---》get 
    -books/1

drf大回顾

序列化类

视图类

三大认证

过滤排序

全局异常

前端发展史

html5 css3 javascript>ecma+bom+dom

es5

es6 ``模板语法，箭头函数，导入导出语法。。。

语法发生了很大变化

ajax:没有前端框架，纯ajax+页面不需要后端渲染

vue（国内主流，小型公司）,react(主流，国内大型公司)

大前端》flutter(Dart语言)

uni-app:vue语法写小程序，android,ios

vue

版本：2（目前使用还是比较多）3（新版，慢慢在迁移）3完全兼容2的语法写，但是不推荐

MVVM架构

M:Model 模型层 js

V:View 视图层 html,css

VM:View Model层，vue的虚拟化dom在V于M中间的一层

组件化开发，单页面开发（spa,一个页面就是一个组件）

第一个vue>渐进式框架

把vue2源码，下载到本地》js代码

html中引入，写Vue语法

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'张三'
        }
    })实例
    
    <script/>

内容详情

插值语法

MVVM演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{name}}</p>
    <input type="text" v-model="name" >
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '张三'
        }
    })
</script>
</html>

插值语法

插值语法中可以放

变量，对象取值，数组取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>变量名取值：{{name}}</p>
    <p>数组变量名：{{data_list}}</p>
    <p>数组取值：{{data_list[0]}}</p>
    <p>对象变量名：{{data_obj}}</p>
    <p>对象取值：{{data_obj["addr"]}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            data_list: [1, 2, 3, 4, 5, 6],
            data_obj: {addr: '北京', phone: '123'}

        }
    })
</script>
</html>

简单的js语法

<div id="app">
    <p>{{3 * 4+2*8}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            data_list: [1, 2, 3, 4, 5, 6],
            data_obj: {addr: '北京', phone: '123'}

        }
    })
</script>

函数

<div id="app">
        <p>{{my_obj()}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            data_list: [1, 2, 3, 4, 5, 6],
            data_obj: {
                addr: '北京',
                phone: '123'
            },
        },
        methods: {
            my_obj() {
                alert('哈哈哈哈')
            },
        }
    })
</script>

三目运算，标签

<div id="app">
    <p>{{10 > 2 ? '大于' : '小于'}}</p>
    <p>{{label_url}}</p>
    <!--标签默认是不进行渲染的是为了防止xss攻击-->

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            data_list: [1, 2, 3, 4, 5, 6],
            data_obj: {
                addr: '北京',
                phone: '123'
            },
            label_url: '<a href="www.baidu.com">点我看美女</a>'
        },
        methods: {
            my_obj() {
                alert('哈哈哈哈')
            },
        }
    })
</script>

文本指令

指令系统

v-xx写在标签上，人员标签

v-xx=“” 》原来插值语法中能写的，它都能写，不要再加{{}}

指令系统：vue提供的都是v-xx 写在标签属性上的，统称为指令，例如a_url必须是data中定义的变量

v-text直接把字符串内容渲染在标签内部，等于

<p v-text="a_url"></p>
    <p>{{a_url}}</p>

v-html把字符串的内容渲染成标签，写在标签内部

<p v-html="a_url"></p>
<p><a href="www.baidu.com">点我看美女</a></p>

<div id="app">
    <h2>v-text这个写的标签不会渲染</h2>
    <div v-text="a_url">
    </div>
    <hr>
    <h2>v-html这样写的标签就会渲染了</h2>
    <div v-html="a_url"></div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="www.baidu.com">点我看美女</a>',
        },


    })
</script>

v-show 等于布尔值，该标签是否显示样式控制显示不显示

style="display: none;"

v-if 等于布尔值，该标签是否显示整个标签之间删除，效率低，在dom中删除标签

<body>
<div id="app">
    <h2>v-show</h2>
    <div v-show="show">v-show显示</div>
    <h2>v-show</h2>
    <div v-show="hidden">v-show不显示</div>
    <hr>
    <h2>v-if</h2>
    <div v-if="show">v-if显示</div>
    <h2>v-if</h2>
    <div v-if="hidden">v-if不显示</div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="www.baidu.com">点我看美女</a>',
            show: true,
            hidden: false,
        },


    })
</script>

属性指令

标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化

属性

href

src

name

class

style

height

width

语法

v-bind:属性名="变量名"

可以简写

:属性名="变量名"

<body>

<div id="app">
    <a v-bind:href="url">点我去博客园</a>
    <hr>
    <img :src="photo" :width="w" :height="h" alt="">
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'http://www.cnblogs.com',
            //photo: './img/a2.png',
            photo: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
            h: '200px',
            w: '200px'
        }
    })


</script>

事件指令

事件指令是：

点击事件：click

双击事件：dblclick

滑动事件：scroll

文本域变化事件：change

等等等

用的最多的是点击事件click

v-on:事件名=‘函数’

methods配置项中写成这种形式 es6的对象写法
handleClick() {}
如果函数中再套函数，如何内部不是箭头函数，this指向有问题，需要在外部定义一下
var _this = this

<div id="app">
    <button @click="handler">我显示图片</button>
    <br>
    <img src="./img/a3.png" v-show="show" alt="">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: false,
        },
        methods: {
            //写法1这个是es6新写法
            // handler() {
            //     this.show = !this.show
            //     console.log(this.show)
            // },
            //写法2
            handler:function () {
                this.show = !this.show
                console.log(this.show)
            }
        }


    })


</script>

小案例：点击按钮，随机切换图片

<div id="app">
    <button @click="handler">点我随机切换图片</button>

    <br>
    <img :src="src" v-show="show" width="200px" height="200px" alt="">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
            src: './img/a8.png',
            img_url: [
                './img/a1.png',
                './img/a2.png',
                './img/a3.png',
                './img/a4.png',
                './img/a5.png',
                './img/a6.png',
                './img/a7.png',
            ]
        },
        methods: {
            handler: function () {
                var url_num = Math.round(Math.random() * (this.img_url.length - 1))
                this.src = this.img_url[url_num]
                console.log(url_num)

            },

            //写法1这个是es6新写法
            // handler() {
            //     this.show = !this.show
            //     console.log(this.show)
            // },
            //写法2
            // handler: function () {
            //     this.show = !this.show
            //     console.log(this.show)
            // }
        }


    })


</script>

小案例：自动循环切换显示图片

<div id="app">
    <button @click="handler">点我循环随机切换图片</button>

    <br>
    <img :src="src" v-show="show" width="200px" height="200px" alt="">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
            src: './img/a8.png',
            img_url: [
                './img/a1.png',
                './img/a2.png',
                './img/a3.png',
                './img/a4.png',
                './img/a5.png',
                './img/a6.png',
                './img/a7.png',
            ]
        },
        methods: {
            //方法1
            //定时器图片一直循环
            // handler: function () {
            //     //匿名函数如果函数内嵌套函数那么this就会出现问题
            //     //内部函数使用箭头函数不会出现这种问题
            //     var _this = this
            //     var preNum = 8
            //     setInterval(function () {
            //         var url_num = Math.round(Math.random() * (_this.img_url.length - 1))
            //         //防止两次连续图片重复出现
            //         if (url_num === preNum) {
            //             url_num = url_num > 0 && url_num < _this.img_url.length-1 ? url_num - 1 : 3
            //
            //         }
            //         console.log(url_num)
            //         preNum = url_num
            //         _this.src = _this.img_url[url_num]
            //     }, 500)
            //
            //
            // },
            //方法2
            handler: function () {
                //匿名函数如果函数内嵌套函数那么this就会出现问题
                //内部函数使用箭头函数不会出现这种问题
                var preNum = 8
                setInterval(() => {
                    var url_num = Math.round(Math.random() * (this.img_url.length - 1))
                    //防止两次连续图片重复出现
                    if (url_num === preNum) {
                        url_num = url_num > 0 && url_num < this.img_url.length - 1 ? url_num - 1 : 3

                    }
                    console.log(url_num)
                    preNum = url_num
                    this.src = this.img_url[url_num]
                }, 500)
            }
        }
    })


</script>

class和style

本身他俩都是属性指令，但是他们比较特殊，应用更广泛，单独讲

class:推荐用数组

:class='变量'，变量可以是字符串，数组，对象

// classme: 'red text-blue',
// classme: ['red', 'text-blue'],
classme: {red: true, 'text-blue': true},

style:推荐对象

:style='变量'，变量可以是字符串，数组，对象

//styleme: 'color:blue;background:red;font-size:80px;',
//在style属性中用驼峰可以标识-例如 font-size  fontSize
//styleme: [{color: 'blue'}, {background: 'red'}, {fontSize: '80px'},],
styleme: {color: 'blue', background: 'red', fontSize: '80px'},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }

        .aqua {
            background-color: aqua;
        }

        .text-blue {
            color: blue;
        }


    </style>
</head>
<body>
<div id="app">
    <div :class="classme">
        这个是class属性
    </div>
    <br>

    <div :style="styleme">
        这个是stylec属性
    </div>


</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // classme: 'red text-blue',
            // classme: ['red', 'text-blue'],
            classme: {red: true, 'text-blue': true},


            // styleme: 'color:blue;background:red;font-size:80px;',
            //在style属性中用驼峰可以标识-例如 font-size  fontSize
            // styleme: [{color: 'blue'}, {background: 'red'}, {fontSize: '80px'},],
            styleme: {color: 'blue', background: 'red', fontSize: '80px'},
        },


    })


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

条件渲染

v-if=条件放在标签上，如果条件成立，该标签就显示，如果不成立，该标签就不显示

v-else-if=条件放在标签上，如果条件成立，该标签就显示，如果不成立，该标签就不显示

v-else 放在标签上，上面条件都不成立，显示这个标签

<div id="app">
    <div v-if="scop>=90">优秀</div>
    <div v-else-if="scop>=80">良好</div>
    <div v-else-if="scop>=60">及格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            scop: Math.round(Math.random() * 100)
        }


    })
    console.log(vm.scop)


</script>

列表渲染

<div id="app">
    <table border="1px">
        <thead>
        <tr>
            <th>编号</th>
            <th>商品名</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="data in good_list">
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.price}}</td>
        </tr>
        </tbody>

    </table>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: false,
            good_list: [
                {id: 1, name: '钢笔', price: '29'},
                {id: 2, name: '铅笔', price: '29'},
                {id: 3, name: '文具盒', price: '298'},
                {id: 4, name: '彩笔', price: '298'},
            ]
        },
        methods: {
            handleClick() {
                this.show = !this.show
            },


        }


    })


</script>

补充

解释器：python3.x

ide:集成开发环境，快速开发

pycharm

vscode

golang

dtl:django templates language django模板语法

作业

点击开始随机美女，点击美女停下（定时器停），弹出美女地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="handler">点我循环随机切换图片</button>
<!--    <button @click="stophandler">点我停止切换图片</button>-->
    <br>

    <img :src="src" @click="stophandler" v-show="show" width="200px" height="200px" alt="">
</div>
<script>
    var stop = null
    var preNum = 3
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
            src: './img/a8.png',
            img_url: [
                './img/a1.png',
                './img/a2.png',
                './img/a3.png',
                './img/a4.png',
                './img/a5.png',
                './img/a6.png',
                './img/a7.png',
            ]
        },
        methods: {
            //方法1
            //定时器图片一直循环
            // handler: function () {
            //     //匿名函数如果函数内嵌套函数那么this就会出现问题
            //     //内部函数使用箭头函数不会出现这种问题
            //     var _this = this
            //     var preNum = 8
            //     setInterval(function () {
            //         var url_num = Math.round(Math.random() * (_this.img_url.length - 1))
            //         //防止两次连续图片重复出现
            //         if (url_num === preNum) {
            //             url_num = url_num > 0 && url_num < _this.img_url.length-1 ? url_num - 1 : 3
            //
            //         }
            //         console.log(url_num)
            //         preNum = url_num
            //         _this.src = _this.img_url[url_num]
            //     }, 500)
            //
            //
            // },
            //方法2
            handler: function () {
                //匿名函数如果函数内嵌套函数那么this就会出现问题
                //内部函数使用箭头函数不会出现这种问题
				//这里是防止多次开启
                if (stop) {
                    return false
                }

                stop = setInterval(() => {
                    var url_num = Math.round(Math.random() * (this.img_url.length - 1))
                    //防止两次连续图片重复出现
                    if (url_num === preNum) {
                        url_num = url_num > 0 && url_num < this.img_url.length - 1 ? url_num - 1 : 3

                    }
                    console.log(url_num)
                    preNum = url_num
                    this.src = this.img_url[url_num]
                }, 500)
            },
            stophandler: () => {
                clearInterval(stop)
                // console.log(this)
                alert(vm.img_url[preNum])
                //关闭后把把置为false为下一次开启做准备
                stop = false
            },
        }
    })


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

posted @ 2023-02-14 23:06 clever-cat 阅读(31) 评论(0) 编辑收藏举报

刷新页面返回顶部

clever-cat

vue插值语法，文本指令，属性指令，事件指令，class和style，条件渲染，列表渲染

内容回顾

drf大回顾

前端发展史

vue

第一个vue>渐进式框架

内容详情

插值语法

插值语法

插值语法中可以放

变量，对象取值，数组取值

简单的js语法

函数

三目运算，标签

文本指令

指令系统

v-text直接把字符串内容渲染在标签内部，等于

v-html把字符串的内容渲染成标签，写在标签内部

v-show 等于布尔值，该标签是否显示 样式控制显示不显示

v-if 等于布尔值，该标签是否显示 整个标签之间删除，效率低，在dom中删除标签

属性指令

语法

事件指令

v-on:事件名=‘函数’

小案例：点击按钮，随机切换图片

小案例：自动循环切换显示图片

class和style

class:推荐用数组

style:推荐对象

条件渲染

列表渲染

补充

作业

公告

v-show 等于布尔值，该标签是否显示样式控制显示不显示

v-if 等于布尔值，该标签是否显示整个标签之间删除，效率低，在dom中删除标签