day68:Vue:XXX

时间  2020-10-16
标签 html vue python ios ajax axios 后端 浏览器 app 函数 栏目 HTML 繁體版
原文   原文链接

1.类值操做

添加class类名，值是一个对象

<div :class="{c1:true/false}"></div>html

语法：{
    class类1:布尔值变量1,
    class类2:布尔值变量2,
        }
例子：
　　<p :class="{box1:myclass1}">一个段落</p>

// 布尔值变量若是是false，则不会添加对象的属性名做为样式
// 布尔值变量若是是true，则不会添加对象的属性名做为样式

类值操做常见形式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <style>
        .c1{
            background-color: red;
            font-size: 18px;
        }
        .c2{
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 根据data中的num的值来肯定是否显示c1样式 -->
        <div :class="{c1:num==0}" class="c2">{{msg}}</div>


        <!-- 根据vue传过来的data中的status的值来肯定显示c1样式仍是c2样式 -->
        <div :class="status?'c1':'c2'">{{ msg }}</div>


        <!-- m1为自定义对象 -->
        <div :class="[m1,]">{{ msg }}</div>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                msg:'hello',
                num:0,
                status:true,
                m1:{
                    c1:false,
                    c2:true,
                }
            }
        }
    })
</script>
</html>

总结

// 1. 给元素绑定class类名
data:{
    myObj:{
        complete:true,
        uncomplete:false,
        }
    }
// html元素：    
<div class="box" :class="myObj">2222</div>
// 最终浏览器效果：
<div class="box complete">2222</div>

2.style操做样式

操做样式语法: vue

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>
    <div id="app">
        <!-- style操做方式1 -->
        <div :style="{color:fontColor,backgroundColor:bgc}">
            style操做方式1
        </div>
        
        <!-- style操做方式2 -->
        <div :style="vuestyle">
            style操做方式2
        </div>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                fontColor: 'red',
                bgc: 'green',
                vuestyle: {
                    'color': 'red',
                    fontSize: '80px'
                },
            }
        }
    })
</script>
</html>

3:示例:选项卡

实现思路：当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span @click="num=1" :class="{current:num===1}">国内新闻</span>
            <span @click="num=2" :class="{current:num===2}">国际新闻</span>
            <span @click="num=3" :class="{current:num===3}">银河新闻</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="{active:num===1}">国内新闻列表</div>
            <div class="list" :class="{active:num===2}">国际新闻列表</div>
            <div class="list" :class="{active:num===3}">银河新闻列表</div>
        </div>
    </div>
    <script>
        // 思路：
        // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
        // 代码实现：
        var card = new Vue({
            el:"#card",
            data:{
                num:1,
            },
        });
    </script>

</body>
</html>

4.v-for示例：循环商品显示

v-for语法：ios

<tr v-for="(value,index) in vue中data的数据" :key="index">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

<div id="app">
    <table border="1">
        <thead>
            <tr>
                <th>name</th>
                <th>price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(value,index) in goods" :key="index">
                <td>{{ value.name }}</td>
                <td v-if="value.price>60" style="background-color: red">{{ value.price }}</td>
                <td v-else>{{ value.price }}</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                goods: [
                    {"name": "python入门", "price": 150},
                    {"name": "python进阶", "price": 100},
                    {"name": "python高级", "price": 75},
                    {"name": "python研究", "price": 60},
                    {"name": "python放弃", "price": 110},
                ]
            }
        }
    })
</script>
</html>

5.过滤器:filter

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <p>{{ price }}</p>
        <p>{{ price.toFixed(2) }}</p> <!-- 保留两位小数，四舍五入 -->
        <p>{{ price|yuan }}</p> <!-- 过滤器 -->
        <p>{{ price|global }}</p> <!-- 使用全局过滤器 -->
        <p>{{ price|global|yuan }}</p> <!-- 同时使用两个过滤器 -->
        <p>{{ price2|yuan2(2) }}</p> <!-- 过滤器传额外参数 -->
    </div>

</body>
<script src="vue.js"></script>
<script>
    // 全局过滤器
    Vue.filter('global',function (value) {
        return value.toFixed(3) + '圆'
    });
    let vm = new Vue({
        el:"#app",
        data(){
            return{
                price:100,
                price2:100.128,
            }
        },
        filters:{ // vue中的过滤器
            yuan(value){
                return value + '元'
            },
            yuan2(value,n){
                return value.toFixed(n) + '元'
            }
        }
    })
</script>
</html>

6.计算属性:computed

咱们以前学习过字符串反转，若是直接把反转的代码写在元素中，则会使得其余同事在开发时时不易发现数据被调整了，因此vue提供了一个计算属性(computed)，可让咱们把调整data数据的代码存在在该属性中ajax

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p>{{ price }}</p>
        <p>{{ add }}</p>
    </div>

