• Vue基础汇总

    1)双向绑定：

    1. <div id="app">  
    2.     <p>{{message}}</p>  
    3.     <input v-model="message"/>  
    4. </div>  
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         message:'Hello vue.js'  
    5.     }  
    6. })  

    2)渲染列表

    1. <div id="app">  
    2.     <ul>  
    3.         <li v-for="todo in todos">{{todo.text}}</li>  
    4.     </ul>  
    5. </div>  
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         todos:[  
    5.             {text:'学习vue'},  
    6.             {text:'学习Sass'},  
    7.             {text:'学习webpack'}  
    8.         ]  
    9.     }  
    10. })  

    3)处理用户输入

    1. <div id="app">  
    2.     <p>{{message}}</p>  
    3.     <input v-model='message'/>  
    4.     <button type="button" v-on:click="reverseMessage">反转</button>  
    5. </div>  
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         message:'hello world'  
    5.     },  
    6.     methods:{  
    7.         reverseMessage:function(){  
    8.             this.message=this.message.split('').reverse().join('')  
    9.         }  
    10.     }  
    11. })  

    4)综合小例子：记事本

    1. <div id="app">  
    2.     <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />  
    3.     <ul>  
    4.         <li v-for="todo in todos">  
    5.             <span>{{todo.text}}</span>  
    6.             <button type="button" v-on:click="removeTodo($index)">X</button>  
    7.         </li>  
    8.     </ul>  
    9. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         newTodo:'',  
    5.         todos:[  
    6.             {text:'学习Vue'},  
    7.             {text:'学习Sass'},  
    8.             {text:'学习webpack'}  
    9.         ]  
    10.     },  
    11.     methods:{  
    12.         addTodo:function(){  
    13.             var text = this.newTodo.trim();  
    14.             if(text){  
    15.                 this.todos.push({text:text});  
    16.                 this.newTodo='';  
    17.             }  
    18.         },  
    19.         removeTodo:function(index){  
    20.             this.todos.splice(index,1);  
    21.         }  
    22.     }  
    23. })  

    5)插值

    1. <div id="app">  
    2.     <!-- 单次文本插值 -->  
    3.     <p>{{*message}}</p>  
    4.     <!-- 解析真的html字符串 -->  
    5.     <p>{{{raw_html}}}</p>  
    6.     <!-- html特性 -->  
    7.     <p id="item-{{id}}">html特性</p>  
    8. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         message:'Hello vue.js',  
    5.         raw_html:'<span>原始的html</span>',  
    6.         id:'1'  
    7.     }  
    8. })  

    6)绑定表达式

     
    1. <div id="app">  
    2.     <!-- javascript表达式 -->  
    3.     <p>{{number+1}}</p>  
    4.     <p>{{ok ? 'Yes' : 'No'}}</p>  
    5.     <p>{{message.split('').reverse().join('')}}</p>  
    6.     <!-- 过滤器 -->  
    7.     <p>{{name | capitalize}}</p>  
    8. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         number:2,  
    5.         ok:false,  
    6.         message:'123456789',  
    7.         name:'brucee lee'  
    8.     }  
    9. })  

    7)指令

     
    1. <div id="app">  
    2.     <!-- 参数 -->  
    3.     <a v-bind:href="url" v-on:click="dosomething">指令带参数</a>  
    4.     <!-- v-bind、v-on缩写 -->  
    5.     <a :href="url" @click="dosomething">指令缩写</a>  
    6. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         url:'http://g.pptv.com'  
    5.     },  
    6.     methods:{  
    7.         dosomething:function(){  
    8.             alert(this.url);  
    9.         }  
    10.     }  
    11. })  

    8)计算属性

    1. <div id="app">  
    2.     <p>a={{a}},b={{b}}</p>  
    3.     <p>{{fullName}}</p>  
    4. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         a:1,  
    5.         firstName:'Micro',  
    6.         lastName:'Jodon'  
    7.     },  
    8.     computed:{  
    9.         b:function(){  
    10.             return this.a + 1;  
    11.         },  
    12.         /*fullName:function(){ 
    13.             return this.firstName + ' ' + this.lastName; 
    14.         }*/  
    15.         fullName:{  
    16.             get:function(){  
    17.                 return this.firstName + ' ' + this.lastName;  
    18.             },  
    19.             set:function(newValue){  
    20.                 var names = newValue.split(' ');  
    21.                 this.firstName = names[0];  
    22.                 this.lastName = names[names.length-1];  
    23.             }  
    24.         }  
    25.     }  
    26. })  

    9)class与style绑定

     
    1. .static{  
    2.      200px;  
    3.     margin: 20px auto;  
    4.     height: 25px;  
    5.     line-height: 25px;  
    6.     text-align: center;  
    7.     font-size: 18px;  
    8. }  
    9. .class-a{  
    10.     background-color: #f00;  
    11. }  
    12. .class-b{  
    13.     color: #fff;  
    14. }  
    15. .class-c{  
    16.     padding: 5px 0;  
    17. }  
     
    1. <div id="app">  
    2.     <!-- 绑定class:对象语法 -->  
    3.     <p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>  
    4.     <p class="static" v-bind:class="classObject">绑定class</p>  
    5.     <!-- 绑定class:数组语法 -->  
    6.     <p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>  
    7.     <p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>  
    8.     <!-- 绑定style:对象语法 -->  
    9.     <p class="static" v-bind:style="styleObject">绑定style</p>  
    10.     <!-- 绑定style:数组语法 -->  
    11.     <p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>  
    12. </div>  
     
    1. new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         classA:'class-a',  
    5.         classB:'class-b',  
    6.         classC:'class-c',  
    7.         isA:true,  
    8.         isB:false,  
    9.         isC:true,  
    10.         classObject:{  
    11.             'class-a':true,  
    12.             'class-b':true  
    13.         },  
    14.         styleObject:{  
    15.             color:'red',  
    16.             fontSize:'13px',  
    17.             backgroundColor:'#00f'  
    18.         },  
    19.         styleObjectA:{  
    20.             color:'green',  
    21.             fontSize:'16px'  
    22.               
    23.         },  
    24.         styleObjectB:{  
    25.             backgroundColor:'#f0f',  
    26.             transform:'rotate(7deg)'  
    27.         }  
    28.     }  
    29. })  

    10)条件渲染

     
    1. <div id="app">  
    2.     <h1 v-if="Math.random() > 0.5">对不起！</h1>  
    3.     <h1 v-else>没关系</h1>  
    4.   
    5.     <template v-if="ok">  
    6.         <h1>标题</h1>  
    7.         <p>段落1</p>  
    8.         <p>段落2</p>  
    9.     </template>  
    10.   
    11.     <h1 v-show="isShow">Hello!</h1>  
    12.   
    13.     <custom-component v-show="condition"></custom-component>  
    14.     <p v-show="!condition">这可能也是一个组件</p>  
    15. </div>  
     
    1. // 定义  
    2. var MyComponent = Vue.extend({  
    3.   template: '<div>A custom component!</div>'  
    4. });  
    5.   
    6. // 注册  
    7. Vue.component('custom-component', MyComponent);  
    8. new Vue({  
    9.     el:'#app',  
    10.     data:{  
    11.         ok:true,  
    12.         isShow:false,  
    13.         condition:true  
    14.     },  
    15.   
    16. })  

    11)列表渲染

     
    1. <div id="app">  
    2.     <!-- 数组v-for -->  
    3.     <ul>  
    4.         <template v-for="item in items" track-by="_uid">  
    5.             <li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>  
    6.             <li class="divider"></li>  
    7.         </template>  
    8.     </ul>  
    9.     <!-- 对象v-for -->  
    10.     <ul>  
    11.         <li v-for="(key,val) in object">{{key}} : {{val}}</li>  
    12.     </ul>  
    13.     <!-- 值域v-for -->  
    14.     <span v-for="n in 10">{{ n }}</span>  
    15. </div>  
     
    1. ul{  
    2.     list-style: none;  
    3.      150px;  
    4. }  
    5. .divider{  
    6.     height: 2px;  
    7.     background-color: #00f;  
    8. }  
    9. span{  
    10.     padding: 0 2px;  
    11. }  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     data:{  
    4.         parentMessage:'水果',  
    5.         items:[  
    6.             { _uid:'001',message:'香蕉'},  
    7.             { _uid:'002',message:'橘子'}  
    8.         ],  
    9.         object:{  
    10.             FirstName: 'John',  
    11.             LastName: 'Doe',  
    12.             Age: 30  
    13.         }  
    14.     }  
    15. });  
    16. //变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()  
    17. vm.items.push({message:'苹果'},{message:'梨子'});//推入两项  
    18. vm.items.shift();//取出第一项  
    19. //非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组  
    20. vm.items=vm.items.filter(function (item) {  
    21.   return item.message.match(/子/);  
    22. })  

    12)方法与事件处理器

     
    1. <div id="app">  
    2.     <!-- 内联语句处理器 -->  
    3.     <button type="button" v-on:click="say('Hello',$event)">提交</button>  
    4.     <!-- 事件修饰符 -->  
    5.     <!-- 阻止单击事件冒泡 -->  
    6.     <a v-on:click.stop="doThis"></a>  
    7.   
    8.     <!-- 提交事件不再重载页面 -->  
    9.     <form v-on:submit.prevent="onSubmit"></form>  
    10.   
    11.     <!-- 修饰符可以串联 -->  
    12.     <a v-on:click.stop.prevent="doThat"></a>  
    13.   
    14.     <!-- 只有修饰符 -->  
    15.     <form v-on:submit.prevent></form>  
    16.   
    17.     <!-- 添加事件侦听器时使用 capture 模式 -->  
    18.     <div v-on:click.capture="doThis">...</div>  
    19.   
    20.     <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->  
    21.     <div v-on:click.self="doThat">...</div>  
    22.   
    23.     <!-- 按键修饰符 -->  
    24.     <input v-on:keyup.enter="submit">  
    25.   
    26. </div>  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     methods:{  
    4.         say:function(msg,event){  
    5.             alert(msg+","+event.target.tagName);  
    6.              event.preventDefault();  
    7.         }  
    8.     }  
    9. });  

    13)表单控件绑定

    1. <div id="app">  
    2.     <!-- 多行文本 -->  
    3.     <span>这是您的评论：</span>  
    4.     <p>{{message}}</p>  
    5.     <textarea v-model="message" placeholder="请输入您的评论"></textarea>  
    6.     <br>  
    7.     <!-- 单选框 -->  
    8.     <input type="checkbox" id="checkbox" v-model="checked">  
    9.     <label for="checkbox">{{ checked }}</label>  
    10.     <br>  
    11.     <!-- 多个单选框 -->  
    12.     <input type="checkbox" id="jack" value="马云" v-model="checkedNames">  
    13.     <label for="jack">马云</label>  
    14.     <input type="checkbox" id="john" value="马化腾" v-model="checkedNames">  
    15.     <label for="john">马化腾</label>  
    16.     <input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">  
    17.     <label for="mike">李彦宏</label>  
    18.     <br>  
    19.     <span>选中的值: {{ checkedNames | json }}</span>  
    20.     <br>  
    21.     <!-- 单选钮 -->  
    22.     <input type="radio" id="one" value="One" v-model="picked">  
    23.     <label for="one">One</label>  
    24.     <br>  
    25.     <input type="radio" id="two" value="Two" v-model="picked">  
    26.     <label for="two">Two</label>  
    27.     <br>  
    28.     <span>选中的值: {{ picked }}</span>  
    29.     <br>  
    30.     <!-- 下拉列表单选 -->  
    31.     <select v-model="selected">  
    32.       <option selected>湖北</option>  
    33.       <option>北京</option>  
    34.       <option>上海</option>  
    35.     </select>  
    36.     <span>选中的值: {{ selected }}</span>  
    37.     <br>  
    38.     <!-- 下拉列表多选 -->  
    39.     <select v-model="selecteds" multiple>  
    40.         <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>  
    41.     </select>  
    42.     <br>  
    43.     <span>选中的值: {{ selecteds | json }}</span>  
    44.     <br>  
    45.       
    46.     <!--绑定动态值到Vue实例-->  
    47.   
    48.     <!-- 选中时为a，未选中时为b -->  
    49.     <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>  
    50.     <span>选中时的值：{{toggle}}</span>  
    51.     <br>  
    52.       
    53.     <input type="radio" v-model="pick" v-bind:value="c">男  
    54.     <input type="radio" v-model="pick" v-bind:value="d">女  
    55.     <span>选中时的值：{{pick}}</span>  
    56.   
    57.     <!-- 在 "change" 而不是 "input" 事件中更新 -->  
    58.     <input v-model="msg" lazy>  
    59.     <!-- 设置转换为数值类型 -->  
    60.     <input v-model="age" number>  
    61.     <!-- 设置延时 -->  
    62.     <input v-model="msg" debounce="500">  
    63. </div>  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     data: {  
    4.         checkedNames: [],  
    5.         options:[  
    6.             {text:'南京',value:'南京'},  
    7.             {text:'苏州',value:'苏州'},  
    8.             {text:'无锡',value:'无锡'}  
    9.         ],  
    10.         a:'选中',  
    11.         b:'未选中',  
    12.         c:'男',  
    13.         d:'女'  
    14.   }  
    15. });  

    14)css过渡

     
    1. <div id="app">  
    2.     <div v-if="show" transition="expand">Hello1</div>  
    3.     <div v-if="show" :transition="transitionName">Hello2</div>  
    4.     <button type="button" v-on:click="toggle">过渡效果演示</button>  
    5. </div>  
     
    1.         /* 必需 */  
    2. .expand-transition {  
    3.   transition: all 0.5s ease;  
    4.   height: 30px;  
    5.   padding: 10px;  
    6.   background-color: #eee;  
    7.   overflow: hidden;  
    8. }  
    9.   
    10. /* .expand-enter 定义进入的开始状态 */  
    11. /* .expand-leave 定义离开的结束状态 */  
    12. .expand-enter, .expand-leave {  
    13.   height: 0;  
    14.   padding: 0 10px;  
    15.   opacity: 0;  
    16. }  
    17. .fade-transition{  
    18.     transition: all 0.5s ease;  
    19.     height: 30px;  
    20.     padding: 10px;  
    21.     background-color: #2df;  
    22.     overflow: hidden;  
    23. }  
    24. .fade-enter, .fade-leave {  
    25.   padding: 0 10px;  
    26.   opacity: 0.5;  
    27. }  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     data: {  
    4.         show:true,  
    5.         transitionName:'fade'  
    6.     },  
    7.     methods:{  
    8.         toggle:function(){  
    9.             if(this.show){  
    10.                 this.show=false;  
    11.             }else{  
    12.                 this.show=true;  
    13.             }  
    14.               
    15.         }  
    16.     },  
    17.     transitions: {  
    18.         expand: {  
    19.           beforeEnter: function (el) {  
    20.             el.textContent = 'beforeEnter'  
    21.           },  
    22.           enter: function (el) {  
    23.             el.textContent = 'enter'  
    24.           },  
    25.           afterEnter: function (el) {  
    26.             el.textContent = 'afterEnter'  
    27.           },  
    28.           beforeLeave: function (el) {  
    29.             el.textContent = 'beforeLeave'  
    30.           },  
    31.           leave: function (el) {  
    32.             el.textContent = 'leave'  
    33.           },  
    34.           afterLeave: function (el) {  
    35.             el.textContent = 'afterLeave'  
    36.           }  
    37.         }  
    38.     }  
    39. });  

    15)css自定义过渡（注：与animats.css配合使用）

     
    1. <div id="app">  
    2.     <div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>  
    3.     <button type="button" v-on:click="toggle">演示过渡效果</button>  
    4. </div>  
     
    1. .animated{  
    2.      150px;  
    3.     background-color: #2df;  
    4.     height: 30px;  
    5.     padding: 10px;  
    6. }  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     data: {  
    4.         ok:true  
    5.     },  
    6.     methods:{  
    7.         toggle:function(){  
    8.             if(this.ok){  
    9.                 this.ok=false;  
    10.             }else{  
    11.                 this.ok=true;  
    12.             }  
    13.         }  
    14.     },  
    15.     transitions: {  
    16.         bounce: {  
    17.           enterClass: 'bounceInLeft',  
    18.           leaveClass: 'bounceOutRight'  
    19.         }  
    20.     }     
    21. });  

    16)CSS动画（注：与animats.css配合使用）

     
    1. <div id="app">  
    2.     <div v-show="ok" class="animated" transition="bounce">看我变一个</div>  
    3.     <button type="button" v-on:click="toggle">演示动画效果</button>  
    4. </div>  
     
    1. .animated{  
    2.      150px;  
    3.     background-color: #2df;  
    4.     height: 30px;  
    5.     padding: 10px;  
    6. }  
    7. .bounce-transition {  
    8.   display: inline-block; /* 否则 scale 动画不起作用 */  
    9. }  
    10. .bounce-enter {  
    11.   animation: bounce-in .5s;  
    12. }  
    13. .bounce-leave {  
    14.   animation: bounce-out .5s;  
    15. }  
    16. @keyframes bounce-in {  
    17.   0% {  
    18.     transform: scale(0);  
    19.   }  
    20.   50% {  
    21.     transform: scale(1.5);  
    22.   }  
    23.   100% {  
    24.     transform: scale(1);  
    25.   }  
    26. }  
    27. @keyframes bounce-out {  
    28.   0% {  
    29.     transform: scale(1);  
    30.   }  
    31.   50% {  
    32.     transform: scale(1.5);  
    33.   }  
    34.   100% {  
    35.     transform: scale(0);  
    36.   }  
    37. }  
     
    1. var vm=new Vue({  
    2.     el:'#app',  
    3.     data: {  
    4.         ok:true  
    5.     },  
    6.     methods:{  
    7.         toggle:function(){  
    8.             if(this.ok){  
    9.                 this.ok=false;  
    10.             }else{  
    11.                 this.ok=true;  
    12.             }  
    13.         }  
    14.     }  
    15. });  

    17)Javascript过渡

     
    1. <div id="app">  
    2.     <p transition='fade'>什么和什么？</p>  
    3. </div>  
     
    1. .fade-transition{  
    2.     transition: all 0.5s ease;  
    3.     height: 30px;  
    4.     padding: 10px;  
    5.     background-color: #2df;  
    6.     overflow: hidden;  
    7. }  
     
    1. var vm=new Vue({  
    2.     el:'#app'  
    3. });  
    4. vm.transition('fade', {  
    5.   css: false,  
    6.   enter: function (el, done) {  
    7.     // 元素已被插入 DOM  
    8.     // 在动画结束后调用 done  
    9.     $(el)  
    10.       .css('opacity', 0)  
    11.       .animate({ opacity: 1 }, 1000, done)  
    12.   },  
    13.   enterCancelled: function (el) {  
    14.     $(el).stop()  
    15.   },  
    16.   leave: function (el, done) {  
    17.     // 与 enter 相同  
    18.     $(el).animate({ opacity: 0 }, 1000, done)  
    19.   },  
    20.   leaveCancelled: function (el) {  
    21.     $(el).stop()  
    22.   }  
    23. })  

    18)渐进过渡

     
    1. <div id="example-1">  
    2.     <input v-model="query">  
    3.     <ul>  
    4.         <li v-for="item in list | filterBy query" transition="staggered" stagger="100">  
    5.             {{item.msg}}  
    6.         </li>  
    7.     </ul>  
    8. </div>  
     
    1. #example-1{  
    2.     200px;  
    3.     margin:20px auto;  
    4.     font-size:14px;  
    5.     color:#ff6600;  
    6. }  
    7. ul {  
    8.     padding-left: 0;  
    9.     font-family: Helvetica, Arial, sans-serif;  
    10. }  
    11. .staggered-transition {  
    12.     transition: all .5s ease;  
    13.     overflow: hidden;  
    14.     margin: 0;  
    15.     height: 25px;  
    16. }  
    17. .bounceInLeft, .bounceOutRight {  
    18.     opacity: 0;  
    19.     height: 0;  
    20. }  
     
    1.     var exampleData={  
    2.         query: '',  
    3.         list: [  
    4.             { msg: 'Bruce Lee' },  
    5.             { msg: 'Jackie Chan' },  
    6.             { msg: 'Chuck Norris' },  
    7.             { msg: 'Jet Li' },  
    8.             { msg: 'Kung Fury' }  
    9.         ]  
    10.     };  
    11.     var exampleVM = new Vue({  
    12.         el:'#example-1',  
    13.         data:exampleData,  
    14.         transitions:{  
    15.             staggered:{  
    16.                 enterClass:'bounceInLeft',  
    17.                 leaveClass: 'bounceOutRight'  
    18.             }  
    19.         }  
    20.     });  
    21.   
    22. /*    exampleVM.transition('stagger', { 
    23.         stagger: function (index) { 
    24.             // 每个过渡项目增加 50ms 延时 
    25.             // 但是最大延时限制为 300ms 
    26.             return Math.min(300, index * 50) 
    27.         } 
    28.     })*/  

    19)组件

     
    1. <div id="example">  
    2.     <my-component></my-component>  
    3. </div>  
     
    1. //定义  
    2. /*var myComponent=Vue.extend({ 
    3.     template:'<div>A custom component!</div>' 
    4. });*/  
    5. //注册  
    6. //Vue.component('my-component',myComponent);  
    7. //在一个步骤中定义与注册  
    8. Vue.component('my-component',{  
    9.     template:'<div>A custom component!</div>'  
    10. });  
    11. //创建根实例  
    12. new Vue({  
    13.     el:'#example'  
    14. });  

    20)组件局部注册
     
    1. <div id="example">  
    2.     <parent-component></parent-component>  
    3. </div>  
     
    1. //定义  
    2. /*var Child=Vue.extend({ 
    3.     template:'<div>A child component!</div>' 
    4. });*/  
    5. var Parent=Vue.extend({  
    6.     template:'<div>A parent component!<my-component></my-component></div>',  
    7.     components:{  
    8.         // <my-component> 只能用在父组件模板内  
    9.         'my-component':{  
    10.             template:'<div>A child component!</div>'  
    11.         }  
    12.     }  
    13. });  
    14. // 注册父组件  
    15. Vue.component('parent-component', Parent);  
    16. //创建根实例  
    17. new Vue({  
    18.     el:'#example'  
    19. });  

    21)使用props传递数据

     
    1. <div id="example" class="demo">  
    2.     <input type="text" v-model="parentMessage"/><br>  
    3.     <child v-bind:my-message="parentMessage"></child>  
    4.     <!-- 双向绑定 -->  
    5.     <child :msg.sync="parentMessage"></child>  
    6.   
    7.     <!-- 单次绑定 -->  
    8.     <child :msg.once="parentMessage"></child>  
    9. </div>  
     
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
    1. new Vue({  
    2.     el:'#example',  
    3.     data:{  
    4.         parentMessage:'Message from parent'  
    5.     },  
    6.     components:{  
    7.         child:{  
    8.             props:['myMessage'],  
    9.             template:'<span>{{myMessage}}</span>'  
    10.         }  
    11.     }  
    12. });  

    22)prop验证

     
    1. <div id="example" class="demo">  
    2.     <child></child>  
    3. </div>  
     
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
    1. new Vue({  
    2.     el:'#example',  
    3.     components:{  
    4.         child:{  
    5.             props: {  
    6.                 // 基础类型检测 （`null` 意思是任何类型都可以）  
    7.                 propA: Number,  
    8.                 // 多种类型 (1.0.21+)  
    9.                 propM: [String, Number],  
    10.                 // 必需且是字符串  
    11.                 propB: {  
    12.                     type: String,  
    13.                     required: true  
    14.                 },  
    15.                 // 数字，有默认值  
    16.                 propC: {  
    17.                     type: Number,  
    18.                     default: 100  
    19.                 },  
    20.                 // 对象/数组的默认值应当由一个函数返回  
    21.                 propD: {  
    22.                     type: Object,  
    23.                     default: function () {  
    24.                         return { msg: 'hello' }  
    25.                     }  
    26.                 },  
    27.                 // 指定这个 prop 为双向绑定  
    28.                 // 如果绑定类型不对将抛出一条警告  
    29.                 propE: {  
    30.                     twoWay: true  
    31.                 },  
    32.                 // 自定义验证函数  
    33.                 propF: {  
    34.                     validator: function (value) {  
    35.                         return value > 10  
    36.                     }  
    37.                 },  
    38.                 // 转换函数（1.0.12 新增）  
    39.                 // 在设置值之前转换值  
    40.                 propG: {  
    41.                     coerce: function (val) {  
    42.                         return val + ''; // 将值转换为字符串  
    43.                     }  
    44.                 },  
    45.                 propH: {  
    46.                     coerce: function (val) {  
    47.                         return JSON.parse(val); // 将 JSON 字符串转换为对象  
    48.                     }  
    49.                 }  
    50.             },  
    51.             template:'<span>hello world!</span>'  
    52.         }  
    53.     }  
    54. });  

    23)父子组件通信

     
    1. <!--子组件模板-->  
    2. <template id="child-template">  
    3.     <input type="text" v-model="msg"/>  
    4.     <button type="button" v-on:click="notify">派发事件</button>  
    5. </template>  
    6. <!--父组件模板-->  
    7. <div id="events-example" class="demo">  
    8. <p>Messages:{{ messages | json }}</p>  
    9.     <child v-on:child-msg="handleIt"></child>  
    10. </div>  
     
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
    1. // 注册子组件,将当前消息派发出去  
    2. Vue.component('child',{  
    3.     template:'#child-template',  
    4.     data:function(){  
    5.         return {msg:'hello'}  
    6.     },  
    7.     methods:{  
    8.         notify:function(){  
    9.             if(this.msg.trim()){  
    10.                 this.$dispatch('child-msg',this.msg);  
    11.                 this.msg='';  
    12.             }  
    13.         }  
    14.     }  
    15. });  
    16. // 初始化父组件,收到消息时将事件推入一个数组  
    17. var parent=new Vue({  
    18.     el:'#events-example',  
    19.     data:{  
    20.         messages:[]  
    21.     },  
    22.     methods:{  
    23.         handleIt:function(msg){  
    24.             this.messages.push(msg);  
    25.         }  
    26.     }  
    27.     // 在创建实例时 `events` 选项简单地调用 `$on`  
    28.     /*events:{ 
    29.         'child-msg':function(msg){ 
    30.             this.messages.push(msg); 
    31.         } 
    32.     }*/  
    33. })  

    24)自定义指令-基础

    1. <div id="demo" v-demo:hello.a.b="msg"></div>  
    1. Vue.directive('demo', {  
    2.     bind: function () {  
    3.         console.log('demo bound!')  
    4.     },  
    5.     update: function (value) {  
    6.         this.el.innerHTML =  
    7.                 'name - '       + this.name + '<br>' +  
    8.                 'expression - ' + this.expression + '<br>' +  
    9.                 'argument - '   + this.arg + '<br>' +  
    10.                 'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +  
    11.                 'value - '      + value  
    12.     }  
    13. });  
    14. var demo = new Vue({  
    15.     el: '#demo',  
    16.     data: {  
    17.         msg: 'hello!'  
    18.     }  
    19. })  

    25)自定义指令-高级选项
     
    1. <div id="demo" >  
    2.     <!--对象字面量-->  
    3.     <div v-demo-1="{ color: 'white', text: 'hello!' }"></div>  
    4.     <!--字面修饰符-->  
    5.     <div v-demo-2.literal="foo bar baz"></div>  
    6.     <!--元素指令-->  
    7.     <my-directive></my-directive>  
    8.     <!--高级选项-params-->  
    9.     <div v-example a="hi"></div>  
    10. </div>  
     
    1. Vue.directive('demo-1', function(value){  
    2.     console.log(value.color);  
    3.     console.log(value.text);  
    4. });  
    5. Vue.directive('demo-2',function(value){  
    6.     console.log(value);  
    7. });  
    8. Vue.elementDirective('my-directive',{  
    9.     bind:function(){  
    10.         console.log(this.el);  
    11.     }  
    12. });  
    13. Vue.directive('example',{  
    14.     params:['a'],  
    15.     bind:function(){  
    16.         console.log(this.params.a);  
    17.     }  
    18. });  
    19. Vue.directive('two', {  
    20.     twoWay: true,  
    21.     bind: function () {  
    22.         this.handler = function () {  
    23.             // 将数据写回 vm  
    24.             // 如果指令这样绑定 v-example="a.b.c"  
    25.             // 它将用给定值设置 `vm.a.b.c`  
    26.             this.set(this.el.value)  
    27.         }.bind(this);  
    28.         this.el.addEventListener('input', this.handler);  
    29.     },  
    30.     unbind: function () {  
    31.         this.el.removeEventListener('input', this.handler)  
    32.     }  
    33. });  
    34. vm=new Vue({  
    35.     el: '#demo'  
    36. });  

    26)自定义过滤器

     
    1. <div id="demo" class="demo">  
    2.     <!--基础过滤器-->  
    3.     <span v-text="message | reverse"></span><br>  
    4.     <span v-text="message | wrap 'before' 'after'"></span><br>  
    5.     <!--双向过滤器-->  
    6.     <input type="text" v-model="money | currencyDisplay"/>  
    7.     <p>ModelValue:{{money | currencyDisplay}}</p>  
    8.     <!--动态参数-->  
    9.     <input v-model="userInput"/>  
    10.     <span>{{msg | concat userInput}}</span>  
    11. </div>  
     
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
    1. Vue.filter('reverse',function(value){  
    2.     return value.split('').reverse().join('');  
    3. });  
    4. Vue.filter('wrap',function(value,begin,end){  
    5.    return begin+' '+value+' '+end;  
    6. });  
    7. Vue.filter('currencyDisplay',{  
    8.     // model -> view  
    9.     // 在更新 `<input>` 元素之前格式化值  
    10.     read:function(val){  
    11.         return '$'+val.toFixed(2)  
    12.     },  
    13.     // view -> model  
    14.     // 在写回数据之前格式化值  
    15.     write: function(val, oldVal) {  
    16.         var number = +val.replace(/[^d.]/g, '')  
    17.         return isNaN(number) ? 0 : parseFloat(number.toFixed(2))  
    18.     }  
    19. });  
    20. Vue.filter('concat',function(value,input){  
    21.     return value+input;  
    22. })  
    23. new Vue({  
    24.     el:'#demo',  
    25.     data:{  
    26.         message:'abc',  
    27.         money:123.45,  
    28.         msg:'hello',  
    29.         userInput:'hi'  
    30.     }  
    31. });  

    27)混合

    1. <div id="demo" class="demo">  
    2.   
    3. </div>  
     
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
    1. var myMixin={  
    2.     created:function(){  
    3.         this.hello();  
    4.     },  
    5.     methods:{  
    6.         hello:function(){  
    7.             console.log('hello from mixin!');  
    8.         }  
    9.     }  
    10. };  
    11. // 定义一个组件，使用这个混合对象  
    12. var Component = Vue.extend({  
    13.     mixins: [myMixin]  
    14. });  
    15. var component = new Component();  
    16. new Vue({  
    17.     el:'#demo'  
    18. });  

    28)混合-选项合并
     
    1. <div id="demo" class="demo">  
    2.   
    3. </div>  
    1. .demo{  
    2.     border: 1px solid #eee;  
    3.     border-radius: 2px;  
    4.     padding: 25px 35px;  
    5.     margin-bottom: 40px;  
    6.     font-size: 1.2em;  
    7.     line-height: 1.5em;  
    8. }  
     
      1. var mixin={  
      2.     created:function(){  
      3.         console.log('mixin hook called');  
      4.     },  
      5.     methods: {  
      6.         foo: function () {  
      7.           console.log('foo');  
      8.         },  
      9.         conflicting: function () {  
      10.           console.log('from mixin');  
      11.         }  
      12.     }  
      13. };  
      14. var vm=new Vue({  
      15.     el:'#demo',  
      16.     mixins:[mixin],  
      17.     created:function(){  
      18.         console.log('component hook called');  
      19.     },  
      20.     methods:{  
      21.         bar: function () {  
      22.           console.log('bar');  
      23.         },  
      24.         conflicting: function () {  
      25.           console.log('from self');  
      26.         }  
      27.     }  
      28. });  
      29. vm.foo();  
      30. vm.bar();  
      31. vm.conflicting();//组件优先  
  • 相关阅读:
    Java代码是怎么运行的
    Java单例模式
    redis分布式锁实现
    zuul2.0
    配置ssh免密钥登陆多台从机
    Nifi-install-config
    Configure Access to Multiple Clusters
    kubernetes集群搭建(kubeadm,kubelet)
    shell 编程
    系统管理
  • 原文地址：https://www.cnblogs.com/dwj88/p/7503452.html
Copyright © 2020-2023  润新知