博客

Python VUE 基础知识

  • Post author:
  • Post category:python


一 什么是VUE

它是一个构建用户界面的JavaScript框架，自动生成(js,css,HTML文件)

二 如何使用VUE


1.  应用vues.js
 

<script src="vue.js"></script>



2.  展示html

 

<div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
</div>




3.  建立vue对象


 

<script>
    new Vue({
        el:"#app",    // 表示在当前这个元素内开始使用VUE
        data:{
            msg:''
        }
    })
</script>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>


<script>
    new Vue({
        el:"#app",    // 表示在当前这个元素内开始使用VUE
        data:{
            msg:''
        }
    })
</script>
</body>
</html>


input输入自动显示

三 在元素当中插入值

1. {{}}：里面可以放表达式
2. 指令：是带有V-前缀(v-model="msg")的特殊属性,通过属性来操作元素
    v-model: 把input的值事件绑定了,实现了数据和视图的双向绑定
        分成三步：
            1. 把元素的值和数据想绑定
            2. 当输入内容时,数据同步发生变化,实现了视图----->到数据的驱动
            3. 当改变数据时,输入内容也会发送变化,数据----->视图的驱动
    v-text: 在元素当插入值
    v-html: 在元素不中不仅可以插入文本,还可以插入标签:使用 <h2 v-html="hd"></h2> hd:'<input type="button" value="叫爸爸">',
    v-if: 根据表达式的真假值来动态插入或移除元素(注释掉<!------>,不存在DOM元素中)
    v-show: 根据表达式的真假值来隐藏(通过css隐藏dispaly:none,存在DOM元素中)和显示元素
    v-for: 根据变量的值来循环渲染元素
    v-on: 监听元素事件,并执行相应的操作 v-on:click='show()' 等用于 @click='show()'  @只能做事件的绑定
    v-bind: 绑定元素的属性来执行相应的操作 v-bind:href="url" 等同于 :href="url"
3. 对数组的操作：
    push
    pop
    shift    删除第一个值
    unshif   删除最后一个值
    splice   删除中间一个值,splice(index,1)
    reverse  给数组进行反转

四 在元素当中插入值

new Vue({
    el: "#app",    // 表示在当前这个元素内开始使用VUE
    data: {

    },
    directives:{
        focus:{     // 指令的名字
            /**  当绑定的元素显示时 **/
            inserted:function (tt) {
                tt.focus();

            }
        }
    }
});

五 指令示例


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue.js"></script>
 7     <style>
 8         ul li {
 9             list-style: none;
10         }
11     </style>
12 </head>
13 <body>
14 
15 <div id="app">
16     <input type="text" v-model="msg" value="this is test">
17     <p>{{msg}}</p>
18     <input type="button" value="变化" @click="change">
19 </div>
20 
21 
22 <script>
23     var vm = new Vue({
24         el: "#app",    // 表示在当前这个元素内开始使用VUE
25         data: {
26             msg:'aaaa'
27         },
28         methods:{
29             change:function () {
30                 this.msg=888888
31             }
32         }
33 
34     });
35 
36 </script>
37 
38 
39 </body>
40 </html>


