表严肃讲Vue

作者: 雨y飘零久 | 来源:发表于2019-05-24 02:53 被阅读0次

vue的安装及语法

v-model
v-show
main.js

var app = new Vue({
   el: '#app',
    data:{
       name: '奔奔',
        age:22,
        gender:null,
    }
});

index.html

<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="gender">
        <span v-show="gender">性别：{{gender}}</span>
    </div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

v-for指令

main.js

var app = new Vue({
   el: '#app',
    data:{
       // foodList:['葱', '姜', '蒜']
        foodList:[
            {
                name: '葱',
                price: 10,
                discount: .9,
            },{
                name: '姜',
                price: 5,
                discount: .6,
            },{
                name: '蒜',
                price: 20,
            },

        ]
    }
});

index.html

<body>
<div id="app">
    <li v-for="food in foodList ">{{food.name}}:${{food.discount? food.price * food.discount : food.price}}</li>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

chrome.console

app.foodList.push({name: '辣椒', price:30, discount: .5})

v-bind

main.js

var app = new Vue({
   el: '#app',
    data:{
        url: 'http://www.baidu.com',
        isActive: true,
    }
});

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>18.1</title>
    <style>
        .active{
            background: #aa1100;
        }
    </style>
</head>
<body>
<div id="app">
    <a :class="{active: isActive}" :href="url">
        点我
    </a>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

chrome.console

app.isActive = false

v-on

main.js

var app = new Vue({
    el: '#app',
    data:{
    },
    methods:{
        onClick : function () {
            console.log('cliked');
        },
        onMouse : function () {
            console.log('on enter')
        },
        onOut : function () {
            console.log('on out')
        },
        onSubmit : function () {
            console.log('submit')
        },
        onKeyup : function () {
            console.log('keyup')
        },
        onEnter : function () {
            console.log('enter')
        }


    }
});

index.html

<body>
<div id="app">
    <button v-on="{mouseenter: onMouse, mouseout: onOut}" @click="onClick">点我</button>
    <form action="" @keyup.enter="onEnter" @submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

v-model

v-model.lazy
光标消失才会显示所输
v-model.trim
去除左右两边空格
v-model.number
转化为数字
main.js

var app = new Vue({
    el: '#app',
    data:{
        name1: 'null111',
        name2: 'null222',
        name3: 'null333',
    },
});

index.html

<body>
<div id="app">
    <input type="text" v-model.lazy="name1"><br>{{name1}}
    <br>
    <input type="text" v-model.trim="name2">
    <pre>{{name2}}</pre>
    <input type="text" v-model.number="name3">
    <pre>{{name3}}</pre>

</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

v-model其他元素及类型

main.js

var app = new Vue({
    el: '#app',
    data:{
        gender: 'male',
        gender1:['male'],
        text: 'a b c d e f g h i j k l m n o p q r s t u v w x y z',
        city: 2,
    },
});

index.html

<body>
<div id="app">
    <label for=""><input v-model:name="gender" type="radio" value="male">男</label>
    <label for=""><input v-model:name="gender" type="radio" value="female">女</label>
    {{gender}}
    <br>
    <label for=""><input v-model:name="gender1" type="checkbox" value="male">男</label>
    <label for=""><input v-model:name="gender1" type="checkbox" value="female">女</label>
    {{gender1}}
    <br>
    <textarea v-model.lazy="text" id="" cols="30" rows="10"></textarea>{{text}}
    <br>
    <select v-model="city" id="">
        <option value="1">长沙</option>
        <option value="2">成都</option>
        <option value="3">北京</option>
        <option value="4">上海</option>
        <option value="5">西安</option>
    </select>
    {{city}}
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

v-if控制流指令

main.js

var app = new Vue({
    el: '#app',
    data:{
        role: 'super_admin'
    },
});

index.html

<body>
<div id="app">
    <div v-if="role == 'admin' || role ==  'super_admin'">
        admin
    </div>
    <div v-else-if="role == 'hr'">
        hr
    </div>
    <div v-else=>
        user
    </div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

