您的位置: 首页  >  IT文章  >  Vue基础汇总

Vue基础汇总

分类: IT文章 • 2023-11-28 14:20:01

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();//组件优先  

相关推荐