v-model
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bk_1 {
            background-color: dodgerblue;
            width: 200px;
            height: 200px;
        }

        .bk_2 {
            background-color: red;
            width: 200px;
            height: 200px;
        }
        .bk_3 {

            border: 2px solid black;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <a href="http://www.qq.com" v-bind:title="msg">腾讯</a>
    <div :class="bk"></div>
    <div :class="bk2"></div>

    <div :class="{bk_2:temp}">bk2</div>
    <div :class="[bk2,bk3]">1111111111</div>

</div>


<script>
    var vm = new Vue({
        el: "#app",    // 表示在当前这个元素内开始使用VUE
        data: {
            msg: '点击进入腾讯副本',
            bk:'bk_1',
            bk2:'bk_2',
            bk3:'bk_3',
            temp:true
        }
    })
</script>


</body>
</html>


v-bind
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>

    <ul>
        <li v-for="(index,item) in arr">{{index}} {{item}}</li>
    </ul>


    <ul>
        <li v-for="(index,item) in obj">{{index}} {{item}}</li>
    </ul>


    <ul>
        <li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li>
    </ul>

    <div v-for="i in 8">
        {{i}}
    </div>
</div>


<script>
    var vm = new Vue({
        el: "#app",    // 表示在当前这个元素内开始使用VUE
        data: {
            arr: [11, 22, 33, 44, 55],
            obj: {
                a: '张三',
                b: 'GPD',
                c: 'UDP',
                d: 'TCP',
                e: 'VRP'
            },
            obj2:[{username:'alex'},{age:'20'},{sex:'male'}]
        }
    });

</script>


</body>
</html>


v-for
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="msg">
    <p v-if="pick">我是刘德华</p>
    <p v-else>我是张学友</p>
    <p v-show="temp">我是张渣辉</p>
    <p v-if="ok">我是古天落</p>

</div>


<script>
    var vm=new Vue({
        el:"#app",    // 表示在当前这个元素内开始使用VUE
        data:{
            pick:false,  //不显示
            temp:true,
            ok:true
        }
    });

    window.setInterval(function () {
        vm.ok= !vm.ok;
    },1000)
</script>





</body>
</html>


v-if_show
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>

    <ul>
        <li v-for="(index,item) in arr">{{index}} {{item}}</li>
    </ul>


    <ul>
        <li v-for="(index,item) in obj">{{index}} {{item}}</li>
    </ul>


    <ul>
        <li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li>
    </ul>

    <!--<input type="button" value="点我" v-on:click='show()'>-->
    <input type="button" value="点我" @click='show()'>


    <!--<a v-bind:href="url">点击进百度</a>-->
    <a :href="url">点击进百度</a>

</div>


<script>
    var vm = new Vue({
        el: "#app",    // 表示在当前这个元素内开始使用VUE
        data: {
            arr: [11, 22, 33, 44, 55],
            obj: {
                a: '张三',
                b: 'GPD',
                c: 'UDP',
                d: 'TCP',
                e: 'VRP'
            },
            obj2:[{username:'alex'},{age:'20'},{sex:'male'}],
            str:'I comming',
            url:"http://www.qq.com"
        },
        methods:{
            show:function () {
                /**<!---如果没有定义vm --->**/
/*             alert(vm.str)     **/
//                alert(this.str);
                //  对数组进行操作
                this.arr.pop()
            }
        }
    });

</script>


</body>
</html>


v-on
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>

<div class="app2">
    <h3>调查问卷</h3>
    <p>苹果<input type="checkbox"></p>
    <p>香蕉<input type="checkbox"></p>
    <p>白菜<input type="checkbox"></p>
    <p>番茄<input type="checkbox"></p>
    <p>葡萄<input type="checkbox"></p>
    <p>其他<input type="checkbox" @click="add()"></p>
    <p v-show="qh" v-html="hd"></p>
</div>


<script>
    var vm = new Vue({
        el: ".app2",    // 表示在当前这个元素内开始使用VUE,element：el 必须这样写
        data: {
            hd:'<input type="text" >',
            qh:false
        },
        methods: {
            add: function (t) {
                this.qh = !this.qh
            }
        }


    });

</script>


</body>
</html>


动态生成input
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>

<div id="app">
    <div>
        <p><input type="text" placeholder="姓名" v-model="username"></p>
        <p><input type="text" placeholder="年龄" v-model="age"></p>
        <input type="button" value="增加" @click="add">
    </div>
    <div>
        <table cellspacing="0">

            <tbody>
                <tr v-for="(index,item) in arr">
                    <td>{{item.username}}</td>
                    <td>{{item.age}}</td>
                    <td>{{index}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


<script>
    var vm = new Vue({
        el: "#app",    // 表示在当前这个元素内开始使用VUE
        data: {
            username:'',
            age:'',
            arr:[]
        },
        methods:{
            add:function () {
                this.arr.push({username:this.username,age:this.age});
                console.log(this.arr)
            },
            del:function (index) {
                this.arr.splice(index,1)
            }
        }
    });

</script>


</body>
</html>


维护学生信息
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li {
            list-style: none;
            display: inline-block;
            border: 1px solid dodgerblue;
            height: 30px;
            line-height: 30px;
            width: 120px;
            text-align: center;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li v-on:click="qh(true)">
           <span >二维码登录</span>
        </li>
        <li v-on:click="qh(false)">
            <span >邮箱登录</span>
        </li>
    </ul>
    <div style="margin-left:80px" v-if="temp">
        <img src="getUrlQrcode.jpg" alt="">
    </div>

    <div style="margin-left:80px" v-if="!temp">
        <form action="https://mail.163.com/" method="post">
            <p><input type="email"></p>
            <p><input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            temp:true
        },
        methods:{
            qh:function (t) {
                console.log(t);
                this.temp=t
            }
        }
    })
</script>
</body>
</html>


tag切换案例
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
        .tipbox{
            width: 200px;
            height: 250px;
            border: 1px solid dodgerblue;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="app">
    <div>
        <p><input type="text" placeholder="姓名" v-model="username"></p>
        <p><input type="text" placeholder="年龄" v-model="age"></p>
        <input type="button" value="增加" @click="add">
    </div>
    <div>
        <table cellspacing="0" border="1px solid">

            <tbody>
                <tr v-for="(index,item) in arr">
                    <td>{{item.username}}</td>
                    <td>{{item.age}}</td>
                    <td>{{index}}</td>
                    <td><button @click="del(index)">删除</button></td>
                    <td><button @click="showBox(index)">编辑</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="tipbox" v-show="isShow">
        <h3>修改信息</h3>
        <p><input type="text" placeholder="姓名" v-model="m_username"></p>
        <p><input type="text" placeholder="年龄" v-model="m_age"></p>
        <p>
            <input type="button" value="确定"  @click="save()">
            <input type="button" value="取消" @click="cancel()">
        </p>


    </div>
</div>


<script>
    var vm = new Vue({
        el: "#app",    // 表示在当前这个元素内开始使用VUE
        data: {
            username:'',
            age:'',
            arr:[],
            isShow:false,
            m_username:'',
            m_age:'',
            n:0
        },
        methods:{
            add:function () {
                this.arr.push({username:this.username,age:this.age});
                console.log(this.arr)
            },
            del:function (index) {
                this.arr.splice(index,1)
            },
            showBox:function (index) {
                this.isShow=true;
                this.m_username = this.arr[index].username;
                this.m_age = this.arr[index].age;
                this.n=index
            },
            cancel:function () {
                this.isShow=false;
            },
            save:function () {
                this.arr[this.n].username=this.m_username;
                this.arr[this.n].age=this.m_age;
                this.isShow=false;
            }
        }
    });

</script>


</body>
</html>


维护学生信息-编辑

转载于:https://www.cnblogs.com/supery007/p/8351509.html