计算属性

parseFloat
v-model.number
computed
Math.round()
main.js

var app = new Vue({
    el: '#app',
    data:{
        math: 90,
        physics: 70,
        english: 40,
    },
    computed: {
        sum: function () {
            return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.english);
        },
        average: function () {
            return Math.round(this.sum/3);
        }
    }
});

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>18.1</title>
</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>{{sum}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

全局及局部组件

mian.js

// Vue.component('alert', {
//     template:'<button @click="OnClick">弹弹弹</button>',
//     methods: {
//         OnClick: function(){
//             alert("Yo.");
//         }
//     }
// })

var alert_component = {
    template:'<button @click="OnClick">弹弹弹</button>',
    methods: {
        OnClick: function(){
            alert("Yo.");
        }
    }
}

new Vue({
    el: '#seg1',
    components: {
        'alert': alert_component,
    }
})

new Vue({
    el: '#seg2',

})

index.html

<!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="seg1">
        <alert></alert>
    </div>
    <div id="seg2">
        <alert></alert>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>

    
</body>
</html>

配置组件

main.js

Vue.component('like', {
    template: '#like-component-tpl',
    data: function(){
        return{
            likeCount: 10,
            liked: false,
        }
    },
    methods: {
        toggleLike: function(){
            if(!this.liked)
                this.likeCount++;
            else
                this.likeCount--;
            this.liked = !this.liked;
        }
    }
})

new Vue({
    el: '#app',
    
})

index.html

<!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>
        .liked{
            color: gold;
        }
    </style>
</head>

<body>
    <div id="app">
      <like></like>
    </div>
    <template id="like-component-tpl">
        <button :class="{liked: liked}" @click="toggleLike">
                赞 {{likeCount}}
        </button>
    </template>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>

    
</body>
</html>

组件通信之父子通信

props
main.js

Vue.component('user', {
   template: '<a :href="\'/user/\' + username">{{username}}</a>',
   props: ['username'],
    methods: {}
})

new Vue({
    el: '#app',
    
})

index.html

<body>
    <div id="app">
      <user username='zxc'>
      </user>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

组件通信之子父通信

main.js

Vue.component('balance',{
    template:
    `
    <div>
        <show @show_balance="show_balance"></show>
        <div v-if="show">您的余额为98元</div>
    </div>
    `,
    data: function(){
        return{
            show: false,
        }
    },
    methods: {
        show_balance: function(data){
            this.show =true;
            console.log('data:', data);
        }
    }
});

Vue.component('show', {
    template: '<button @click="onClick">显示余额</button>',
    methods: {
        onClick: function(){
            this.$emit('show_balance', {a:1, b:2});
        }
    }
});

new Vue({
    el: '#app',
    
})

index.html

<body>
    <div id="app">
      <balance></balance>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

组件通信之任意组件通信

main.js

var Event = new Vue();

Vue.component('huahua',{
    template:`
    <div>
        我说：<input @keyup="on_change" v-model="i_said"/>
    </div>`,
    data: function(){
        return {
            i_said: '',
        }
    },
    methods: {
        on_change: function(){
            Event.$emit('huahua-said-something', this.i_said);
        }
    }
});

Vue.component('quandan', {
    template: `<div>花花说了：{{huahua_said}}</div>`,
    data: function(){
        return {
            huahua_said: '',
        };
    },
    mounted: function(){
        var me = this;
        Event.$on('huahua-said-something', function(data){
            me.huahua_said = data;
        });
    }

});

new Vue({
    el: '#app',
    
})

index.html

<body>
    <div id="app">
      <huahua></huahua>
      <quandan></quandan>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

过滤器

(val / 1000).toFixed(2)
保留小数点后2位

main.js

Vue.filter('currency', function(val, unit) {
    val = val || 0;
    unit = unit || '元';
    return val + unit;
});

Vue.filter('meter', function(val, unit){
    val = val || 0;
    unit = unit || 'm';
    return (val / 1000).toFixed(2) + unit;
});

new Vue({
    el: '#app',
    data: {
        price: 10,
        length: 11,
    }    
})

index.html

<body>
    <div id="app">
        <input v-model="length">mm
        <br>
        {{length | meter}}
        <hr>
        <input v-model="price">
        {{price | currency('USD')}}
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

自定义指令的基本用法

Vue.directive('xx',function(){});
el.style.position = 'fixed'

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 left, top, right 以及 bottom 属性进行规定。

el.style.position = "static"
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
binding.value
main.js

Vue.directive('pin', function(el, binding){
    var pinnded = binding.value;
    if(pinnded){
        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,
        },
    }    
})

