Vue基础汇总实践

Posted 2021-01-05 m2maomao

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.  
   width: 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.  
   width: 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.  
    
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.  
    outline: 0px; color: rgb(209, 154, 102); word-break: break-all;">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.  
   width: 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.  
   width: 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.  
   width: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)自定义指令-基础

 

 

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