zoukankan      html  css  js  c++  java
  • vue 总结

    VUE总结

    双花括号{{}}

    01.index.hmlt

    main.js

    内存的数据可以更改

    v-model 双休数据绑定

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
            <span v-show="name">你的名字是:{{name}}</span>
        </div>
        <div>
            <input type="text" v-model="age">
            <span v-show="age">你的年龄是:{{age}}</span>
        </div>
        <div>
            <input type="text" v-model="sex">
            <span v-show="sex">你的年龄是:{{sex}}</span>
        </div>
    </div>
    </body>
    <script src="js/main.js"></script>
    </html>
    01.index.html
    var app = new Vue({
        el:"#app",
        data:{
            name:null,
            age:null,
            sex:null
        }
    });
    main.js

    v-show:显示或者隐藏

    main.js

    index.html

    语法

    v-for:循环

    main.js

    index.html

    运行结果

    main.js 数据结构一般是嵌套的

    index.html

     

    每个对象的属性可以点出来

    双花括号里的东西是可以进行运算的。

    如计算打折后的价格。其中葱不打折

    出现了NaN怎么解决呢???

    三元运算符

    判断是否有打折,有则显示打折后的价格,没有则显示原价格。

    数据可以动态加

     

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="food in foodList">{{food.name}}: ¥{{food.discount ? food.price * food.discount : food.price}}</li>
        </ul>
    </div>
    </body>
    <script src="js/02.main.js"></script>
    </html>
    02.v-for.html
    var app = new Vue({
        el:"#app",
        data:{
            // foodList:['姜','蒜','葱'],
            foodList:[
                {
                    name:'姜',
                    price:5,
                    discount:.8,
                },
                {
                    name:'蒜',
                    price:9,
                    discount:.5,
                },
                {
                    name:'葱',
                    price:2,
                }
            ],
        }
    });
    02.main.js

    v-bind:绑定数据和元素属性  简写为':'冒号

    默认跳转到百度,也可以动态修改跳转到淘宝页面。

    绑定class名,方式1:

    绑定class名,方式2:

     

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
        <script src="bli/vue.js"></script>
        <style>
            .active{
                background:#a10;
                color:#fff;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <!-- <a href="http://baidu.com">点我</a> -->
        <!-- <a v-bind:class="klass"  v-bind:href="url">点我</a> -->
        <a v-bind:class="{active: isActive}"  v-bind:href="url">点我</a>
    </div>
    </body>
    <script src="js/03.main.js"></script>
    </html>
    03.v-bind.html
    var app = new Vue({
        el:"#app",
        data:{
            url:"http://baidu.com",
            klass:'btn btn-default',
            isActive:true,
        }
    });
    03.main.js

    v-on:绑定事件, 简写为'@'

    给一个元素绑定1个事件:

    给一个元素绑定多个事件:

    注意:绑定的方法一定要有,否则会报错。

    表单提交事件 

    点击提交事件后(post/get请求),会自动刷新页面,控制台打印的东西就看不见了(闪了一下)。

    阻止默认行为

    方法1:e.preventDefault();   (必须传参)

    提交事件后,不会自动刷新页面了。(e.preventDefault(); 阻止了默认行为)

    方法2:.prevent   (不用传参)

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
        <hr>
        <!-- 阻止默认行为方法1:传参 -->
        <!-- <form v-on:submit="onSubmit($event)">
            <input type="text">
            <button type="submit">提交</button>
        </form> -->
        <!-- 阻止默认行为方法2:不传参 -->
        <form v-on:submit.prevent="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form>
    </div>
    </body>
    <script src="js/04.main.js"></script>
    </html>
    v-on阻止默认行为.html

     

    var app = new Vue({
        el:"#app",
        methods:{
            onClick: function(){
                console.log('clicked');
            },
            onEnter: function(){
                console.log('mouse enter');
            },
            onOut: function(){
                console.log('mouse leave');
            },
            // 阻止默认行为方法2:不传参
            onSubmit: function(){
                console.log('submitted');
            },
            // 阻止默认行为方法1:传参
            // onSubmit: function(e){
            //     e.preventDefault();  // 阻止默认事件
            //     console.log('submitted');
            // },
        }
    });
    04.main.js

    停止冒泡事件 .stop

    键盘抬起事件 keyup

    如果用户输入的是回车,应该怎么判断呢???

    键盘按钮是回车键时  .enter

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
        <hr>
        <!-- 阻止默认行为方法1:传参 -->
        <!-- <form v-on:submit="onSubmit($event)">
            <input type="text">
            <button type="submit">提交</button>
        </form> -->
        <!-- 阻止默认行为方法2:不传参 -->
        <!-- <form v-on:submit.prevent="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form> -->
    
        <!-- 停止冒泡 -->
        <!-- <form v-on:submit.stop="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form> -->
        
        <!-- 键盘抬起事件 -->
        <!-- <form v-on:keyup="onKeyup" v-on:submit.stop="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form> -->
    
        <!-- 当键盘按的是回车键 -->
        <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form>
    
    </div>
    </body>
    <script src="js/04.main.js"></script>
    </html>
    04.v-on.html
    var app = new Vue({
        el:"#app",
        methods:{
            onClick: function(){
                console.log('clicked');
            },
            onEnter: function(){
                console.log('mouse enter');
            },
            onOut: function(){
                console.log('mouse leave');
            },
            // 阻止默认行为方法2:不传参
            onSubmit: function(){
                console.log('submitted');
            },
            // 阻止默认行为方法1:传参
            // onSubmit: function(e){
            //     e.preventDefault();  // 阻止默认事件
            //     console.log('submitted');
            // },
    
            // 键盘抬起事件
            // onKeyup:function(){
            //     console.log('Key up');
            // },
            
            // 按下的是回车键
            onEnter:function(){
                console.log('entered');
            },
        }
    });
    04.main.js

    v-model 双向数据绑定

    3个修饰符

    .lazy 当失去焦点时,才会触发更新内容。

    .trim 将前后空格都去掉。

    普通的v-model,多个空格无效,最多只有1个空格。

    如果想让它显示所有的空格怎么办呢???

    用户输入的内容,前面有空格应该去掉。

    聚焦时:前面的空格不显示。

    失去焦点时:自动去掉前面的空格。

    .number 输入的内容是数字类型。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!-- <input type="text" v-model="name">
        <br>
        <pre>{{name}}</pre> -->
    
        <!-- 失去焦点,更新内容。 .lazy-->
        <!-- <input type="text" v-model.lazy="name">
        <br>
        {{name}} -->
    
        <!-- .trim 将前后空格都去掉 -->
        <!-- <input type="text" v-model.trim="name">
        <br>
        <pre>{{name}}</pre> -->
    
        <!-- .number 输入的内容是数字类型。  -->
        <input type="text" v-model.number="price">
        <br>
        <pre>{{price}}</pre>
    
    </div>
    </body>
    <script src="js/05.main.js"></script>
    </html>
    05.v-model指令及修饰符.html
    var app = new Vue({
        el:'#app',
        data:{
            name:"宝宝",
            price:10,
        }
    });
    05.main.js

    v-model在其他元素及类型上的用法

    单选框:

    注意:name必须一样,才会单选。

    单选框设置默认值:

    注意:name属性可以不写。用v-model来代替。

    多选框:

     

    多选框设置默认值:

    多行输入框:设置默认值

    和input(text类型)是一样的效果。

    下拉框:

    默认显示第一个选项

    下拉框:设置默认值为空

    下拉框:设置默认值为指定value值(单选)

    下拉框:设置默认值为指定value值(多选multiple)

    注意:按住Ctrl键可以选中多个值。Shift可以连选选中多个值。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!-- 单选框 -->
        <!-- <label>
            男
            <input name="sex" value="male" type="radio">
        </label>
        <label>
            女
            <input name="sex" value="female" type="radio">
        </label> -->
        
        <!-- 单选框设置默认值 -->
        <!-- <label>
            男
            <input v-model="sex" value="male" type="radio">
        </label>
        <label>
            女
            <input v-model="sex" value="female" type="radio">
        </label>
        <br>
        {{sex}} -->
        
        <!-- 多选框 -->
        <!-- <label>
            男
            <input v-model="sex" value="male" type="checkbox">
        </label>
        <label>
            女
            <input v-model="sex" value="female" type="checkbox">
        </label>
        <br>
        {{sex}} -->
        
        <!-- 多行输入框 -->
        <!-- <textarea v-model="texcon"></textarea>
        <br>
        {{texcon}} -->
    
        <!-- 下拉框 单选 -->
        <div>你来自哪里?</div>
        <select v-model="from">
            <option value="1">星球</option>
            <option value="2">火球</option>
        </select>
        <br>
        {{from}}
    
        <hr>
    
        <!-- 下拉框 多选-->
        <div>你要去哪里?</div>
        <select v-model="dest" multiple>
            <option value="1">星球</option>
            <option value="2">火球</option>
        </select>
        <br>
        {{dest}}
    
    
    </div>
    </body>
    <script src="js/06.main.js"></script>
    </html>
    06.v-model在其他元素及类型上的用法.html
    var app = new Vue({
        el:'#app',
        data:{
            // sex:'female', // 单选框默认值
            sex:['male','female'], // 多选框默认值
            texcon:'多行输入框默认值', // 多行输入框默认值
            // from:null, //下拉框设置默认值  null:空
            from:2, //下拉框设置默认值(单选)  value为2的选项
            dest:[], //下拉框设置默认值(多选)
        }
    });
    06.main.js

    v-if 控制流指令

    v-if / v-else

    v-if / v-else-if / v-else

     

    判断条件也可以的多个条件组成

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if控制流指令</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <div v-if="role == 'admin' || role == 'vip'">
            管理员你好
        </div>
        <div v-else-if="role == 'hr'">
            hr你好
        </div>
        <div v-else>
            你没有权限访问次页面
        </div>
    </div>
    </body>
    <script src="js/07.main.js"></script>
    </html>
    控制流指令.html
    var app = new Vue({
        el:'#app',
        data:{
            // role:'admin', //管理员
            // role:'hr', 
            role:'vip',
        }
    });
    07.main.js

    计算属性

    1.将分数渲染出来

    2.将分数放input中,可以改变值。

    3.计算出总分

    4.计算出平均分

    5.将平均分四舍五入一下

    以上的计算过程可以存到计算属性中,运行效果一样。

    当删除一个值的时,会拼接字符串,而不是计算值,该怎么办呢???

     

    方式1:将input宽加上数字类型即可计算。(推荐使用)

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <table border="1">
            <thead>
                <th>学科</th>
                <th>分数</th>
            </thead>
            <tbody>
                <tr>
                    <td>数学</td>
                    <td><input type="text" v-model.number="math"></td>
                </tr>
                <tr>
                    <td>物理</td>
                    <td><input type="text" v-model.number="physics"></td>
                </tr>
                <tr>
                    <td>英语</td>
                    <td><input type="text" v-model.number="english"></td>
                </tr>
                <tr>
                    <td>总分</td>
                    <!-- <td>{{math + physics + english}}</td> -->
                    <td>{{sum}}</td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <!-- <td>{{Math.round((math + physics + english) / 3)}}</td> -->
                    <td>{{average}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    <script src="js/08.main.js"></script>
    </html>
    计算属性.html
    var app = new Vue({
        el:'#app',
        data:{
            math:90,
            physics:80,
            english:30,
        },
        computed:{
            sum:function(){
                return this.math + this.physics + this.english;
            },
            average:function(){
                return Math.round(this.sum / 3)
            }
        }
    });
    08.main.js

    方式2:parseFloat 强制转换为数字类型。

    组件-全局及局部组件(作用域)

    将一段常用的代码封装为一个组件。再调用这个组件。用的时候只需要写一对标签即可。可维护、可重复性高。 

    两个作用域(#seg1、#seg2)虽然都写了按钮,但是只绑定一个作用域(#seg1)。所以只显示1个按钮。

    全局组件 component

    两个作用域都要绑定,按钮才会存活。

    局部组件 components

    当把全局钩子注释掉以后,会报错。因为#seg2里的组件找不到。局部组件是不能共用的!!!

    将#seg2里的组件去掉,就不会报错了。

    也可以把局部组件的相同代码都封装到一个变量中。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全局及局部组件</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="seg1">
        <alert></alert>
    </div>
    <div id="seg2">
        <!-- <alert></alert> -->
    </div>
    </body>
    <script src="js/09.main.js"></script>
    </html>
    全局及局部组件.html
    // var app = new Vue({
    //     el:"#app",
    // });
    
    
    // # 全局组件
    /*Vue.component('alert',{
        template:'<button @click="on_click">弹弹弹</button>',
        methods:{
            on_click: function(){
                alert('Yo.');
            }
        }
    });*/
    
    var alert_component = {
        template:'<button @click="on_click">弹弹弹</button>',
        methods:{
            on_click: function(){
                alert('我是局部组件');
            }
        }
    };
    
    new Vue({
        el:"#seg1",
        // 局部组件
        components:{
            alert:alert_component
            // alert:{
                // template:'<button @click="on_click">弹弹弹</button>',
                // methods:{
                //     on_click: function(){
                //         alert('我是局部组件');
                //     }
                // }
            // }
        }
    });
    
    new Vue({
        el:"#seg2"
    });
    09.main.js

    组件-配置组件

    template: 组件内容

    点赞数应该是动态的。专门放到一个变量中。

    data是一个函数

    methods:定义事件

    哈哈!点赞不求人!

    在点赞之前应该判断该用户是否点赞过了。

    多次点击只能加一次!!!

    如果用户点赞过了,那么再次点击就是取消点赞。

    选中的时候绑定一个样式。

    优化:

    方案1:如果template代码太长了,也可以用ES6 的反引号。

    方案2:也可以将代码放到html页面中。(因为template的代码就是标签。

    只要传选择器就好了。

    功能上没有任何区别。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>配置组件</title>
        <script src="bli/vue.js"></script>
        <style>
            .active{background:deeppink;}
        </style>
    </head>
    <body>
    <div id="app">
        <like></like>
    </div>
    
    <template id="like-component-tpl">
        <button :class="{active:liked}" @click="toggle_like">
        赞{{like_count}}
        </button>
    </template>
    
    </body>
    <script src="js/10.main.js"></script>
    </html>
    配置组件
    // 全局组件
    Vue.component('like',{
        // template:'<button :class="{active:liked}" @click="toggle_like">赞{{like_count}}</button>',
        
        // template:`
        //     <button :class="{active:liked}" @click="toggle_like">
        //         赞{{like_count}}
        //     </button>`,
    
        template:'#like-component-tpl',
        data:function(){
            return {
                like_count:10,
                liked:false,
            }
        },
        methods:{
            toggle_like:function(){
                if(!this.liked)  // 当前没有点赞就加加。
                    this.like_count++;
                else  // 取消点赞
                    this.like_count--;
                
                this.liked = !this.liked;
            }
        }
    });
    
    new Vue({
        el:"#app",
    });
    10.main.js

    组件-组件通信之父子通信(从外部往组件内部传值)

    之前在全局组件的时候,讲过一个例子,一个按钮弹出框。

    那么问题来了,弹出的内容都是一样的,如何动态的弹出不同的值呢???

    props 列表中变量才是有用的。

    我们在标签中定义3个变量msg、a、b。但是我们只要msg的值。

    props 列表中的变量才是有用的。(msg的值可以拿到,a、b的值都拿不到。)

    props 列表中的没有的变量,是取不到值的,为undefined。

    a标签的href链接是动态生成的。

    如果有很多这样的a标签,就需要当该代表封装到组件中。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件-父子通信</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!-- <alert msg="娃哈哈" a='1' b='2'></alert> -->
        <!-- <a href="/user/wahaha">wahaha</a> -->
        <user username="wahaha"></user>
    </div>
    </body>
    <script src="js/11.main.js"></script>
    </html>
    组件-父子通信
    // 全局组件
    // Vue.component('alert',{
    //     template:'<button @click="on_click">弹弹弹</button>',
    //     props:['msg'],
    //     methods:{
    //         on_click:function(){
    //             alert(this.a);
    //         }
    //     }
    // });
    
    // 全局组件
    Vue.component('user',{
        template:`<a :href="'/user/'+ username">{{username}}</a>`,
        props:['username'],
        methods:{}
    });
    
    new Vue({
        el:"#app",
    });
    11.main.js

    组件-组件通信之子父通信(通过事件的方式)

    显示余额的父子组件

    $emit是一个快捷方式,用于触发一个事件。在子元素show标签上去监听。

    按钮是子组件,外头是父组件。子组件触发一个事件;父组件接收事件,同时修改父组件的值,然后div判断是否显示余额。

    点击按钮显示余额。

    也可以打印传过来的值。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件-子父通信</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <balance></balance>
    </div>
    </body>
    <script src="js/12.main.js"></script>
    </html>
    组件-子父通信
    // 父组件
    Vue.component('balance',{
        template:`
            <div>
                <show @show-balance="show_div"></show>
                <div v-if="xsye">你的余额:¥98元</div>
            </div>
        `,
        data:function(){
            return {
                xsye:false, // 默认不显示余额
            }
        },
        methods:{
            show_div:function(data){
                this.xsye = true;  // 显示余额
                console.log(data);
            }
        },
    });
    
    // 子组件
    Vue.component('show',{
        template:'<button @click="on_click">显示余额</button>',
        methods:{
            on_click(){
                this.$emit('show-balance',{a:1,b:2});
            }
        }
    });
    
    new Vue({el:"#app",});
    12.main.js

    组件-组件通信之任意及平行组件间通信(调度器

    宝宝专门说,贝贝专门听。

    注意:模板里面必须有个最外层的根元素。

    默认显示:

    输入值时:

    如何将第一个组件输入的内容,显示在第二个组件中???i_said ---> baobao_said

    调度器:任意组件间的通信。

     

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件-任意及平行组件间通信</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <baobao></baobao>
        <beibei></beibei>
    </div>
    </body>
    <script src="js/13.main.js"></script>
    </html>
    13.组件-任意及平行组件间通信.html
    // Event 调度器
    var Event = new Vue();
    
    Vue.component('baobao',{
        template:`
            <div>
                我说: <input @keyup="on_change" v-model='i_said'/> {{i_said}}
            </div>`,
        data:function(){
            return {
                i_said:'',
            }
        },
        methods:{
            on_change:function(){
                Event.$emit('baobao-said-something', this.i_said);
            }
        },
    });
    
    Vue.component('beibei',{
        template:`<div>宝宝说:{{baobao_said}}</div>`,
        data:function(){
            return {
                baobao_said:'',
            };
        },
        //  mounted:挂载完毕。
        mounted:function(){
            // 在触发器调用之前,将this缓存成一个变量。
            var me = this;
            Event.$on('baobao-said-something', function(data){
                console.log(data);
                me.baobao_said = data;
            });
        }
    });
    
    new Vue({
        el:'#app',
    });
    13.main.js

    过滤器(格式化)

    1.价格后面加上符号‘元’。

    2.价格后面的单位也要动态的传值。(如:元、¥、$)

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="price">
        <!-- {{ price | currency }} -->
        {{ price | currency('美元') }}
    </div>
    </body>
    <script src="js/14.main.js"></script>
    </html>
    14.过滤器.html
    // 过滤器
    Vue.filter('currency',function(data,unit){
        data = data || 0;  // data有值就等于data,没值就为0.
        unit = unit || '元';  // unit有值就等于unit,没值就为'元'.
        return data + unit;
        // return data + '元';
    });
    
    new Vue({
        el:'#app',
        data:{
            price:10,
        },
    });
    14.main.js

    3.毫米与米的转换。

    4.毫米与米的转换,保留两位小数。

    自定义指令-基础配置

    1.自定义指令

    2.给只为true的元素定位(固定定位)

    3.加一个按钮,切换是否定位。

    默认都是没有定住的。点击之后定住,再点击之后就是取消定住。

    默认、取消定住

    定住

    4.可以给很多按钮就加上。

    默认、取消定位

    定位

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>15.自定义指令-基础配置</title>
        <script src="bli/vue.js"></script>
        <style>
            .card{
                width:200px;
                background:#ccc;
                padding:10px;
                margin:5px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div v-pin="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">定住/取消</button>
            我就是我,不一样的烟火。
        </div>
        <div v-pin="card2.pinned" class="card">
            <a @click="card2.pinned = !card2.pinned" href="#">pin it</a>
            好好学习,天天向上。
        </div>
        <h1>头部</h1>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <h1>中部</h1>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <h1>底部</h1>
    </div>
    </body>
    <script src="js/15.main.js"></script>
    </html>
    15.自定义指令-基础配置.html
    // 自定义指令
    Vue.directive('pin',function(el,binding){
        // var $el = $(el); // 绑定的元素
        var data = binding.value
        // console.log(data); // true/false
        if(data){ // 定住
            el.style.position = 'fixed';
            el.style.top = '10px';
            el.style.left = '10px';
        }else{  // 取消定住
            el.style.position = 'static';
        }
    });
    
    new Vue({
        el:'#app',
        data:{
            card1:{
                pinned:false,
            },
            card2:{
                pinned:false,
            }
        },
    });
    15.main.js

    自定义指令-配置传参及修饰符

    以上例子只能定位到左上角,不够灵活。位置应该动态传参。

    1.定位到右下角:

    打印 var position = binding.modifiers;

    console.log('position',position)  // position {bottom: true, right: true}

    运行结果:已定位到右下角

    2.定位到左下角,只要改一个值即可。

    3.让一些卡片样式有所不同,突出。

    获取该值(:true),设置样式。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>16.自定义指令-配置传参及修饰符</title>
        <script src="bli/vue.js"></script>
        <style>
            .card{
                width:200px;
                background:#ccc;
                padding:10px;
                margin:5px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div v-pin:true.bottom.left="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">定住/取消</button>
            我就是我,不一样的烟火。
        </div>
        <div v-pin="card2.pinned" class="card">
            <a @click="card2.pinned = !card2.pinned" href="#">pin it</a>
            好好学习,天天向上。
        </div>
        <h1>头部</h1>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <h1>中部</h1>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <h1>底部</h1>
    </div>
    </body>
    <script src="js/16.main.js"></script>
    </html>
    16.自定义指令-配置传参及修饰符.html
    // 自定义指令
    Vue.directive('pin',function(el,binding){
        // var $el = $(el); // 绑定的元素
        var data = binding.value
        // console.log(data); // true/false
    
        var position = binding.modifiers;
        // console.log('position',position) // position {bottom: true, right: true}
    
        var warning = binding.arg;
        // console.log('warning',warning)  // warning true    warning undefined
    
        if(data){ // 定住
            el.style.position = 'fixed';
    
            for (var i in position){
                if (position[i]){
                    el.style[i] = '10px';
                }
            };
    
            if (warning === 'true'){
                el.style.background = 'yellow';
            }
            
            // el.style.top = '10px';
            // el.style.left = '10px';    
        }else{  // 取消定住
            el.style.position = 'static';
        }
    });
    
    new Vue({
        el:'#app',
        data:{
            card1:{
                pinned:false,
            },
            card2:{
                pinned:false,
            }
        },
    });
    16.main.js

    混合 mixins

    1.点击切换显示隐藏。

    默认不显示div.

    点击后显示div,再次点击有隐藏div.

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>17.混合 mixins</title>
        <script src="bli/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <popup></popup>
    </div>
    </body>
    <script src="js/17.main.js"></script>
    </html>
    index.html
    // 弹出层组件
    Vue.component('popup',{
        template:`
            <div>
                <button @click="toggle">Popup显示</button>
                <div v-if="visible">
                    <h4>title</h4>
                    好好学习,天天向上!
                </div>
            </div>
        `,
        data:function(){
            return {
                visible:false, // div默认不可见。
            }
        },
        methods:{
            toggle:function(){
                this.visible = !this.visible;
            }
        },
    });
    
    
    new Vue({
        el:"#app",
        data:{},
    });
    17.main.js

    2.鼠标移入、移出切换显示隐藏。

    默认、移出

    移入:

    代码:

    // 提示框组件  (鼠标移入移出显示、隐藏)
    Vue.component('tooltip',{
        template:`
            <div>
                <span @mouseenter="show" @mouseleave="hide">bys</span>
                <div v-if="visible">月亮代表我的心。</div>
            </div>
        `,
        data:function(){
            return {
                visible:false,
            }
        },
        methods:{
            show:function(){
                this.visible = true;
            },
            hide:function(){
                this.visible = false;
            },
        },
    });
    
    
    // 弹出层组件 (点击切换显示、隐藏)
    Vue.component('popup',{
        template:`
            <div>
                <button @click="toggle">Popup显示</button>
                <div v-if="visible">    
                    <span @click="hide">X</span>
                    <h4>title</h4>
                    好好学习,天天向上!
                </div>
            </div>
        `,
        data:function(){
            return {
                visible:false, // div默认不可见。
            }
        },
        methods:{
            toggle:function(){
                this.visible = !this.visible;
            },
            hide:function(){
                this.visible = false;
            },
        },
    });
    
    
    new Vue({
        el:"#app",
        data:{},
    });
    17.main.js

    3.点击显示的div应该有个可以关闭的按钮。

    注意:这两个组件有好多重复的代码!

    点击后隐藏div

    混合 mixins(相同的代表放在一起)

    功能是一样的。注意:自己写的会覆盖mixins的。

    代码:

    // 混合 mixins (将相同的代码放一起)
    var base = {
        data:function(){
            return {
                visible:false,
            }
        },
        methods:{
            show:function(){
                this.visible = true;
            },
            hide:function(){
                this.visible = false;
            },
            toggle:function(){
                this.visible = !this.visible;
            },
        },
    }
    
    
    // 提示框组件  (鼠标移入移出显示、隐藏)
    Vue.component('tooltip',{
        template:`
            <div>
                <span @mouseenter="show" @mouseleave="hide">bys</span>
                <div v-if="visible">月亮代表我的心。</div>
            </div>
        `,
        mixins:[base],
    });
    
    
    // 弹出层组件 (点击切换显示、隐藏)
    Vue.component('popup',{
        template:`
            <div>
                <button @click="toggle">Popup显示</button>
                <div v-if="visible">    
                    <span @click="hide">X</span>
                    <h4>title</h4>
                    好好学习,天天向上!
                </div>
            </div>
        `,
        mixins:[base],
        data:function(){
            return {
                visible:true, // 自己写的会覆盖mixins的。
            }
        },
    });
    
    new Vue({
        el:"#app",
        data:{},
    });
    17.main.js

    插槽 slots

    1.定义一个样式

    2.内容都是相同的。动态传参(插槽)

    3.如果头部、底部都要动态传参呢???定义name!!!

    4.指定默认值。

     代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插槽 slots</title>
        <script src="bli/vue.js"></script>
        <style>
            .panel{
                max-width:300px;
                border:1px solid #999;
                margin-bottom:15px;
            }
            .panel > *{
                padding:15px;
            }
            .panel .title{
                border-bottom:1px solid #999;
            }
            .panel .footer{
                border-top:1px solid #999;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <panel>
            <div slot="title">aaa</div>
            <div slot="content">bbb</div>
            <!-- <div slot="footer">ccc</div> -->
        </panel>
    </div>
    <template id="panel-tpl">
        <div class="panel">
            <div class="title">
                <slot name="title"></slot>
            </div>
            <div class="content">
                <slot name="content"></slot>
            </div>
            <div class="footer">
                <slot name="footer">更多信息</slot>
            </div>
        </div>
    </template>
    </body>
    
    <script src="js/18.main.js"></script>
    </html>
    18.插槽 slots.html
    Vue.component('panel',{
        template:"#panel-tpl",
    });
    
    
    new Vue({
        el:'#app',
        data:{}
    });
    18.main.js
     
     
  • 相关阅读:
    Beetl模板 [记录]
    wx 小程序开发 [记录]
    高德定位获取省市区[记录]
    vue 学习记录 [记录]
    正则表达+验证 [记录]
    倒计时60s短信 [记录]
    @media [记录]
    JSON + Ajax [记录]
    Webstorm [记录]
    JQ 组合代码 [记录]
  • 原文地址:https://www.cnblogs.com/chongdongxiaoyu/p/9254128.html
Copyright © 2011-2022 走看看