index.html

<!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>
        .card{
            width: 200px;
            background: #cccccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-pin="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">pin it</button>
            有没有那么一刻，你感觉人生格局已定？

            你感觉再往上走，越来越难了？
            
            你曾经雄心壮志，但现在每个月还房贷，都拼尽全力。
            
            你苦苦思索，自己到底是怎样输掉了人生。
        </div>
        <div v-pin="card2.pinned" class="card">
            <a href="#" @click="card2.pinned = !card2.pinned">pinned it</a>
            李嘉诚的几篇演讲，刷爆网络，它也是这个问题的最佳答案。

            从15岁在一家钟表公司当小学徒，到44岁创办的长江实业上市，再到成为香港首富资产千亿，李嘉诚花了73年。
            
            我梳理了李嘉诚的演讲稿，然后发现，那些决胜千里的人，都有这5种特质。
            
            请问你有没有在其中？
        </div>
        <div>优秀的人，都极其懂得自我管理。自律的人有多可怕？他会昼度夜思、殚精竭虑、不知疲倦。14岁的时候，李嘉诚就知道要赚取足够一家的生活费。一方面他紧守角色，尽管是小工，也坚持把每件交托的事情做得妥当出色；另一方面他绝不浪费时间，把剩下来的一分一毫都拿来买旧书籍。20岁起，他就要求自己大量阅读大公司年报。60多年来，他每天工作12小时，晚饭后看20分钟英文电视，并跟着大声说；睡前一定要看书；早餐必须在5：59分起床。甚至，李嘉诚还把这种静态管理延伸至动态管理上。22岁成立公司后，李嘉诚就深刻明白，要想取得成功，知识要和意志结合。他建立了各种随机应变的制度，避免聪明的组织干愚蠢的事。这个时代，决定一个人优秀与否，早已不仅仅是勤奋程度，还有你对自我的管理。网上有篇文章说，为什么一流成功人士的闹钟，都定在早晨5:57？因为他们虽然每天只早起了一个小时，但日积月累，事实上，他每天都比别人多“活”了一个小时。如果你是这样的人，你的生命会被拉长，自然能活得更精彩。平庸是条死胡同如今的李嘉诚，已经90岁。可能有人觉得，他这把年纪，时间已经不再没有方向。但尽管已经高龄，他依然坚持做一件事：每天6点起床，坚持打1个半小时左右的高尔夫球。可能有人会说，都一把年纪了干嘛折腾自己。可不折腾的人生，有多平庸、乏味。在最近一次演讲上，90岁的李嘉诚还坦言很多时候感到沮丧无力。为了每一个明天，他仍然在不断思考，不断感受，不断行动。为了脱离平庸，读书的时候天一亮他就起来学英语，这种狂热使得他晚年还坚持每天晚上看英文电视，温习英语；为了变得优秀，打工时他每天工作16个小时，期间还去夜校深造，后来他从一个塑料厂推销员晋升为公司总经理；长江创建初期，因为无视质量控制，工厂处于破产边缘，他召集员工开会并向他们承认自己的商业错误，并承诺工厂度过非常时期后，欢迎被解雇的工人回来工作。当一个人立志改变世界的时候，他会使出浑身力气去打破所有艰难险阻。而努力，没有长度。李嘉诚说道：我一直深信，如果世界上有任何“成功秘方”，其中最关键的元素必定是你对成功的欲望远远大于对失败的恐惧。坚持学习，哪怕你90岁为什么李嘉诚能够将长江从一个小厂做成业务遍及全球52个国家、拥有27万员工的大集团，并且68年屹立不倒？因为他严于律己，一个人无论做什么行业，在一个行业内就要尽量做到最好，这才是最重要的。李嘉诚年轻的时候，常常喜欢翻阅上市公司的年度报告书，看上去很沉闷，但日积月累他明白了会计处理的方法的优点与利弊，方向的选择和公司资源的分布对他有着很大的启示。他常常追求最新的知识，最新的商业动态、知识动态，这也使得他能够站在更高更远的地方来看现在的格局，从而做出最睿智的判断与选择。在创业初期，李嘉诚就已开始投资一些华尔街上市公司的股票。每次买入一个公司之前，他都会仔细研读他们的财报，研究他们的商业规则。华尔街上市公司的财报因此成为他的英文老师、商业教练，也是他的私人投资获利来源。李嘉诚还没退休的时候，他每周都会亲自教导孙子。上课都是自己准备课程、案例，既涉及经济，又有道德讨论、文化批评。就连现在的李嘉诚，仍在学习。我所见到月薪低于5000的人，无一不是工作后不学习的人。他们最喜欢的活动，是在家里看芒果台的综艺节目，是葛优瘫。他们听过许多道理，却从来没有意识到：学习，也应当是终身的自选动作。今天，不管你是打工，还是处于管理阶层，都要让自己得到最好、最新的知识。这样你才有交谈的资本。曾经，李嘉诚见了一个银行主席，结果发现这个人没有真材实料，讲的东西都是假大空，后来他跟秘书说以后那个人再来都不会再见他了。如果一个没有真才实料的CEO，整天都在外面跑，连自己的事情都没有做好的话，这是最危险的。由此可见，只有学习，能为你的人生加冕。时常保持危机感保持危机感的人，常常比一般的人更能对抗一切不确定因素。对大多数年轻人来说，一方面要供还房贷、结婚生子，一方面还要赡养父母。很多人会随波逐流，生活慢慢磨平，甚至人到中年，有些还在国企做着流水线的工作。这些年，“中年危机”话题常常被人提起。因为没有核心竞争力，老员工面临被裁员的危机。2017年初，华为宣布辞退34岁以上的交付工程维护人员；2017年12月，中兴42岁员工跳楼自杀，当场死亡。任正非说了一句让人深思的话：“华为是没有钱的，大家不奋斗就跨了，不可能为不奋斗者支付什么。30多岁年轻力壮，不努力，光想躺在床上数钱，可能吗？”保持危机感，能让你清楚自己的位置，悄然应对即将发生的变化。事情。他总是时刻在内心创造公司的逆境，不停地给自己提问，然后想出解决问题的方式。“等到危机来的时候，他就已经做好了准备”。李嘉诚说道：我凡事必有充分的准备才去做。例如天文台说天气很好，但我常常问我自己，如5分钟后宣布有台风，我会怎样，在香港做生意，亦要保持这种心理准备。2008年，金融危机爆发。而在这之前，李嘉诚早就预见并做好了准备。等到危机来临时，集团不但安然无恙，还从中获得了扩张的机会。有的人25岁，却过着52岁的人生；有的人52岁，却活成了25岁。拥有危机感，你很可能脱颖而出。相反，你还未起跑，就可能被抛下。差不多的人生，其实差很多在汕头大学演讲中，李嘉诚曾对学生说，不要成为差不多先生。但我们，却常常在犯这样的毛病。你总是觉得差不多就好。微胖的体型，差不多；月薪六千，差不多；每天朝九晚五，差不多；25岁结婚，27岁生小孩，差不多。你总是习惯给自己设限，从不做那些有难度的事，你觉得岁月静好。然而，你不知道，自己慢慢成为了温水里的青蛙。等有一天，你突然发现熟悉的人越来越优秀，你再也追赶不上了.李嘉诚，为什么从一个小学徒，走到今天？最大的一个原因，就是他有野心，从不接受差不多的人生。蔡康永说，15岁觉得游泳难，放弃游泳，到18岁遇到一个你喜欢的人约你去游泳，你只好说“我不会耶”。18岁觉得英文难，放弃英文，28岁出现一个很棒但要会英文的工作，你只好说“我不会耶”。从不挑战潜能，结局其实已定：只能变得平庸，接受低成就。反之，你终能与众不同。
        </div>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

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

var position = binding.modifiers;
var warning = binding.arg;
main.js

Vue.directive('pin', function(el, binding){
    var pinnded = binding.value;
    var position = binding.modifiers;
    var warning = binding.arg;
    if(pinnded){
        el.style.position = 'fixed';
        for(var key in position){
            if(position[key])
                el.style[key] = '10px';
        }
        if(warning == 'true')
        el.style.background = 'yellow';
    }else{
        el.style.position = "static";
        el.style.background = '#cccccc';
    }
        
});
new Vue({
    el: '#app',
    data: {
        card1: {
            pinned:false,
        },
        card2: {
            pinned: false,
        },
    }    
})

index.html

<!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>
        .card{
            width: 200px;
            background: #cccccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-pin:true.bottom.right="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">pin it</button>
            有没有那么一刻，你感觉人生格局已定？

            你感觉再往上走，越来越难了？
            
            你曾经雄心壮志，但现在每个月还房贷，都拼尽全力。
            
            你苦苦思索，自己到底是怎样输掉了人生。
        </div>
        <div v-pin="card2.pinned" class="card">
            <a href="#" @click="card2.pinned = !card2.pinned">pinned it</a>
            李嘉诚的几篇演讲，刷爆网络，它也是这个问题的最佳答案。

            从15岁在一家钟表公司当小学徒，到44岁创办的长江实业上市，再到成为香港首富资产千亿，李嘉诚花了73年。
            
            我梳理了李嘉诚的演讲稿，然后发现，那些决胜千里的人，都有这5种特质。
            
            请问你有没有在其中？
        </div>
        <div>优秀的人，都极其懂得自我管理。自律的人有多可怕？他会昼度夜思、殚精竭虑、不知疲倦。14岁的时候，李嘉诚就知道要赚取足够一家的生活费。一方面他紧守角色，尽管是小工，也坚持把每件交托的事情做得妥当出色；另一方面他绝不浪费时间，把剩下来的一分一毫都拿来买旧书籍。20岁起，他就要求自己大量阅读大公司年报。60多年来，他每天工作12小时，晚饭后看20分钟英文电视，并跟着大声说；睡前一定要看书；早餐必须在5：59分起床。甚至，李嘉诚还把这种静态管理延伸至动态管理上。22岁成立公司后，李嘉诚就深刻明白，要想取得成功，知识要和意志结合。他建立了各种随机应变的制度，避免聪明的组织干愚蠢的事。这个时代，决定一个人优秀与否，早已不仅仅是勤奋程度，还有你对自我的管理。网上有篇文章说，为什么一流成功人士的闹钟，都定在早晨5:57？因为他们虽然每天只早起了一个小时，但日积月累，事实上，他每天都比别人多“活”了一个小时。如果你是这样的人，你的生命会被拉长，自然能活得更精彩。平庸是条死胡同如今的李嘉诚，已经90岁。可能有人觉得，他这把年纪，时间已经不再没有方向。但尽管已经高龄，他依然坚持做一件事：每天6点起床，坚持打1个半小时左右的高尔夫球。可能有人会说，都一把年纪了干嘛折腾自己。可不折腾的人生，有多平庸、乏味。在最近一次演讲上，90岁的李嘉诚还坦言很多时候感到沮丧无力。为了每一个明天，他仍然在不断思考，不断感受，不断行动。为了脱离平庸，读书的时候天一亮他就起来学英语，这种狂热使得他晚年还坚持每天晚上看英文电视，温习英语；为了变得优秀，打工时他每天工作16个小时，期间还去夜校深造，后来他从一个塑料厂推销员晋升为公司总经理；长江创建初期，因为无视质量控制，工厂处于破产边缘，他召集员工开会并向他们承认自己的商业错误，并承诺工厂度过非常时期后，欢迎被解雇的工人回来工作。当一个人立志改变世界的时候，他会使出浑身力气去打破所有艰难险阻。而努力，没有长度。李嘉诚说道：我一直深信，如果世界上有任何“成功秘方”，其中最关键的元素必定是你对成功的欲望远远大于对失败的恐惧。坚持学习，哪怕你90岁为什么李嘉诚能够将长江从一个小厂做成业务遍及全球52个国家、拥有27万员工的大集团，并且68年屹立不倒？因为他严于律己，一个人无论做什么行业，在一个行业内就要尽量做到最好，这才是最重要的。李嘉诚年轻的时候，常常喜欢翻阅上市公司的年度报告书，看上去很沉闷，但日积月累他明白了会计处理的方法的优点与利弊，方向的选择和公司资源的分布对他有着很大的启示。他常常追求最新的知识，最新的商业动态、知识动态，这也使得他能够站在更高更远的地方来看现在的格局，从而做出最睿智的判断与选择。在创业初期，李嘉诚就已开始投资一些华尔街上市公司的股票。每次买入一个公司之前，他都会仔细研读他们的财报，研究他们的商业规则。华尔街上市公司的财报因此成为他的英文老师、商业教练，也是他的私人投资获利来源。李嘉诚还没退休的时候，他每周都会亲自教导孙子。上课都是自己准备课程、案例，既涉及经济，又有道德讨论、文化批评。就连现在的李嘉诚，仍在学习。我所见到月薪低于5000的人，无一不是工作后不学习的人。他们最喜欢的活动，是在家里看芒果台的综艺节目，是葛优瘫。他们听过许多道理，却从来没有意识到：学习，也应当是终身的自选动作。今天，不管你是打工，还是处于管理阶层，都要让自己得到最好、最新的知识。这样你才有交谈的资本。曾经，李嘉诚见了一个银行主席，结果发现这个人没有真材实料，讲的东西都是假大空，后来他跟秘书说以后那个人再来都不会再见他了。如果一个没有真才实料的CEO，整天都在外面跑，连自己的事情都没有做好的话，这是最危险的。由此可见，只有学习，能为你的人生加冕。时常保持危机感保持危机感的人，常常比一般的人更能对抗一切不确定因素。对大多数年轻人来说，一方面要供还房贷、结婚生子，一方面还要赡养父母。很多人会随波逐流，生活慢慢磨平，甚至人到中年，有些还在国企做着流水线的工作。这些年，“中年危机”话题常常被人提起。因为没有核心竞争力，老员工面临被裁员的危机。2017年初，华为宣布辞退34岁以上的交付工程维护人员；2017年12月，中兴42岁员工跳楼自杀，当场死亡。任正非说了一句让人深思的话：“华为是没有钱的，大家不奋斗就跨了，不可能为不奋斗者支付什么。30多岁年轻力壮，不努力，光想躺在床上数钱，可能吗？”保持危机感，能让你清楚自己的位置，悄然应对即将发生的变化。事情。他总是时刻在内心创造公司的逆境，不停地给自己提问，然后想出解决问题的方式。“等到危机来的时候，他就已经做好了准备”。李嘉诚说道：我凡事必有充分的准备才去做。例如天文台说天气很好，但我常常问我自己，如5分钟后宣布有台风，我会怎样，在香港做生意，亦要保持这种心理准备。2008年，金融危机爆发。而在这之前，李嘉诚早就预见并做好了准备。等到危机来临时，集团不但安然无恙，还从中获得了扩张的机会。有的人25岁，却过着52岁的人生；有的人52岁，却活成了25岁。拥有危机感，你很可能脱颖而出。相反，你还未起跑，就可能被抛下。差不多的人生，其实差很多在汕头大学演讲中，李嘉诚曾对学生说，不要成为差不多先生。但我们，却常常在犯这样的毛病。你总是觉得差不多就好。微胖的体型，差不多；月薪六千，差不多；每天朝九晚五，差不多；25岁结婚，27岁生小孩，差不多。你总是习惯给自己设限，从不做那些有难度的事，你觉得岁月静好。然而，你不知道，自己慢慢成为了温水里的青蛙。等有一天，你突然发现熟悉的人越来越优秀，你再也追赶不上了.李嘉诚，为什么从一个小学徒，走到今天？最大的一个原因，就是他有野心，从不接受差不多的人生。蔡康永说，15岁觉得游泳难，放弃游泳，到18岁遇到一个你喜欢的人约你去游泳，你只好说“我不会耶”。18岁觉得英文难，放弃英文，28岁出现一个很棒但要会英文的工作，你只好说“我不会耶”。从不挑战潜能，结局其实已定：只能变得平庸，接受低成就。反之，你终能与众不同。
        </div>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

mixins混合

mixins: [base]
main.js

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" @mouseout="hide">bys</span>
    <div v-if="visible">
    白岩松
    </div>
    </div>
    `,
    data: function(){
        return {
            visible: true,
        }
    },
    mixins: [base] 
});
Vue.component('popup',{
    template: `
    <div>
    <button @click="toggle">Popup</button>
    <div v-if="visible">
    有没有那么一刻，你感觉人生格局已定？ 你感觉再往上走，越来越难了？ 你曾经雄心壮志，但现在每个月还房贷，都拼尽全力。 你苦苦思索，自己到底是怎样输掉了人生。
    </div>
    </div>
    `,
    mixins: [base] 
});
new Vue({
    el: '#app',
    data: {
 
    }    
})

index.html

<body>
    <div id="app">
        <tooltip></tooltip>
        <popup></popup>
    </div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>

slots插槽

.pannel > *

main.js

Vue.component('pannel',{
    template: '#pannel-tpl',

});
new Vue({
    el: '#app',
    data: {
 
    }    
})

index.html

<!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>
        .pannel {
            max-width: 300px;
            border: 1px solid #999;
            margin-bottom: 15px;
        }

        .pannel > * {
            padding: 15px;
        }

        .pannel .title{
            border-bottom: 1px solid #999;
        }
        
        .pannel .footer{
            border-top: 1px solid #999;
        }
    </style>
</head>
<body>
    <div id="app">
        <pannel>
            <div slot="title">李嘉诚说</div>
            <div slot="content"> 
                有没有那么一刻，你感觉人生格局已定？

                你感觉再往上走，越来越难了？
                
                你曾经雄心壮志，但现在每个月还房贷，都拼尽全力。
                
                你苦苦思索，自己到底是怎样输掉了人生。
            </div>
        </pannel>    
        <pannel></pannel>   
        <pannel></pannel>   
    </div>
    <template id='pannel-tpl'>
            <div class="pannel">
                    <div class="title">
                        <slot name="title">Yo.1</slot>
                    </div>
                    <div class="content">
                        <slot name="content">Yo.2</slot>
                    </div>
                    <div class="footer">
                        <slot name="footer">更多详情...</slot>
                    </div>
                </div>
    </template>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

表严肃讲Vue

vue的安装及语法

v-for指令

v-bind

v-on

v-model

v-model其他元素及类型

v-if控制流指令

计算属性

全局及局部组件

配置组件

组件通信之父子通信

组件通信之子父通信

组件通信之任意组件通信

过滤器

自定义指令的基本用法

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

mixins混合

slots插槽

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读