vue.js组件上

前言

本文由阅读一篇vue.js组件文章学习后笔记
http://www.cnblogs.com/keepfool/p/5625583.html

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件

创建组件

    
      
      
        
        
        
      
      
        

             !--组件名称，使用组件--!
        
       

         
       
    
  

Paste_Image.png

局部组件
把上个例子的修改一下

      new Vue({
            el:'#example-2',
            components: {
                'my-component':myComponent
        }
    })

得出

Paste_Image.png

Paste_Image.png

注意：这个位置不能颠倒了，否则会报错，意思就是要先注册组件再创建新的Vue实例，不能先创建实例再注册组件

Paste_Image.png

Paste_Image.png

父子组件

---

输出时父组件里也输出子组件

Paste_Image.png

创建组件方式

• 1

     var son=Vue.extend({
          template:'
  This is my component
  '
    })
  

• 2
  Vue.component('my-component',{
  template:'

  beauty
  ',
  components:{
  'child':son}
  })

使用script或template标签

Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

      
        
         
             
            
            
        
        
            

                组件
            
            //注意type类型
            
This is a wonderful world
        
        
      
    

注意：使用

通过中间量联系起来父模块与子模块，将父模块数据传递给子模块component

Paste_Image.png

注意：不区分大小写，大写要用横线隔开否则报错

Paste_Image.png

props单项绑定

在父元素修改的数据会在子元素显示出来，而在子元素修改的数据父元素不会做相应的改变

      
        
        
            
            
            
        
        
            
        

            

          
          父元素:
           

           myname:
           

          mylike:
       
      
    
  

Paste_Image.png

Paste_Image.png

Paste_Image.png

双向绑定

使用.sync后缀在子组件的数据绑定上，实现子组件与父组件的双向绑定，如单项绑定中改变其中一个句子为

![Upload Paste_Image.png failed. Please try again.]
即得到双向绑定的效果

单次绑定

使用.once后缀在子组件的数据绑定上，显式地指定单次绑定，单次绑定在建立之后不会同步之后的变化，这意味着即使父组件修改了数据，也不会传导给子组件。

![Upload Paste_Image.png failed. Please try again.]

应当注意的是没有二次绑定，三次绑定这样的效果，若将.once改为.twice或者其他序数会报错