</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                price1:100,
                price2:100.126,
            }
        },
        // 计算属性
        computed:{
            add(){
                return this.price1+ this.price2
            }
        }
    })
</script>
</html>

7.监听属性:watch

侦听属性，能够帮助咱们侦听data某个数据的变化，从而作相应的自定义操做。axios

侦听属性是一个对象，它的键是要监听的对象或者变量，值通常是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化后的数据值，第二个是变化前的数据值。后端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p> {{ price1 }}</p>
        <input type="text" v-model = "price1">
        <button @click="info.xx='ss'">GOGOGO</button>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data(){
            return{
                price1:100,
                price2:100.126,
                info:{
                    xx:'oo'
                }
            }
        },
        watch:{
            // 监听变量
            price1(newv,oldv){
                console.log(newv,oldv);
                if (newv == 888){
                    alert('恭喜你，中奖了!')
                }
            },
            
            // 监听对象
            'info.xx':function (newv,oldv) {
                if(newv != 'oo'){
                    alert('oo滚出了房间！')
                }
            }
        }
    })
</script>
</html>

8.监听属性watch示例:用户名长度限制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <input type="text" v-model="iptmsg">
        <span style="color: red;font-size: 12px">{{msg}}</span>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                iptmsg:'',
                msg:''
            }
        },
        watch:{
            // 监听input框输入的信息，判断长度是否符合要求
            iptmsg(newv,oldv){
                if (newv.length>4 && newv.length<10){
                    this.msg=''
                }
                else{
                    this.msg='长度不对！'
                }
            }
        }
    })
</script>
</html>

9.vue对象的生命周期钩子函数

每一个Vue对象在建立时都要通过一系列的初始化过程。在这个过程当中Vue.js会自动运行一些叫作生命周期的的钩子函数，咱们可使用这些函数，在对象建立的不一样阶段加上咱们须要的代码，实现特定的功能。浏览器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p>{{ num }}</p>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                num:0,
            }
        },
        // 触发时机：1.建立vm对象以前 2.圈地以前 3.data数据放到vm对象以前
        beforeCreate(){
            console.log('----beforeCreate----');
            console.log(this.$el); // undefined
            console.log(this.$data); //undefined
        },
        // 重要!!
        created(){
            console.log('----created----');
            console.log(this.$el); // undefined
            console.log(this.num); // 0 data属性的值0已经放到vm对象中
            this.num = 20;
        },
        beforeMount(){
            console.log('----beforeMount----');
            console.log(this.$el); // <div id="app">...</div>
            console.log(this.num); // 20 vm对象尚未将数据添加到咱们的视图中
            this.num = 30;
        },
        // 重要!!
        mounted(){
            console.log('----mounted----');
            console.log(this.$el); // <div id="app">...</div>
            console.log(this.num); // 30 vm对象已经把更新后的data数据显示到页面中
        }

    })
</script>
</html>

对于生命周期钩子函数的总结

1.在vue使用的过程当中，若是要初始化操做，把初始化操做的代码放在 mounted 中执行。mounted阶段就是在vm对象已经把data数据实现到页面之后。通常页面初始化使用。例如，用户访问页面加载成功之后，就要执行的ajax请求。app

2.另外一个就是created，这个阶段就是在 vue对象建立之后，把ajax请求后端数据的代码放进 created函数

vue完整的生命周期

 

 

 

 10.阻止事件冒泡 .stop .stop.prevent

 <div class="c2" @click.stop.prevent="f2"></div>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
    <style>
        .c1{
            background-color: red;
            height: 200px;
        }
        .c2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="c1" @click="f1">
            <div class="c2" @click.stop.prevent="f2"></div> <!-- 阻止事件冒泡 -->
        </div>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm  = new Vue({

        el:'#app',
        data(){
            return {
                price1:100,

            }
        },
        methods:{
            f1(){
                alert('111');
            },
            f2(){
                alert('222');
            }
        }

    })

</script>
</html>

11.综合示例:todolist

。。。

12.什么是钩子?

1.在A中的init方法调用一个函数

2.B继承A

3.B能够重写A预留出来的钩子方法run

4.当实例化B时，因为B中没有init，会执行其父类A中的init，而A中的init调用了run方法

　　若是B中重写run方法 那么执行B中的run方法

　　若是B中没重写run方法 那么执行A中的run方法

　　都是自动执行的 ，由于实例化对象时 会自动执行init方法，而init方法执行了run函数

class A:
    def __init__(self):
        self.run()
    def run(self):
        pass


class B(A):
    def run(self):
        print('xxxx')

b = B()

13.axios

。。。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程