• Vue--入门篇


    一、v-model和单选按钮(radio)

     <div id="app">
           <input name="sex" value="男" type="radio" v-model='aaa'>男       //监测数据的变化!
           <input name="sex" value="女" type="radio" v-model='aaa'></div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                aaa:'男'   //对应的value的值,可以设置默认选中
            },
           
        })
        </script>

     二、v-model和复选框(checkbox)

     <div id="app">
           <input type="checkbox" value="吃饭" v-model='like'>吃饭
           <input type="checkbox" value="睡觉" v-model='like'>睡觉
           <input type="checkbox" value="打豆豆" v-model='like'>打豆豆
           <p>{{like}}</p>
        </div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                like:[]  //接收数据的数组
            },
           
        })
        </script>

     三、v-model和下拉列表(select)

       <div id="app">
           <select v-model='checkout'>     //下拉列表只需在select上绑定就可以
               <option value="吃饭">吃饭</option>
               <option value="睡觉">睡觉</option>
               <option value="打豆豆">打豆豆</option>
           </select>
           <p>{{checkout}}</p>
        </div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                checkout:'打豆豆'  //这里绑定谁,就默认显示谁。
            },
        })
        </script>

     v-model小案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <header>
                <label>
                    <input type="text" placeholder="请输入内容……" @keyup.enter='push'>
                </label>
            </header>
            <section>
                <ul>
                    <li v-for='(item,index) of getArr'>
                        <span>{{item}}</span>
                        <button @click='remove(index)'>删 除</button>
                    </li>
                </ul>
            </section>
        </div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                getArr:[],
            },
            methods:{
                push(e){
                    this.getArr.push(e.target.value)
                    e.target.value='';
                },
                remove(i){
                    this.getArr.splice(i,1)    //注意:删除,虽然是和原生数组的方法名一样,但不再是原生的本质,而是经过二次封装之后的。
                }
            }
        })
        </script>
    </body>
    </html>



    v-model的修饰符
        <div id="app">
            <!-- 实现一个双向数据绑定 -->
            <!-- <input type="text" :value="message" @input='fn'> -->   //给value绑定value值
            <!-- v-model的修饰符 .lazy  失去焦点是……   .number 返回一个数据类型-->
            <input type="text" v-model.lazy='message'>
            <p>{{message}}</p>
        </div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                message:'原生value不支持,所以用绑定,加:'
            },
            methods:{
                fn(e){   
                    this.message=e.target.value;
                }
            }
        })
        </script>

     

     四、computed (计算属性)注意:属性!属性!属性!!!!是一个属性。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="computed">
            <p>{{usename}}</p>   //此处不再加括号!!!属性
        </div>
        <script src="./vue.js"></script>
        <script>
            let app = new Vue({
                el: '#computed',
                data: {
                    firstname: 'Lebron',
                    lastname: 'james',
                },
                computed: {//计算属性---因为是属性,所以直接写,不再加括号
                    // usename() {
                    //     return this.firstname + '.' + this.lastname
                    // }
                    //计算属性的特点:有缓存,
    
    //展开写法; usename:{ //里面有一个get()方法和set()方法; get(){ return this.firstname+'.'+this.lastname }, set(val){ } } } }) </script> </body> </html>

     vue入门小demo

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}
        section{600px;height:400px;margin:200px auto;border: 2px solid #000;position: relative;left: 200px;;}
        .td{border-bottom: 1px solid rebeccapurple; 100%;height:50px;}
        .header{float: left;margin:0 40px;line-height: 50px;}
        .con{600px;height:70px;border-bottom: rebeccapurple 1px solid;display: flex;justify-content: space-around;}
        p{float: left;height: 70px;line-height: 70px;text-align: center;100px;}
        P:nth-of-type(3){display: flex;justify-content: space-around;100px;height:50px;align-items: center;}
        button{margin-right: 0;80px;height:25px;background:rgb(207, 205, 204);outline: none;border: none;border-radius: 10px;cursor: pointer;}
        div{position: absolute;bottom: 0;left: 0;}
        </style>
    </head>
    
    <body>
        <div id="app">
            <section>
                <ul class="td">
                    <li class="header">商品名</li>
                    <li class="header">价格</li>
                    <li class="header">数量</li>
                    <li class="header">产地</li>
                    <li class="header">删除</li>
                </ul>
                <ul>
                    <li class="con" v-for='(item,index) in message'>
                        <p>{{item.name |fruit}}</p>
                        <p>{{item.price | setMoney}}</p>   // | 是一个管道,后接过滤
                        <p><button class="ctrl" @click='cut(index)'> - </button>{{item.num}}<button @click='add(index)'> + </button></p>
                        <p>{{item.city}}</p>
                        <p><button @click='remove(index)'>删 除</button></p>
                    </li>
                </ul>
                <div>总价格:{{allPrice | allMoney}}</div>
            </section>
        </div>
        <script src="./vue.js"></script>
        <script>
            let app = new Vue({
                    el: '#app',
                    data: {
                        message: [
                            {
                                name: '红富士',
                                price: 15,
                                num: 5,
                                city: '静宁',
                            },
                            {
                                name: '哈密瓜',
                                price: 10,
                                num: 10,
                                city: '新疆',
                            },
                            {
                                name: '香蕉',
                                price: 20,
                                num: 10,
                                city: '三亚',
                            },
                            {
                                name: '葡萄',
                                price: 15,
                                num: 5,
                                city: '哈密',
                            },
                        ]
                    },
                    methods:{
                        cut(i) {
                            this.message[i].num > 1 && this.message[i].num--;     //如果 && 遇到false后面的表达式将不再执行
                        },
                        add(i) {
                            this.message[i].num < 10 && this.message[i].num++;
                        },
                        remove(i){
                            this.message.splice(i,1)
                        }
                    },
                    computed:{
                       allPrice() {
                            return this.message.reduce((prevPrice, nowPrice) => {
                                return prevPrice + (nowPrice.price * nowPrice.num)
                            },0)
                       }
                    },
                    filters:{//过滤  
                        setMoney(price){   //实参必须为所要筛选的数组项!!! 
                            return '¥'+price+ '.00'
                        },
                        fruit(name){
                            return '水果:'+name
                        },
                        allMoney(allPrice){
                            return '¥'+allPrice+'.00'
                        }
                    }
            })
        </script>
    </body>
    
    </html>

     五、watch  (监视)

    <body>
        <div id="app">
            <!-- <input type="text" v-model='dog'> -->
            <input type="text" v-model='obj.b.c'>
        </div>
        <script src="./vue.js"></script>
        <script>
        let app=new Vue({
            el:'#app',
            data:{
                dog:'哈士奇',
                obj:{
                    a:1,
                    b:{
                        c:222,
                    }
                }
            },
            computed:{
                
            },
            watch:{  //监听数据的变化。
                // dog(nValue,Ovalue){
                //     console.log(nValue,Ovalue)
                // }
                // 'obj.a'(newVal,oldVal){
                //     console.log(newVal,oldVal)
                // }
    
                //深层监听;
                obj:{
                    handler(newVal,oldVal){
                        console.log(newVal.b.c,oldVal.b.c)
                    },
                    deep:true,   //深层监控,handle此方法必须写,而且固定不变,
                }
            }
        })
        </script>
  • 相关阅读:
    大的FIbonacci数列_Java求法
    HDU1134_Game of Connections 卡特兰数
    oracle中查询锁表
    SpringBoot之使用Druid连接池以及SQL监控和spring监控
    用vue封装插件并发布到npm
    vue 预览 Excel 表格
    vue + elementUI 表格 底部 合计总数
    springboot项目中实现访问druid内置监控页面
    解决Elementui eltable合计 showsummary不显示,样式混乱问题
    Druid连接池:慢查询监控
  • 原文地址:https://www.cnblogs.com/gzw-23/p/11816923.html
Copyright © 2020-2023  润新知