Vue的两大特性(组件篇)

Vue的两大特性(组件篇)

1.指令 -- 用来操做dom

2.组件 --组件是html css js等的一个聚合体

3.为何要使用组件？

​ 1.组件化

​ 思想：1.将一个具有完整功能的项目的一部分进行多处使用

​ 2.能加快项目的进度

​ 3.能够进行项目的复用

​ 2.要想实现组件化，那么咱们使用的这一部分就必须是完整的，咱们把这一完整的总体称 之为组件

​

​ 3.插件 ： index.html img css js 分开的话会致使复用的麻烦

​ 4.若是能将 html css js img 等多个部分放在一块儿，那该多好，因此Vue将这个聚合体的文件称之为，单文件组件(xx.vue)

4.基础的组件建立

​ 1.全局建立（也叫全局注册）

​ 2.局部建立（局部注册）

<div id='app'></div>
<script>
    //Vue 是构造器函数
    //Vue.extend() 是 Vue用来扩展vue功能（组件）的
    console.log(Vue) //输出Vue的构造函数
    console.log(Vue.extend()) //输出VumComponent的构造函数  
    
    //Vue决定不进行实例化Vue.extend(), vue借鉴了react，react中组件是以标签的形式使用的，  
    //vue决定组件要以标签的形式呈现
    //为了符合html / html5的规则，因此组件的标签化使用必须注册，
    //注册说白了就是用来解析这个标签化的组件让html能识别的标签
    //总结: 组件使用前必须注册
    
    
    new Vue({
        el:'#app'
    })
    
</script>

全局注册

​ 组件必须先注册再使用（组件范围内使用），全局注册就是 只须要注册一次 能够屡次使用（别的组件范围也可使用）

//语法：  Vue.component(组件的名称，组件的配置项)
        //Vue.extend() 中有options参数
        //Vue()也有options参数  两个options基本一致

var Hello = Vue.extend({
    template:'<div>这里是father组件</div>'
})

Vue.component('Father',Hello)

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

全局组件简写形式：
    Vue.component('Father',{
        template:'<div>这里是father组件</div>'
    })

局部注册

​ 注意：

​ 命名：一个单词的大写：注意不要和原生的h5标签重名 好比header footer

​ 标签名字要小写 （若是标签大写的话须要带-）好比 header-title

​ 大驼峰：GaYa 使用 ga-ya

​ 局部注册：在组件中用一个components的配置项目来表示

​ 只能在注册的范围内使用，其余地方不能使用

<div>
    <gabriel-yan></gabriel-yan> //这里会输出  ‘这里是1903’
</div>

var Hello = Vue.extend({
    template:'<div>这里是1903</div>'
})

new Vue({
    el:'#app',
    components:{
        'gabriel-yan':hello
    }
})

局部组件简写形式：(在Vue下面的components中写)
  new Vue({
        el: '#app',
        components: {
            'Hello': {            //组件名
                template: '#hello'    //组件的结构
            }
        }

    })

组件的嵌套

父组件里面放子组件 相似于dom结构中的父子结构

将子组件以标签的形式放在父组件的模板中使用

切记 不要放在父组件内容中

错误的写法:
<div id='app'>
    <Father><Son></Son></Father>
</div>

正确写法：
<div id='app'>
    <Father></Father>
</div>

Vue.component('Father',{
    template:'<div>这里是father组件<Son></Son></div>'
})

Vue.component('Son',{
    template:'<div>这里是Son组件</div>'
})

嵌套局部写法

new Vue({
    el:'#app',
    components:{
        'Father':{
            template:'<div>这里是Father组件</div>'
            components:'Son':{
                template:'<div>这里是Son组件</div>'
            }
        }
    }
})

组件的一些特殊使用规则

<div id='app'>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>


//is规则
    // ul>li    ol>li   table>tr>td     select>option
    //如上直属父子级若是直接组件以标签化形式使用，那么就会出现bug
    //解决 使用is规则：用过is属性来绑定一个组件
    // <tr is = "Hello"></tr>
    
Vue.component('Hello',{
    template:'<tr><td>1</td><td>2</td><td>3</td></tr>'
})
new Vue({
    el:'#app'
    
})

template使用：

​ 1.实例范围内使用

​ 2.实例范围外使用

/*

​ template使用：

​ \1. 实例范围内使用

​ template中的内容被当作一个总体了，而且template标签是不会解析到html结构中的

​ \2. 实例范围外使用

​ 实例范围外template标签是不会被直接解析的

​ 组件要想使用template使用，咱们采用第二种

​ 可是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

​ 解决： 使用webpack、gulp等工具编译，未来要用vue提供的单文件组件

*/

实例范围内使用

<div id="app">
    <h3> 实例范围内使用 </h3>
    <template>
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </template>


    <h3> 使用 hello  组件</h3>

    <Hello></Hello>

  </div>
  
<script> 
    Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

实例范围外使用

<h3> 实例范围外使用 </h3>
  <template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>
  
  
 <script>
    Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
 </script>

总结：1.Vue中有个Vue.extend()方法是用来扩展vue功能(组件)的

​ 2.组件的使用必需要先进行注册（防止和其余标签重名）

​ 3.两种注册方法 全局注册 和 局部注册

​ 全局注册:直接用Vue全局的方法compontends

​ Vue.components('组件名'，{

​ template:'内容'

​ })

​ 局部注册:在组件中用components的配置项目来表示（只能在注册范围内用）

​ new Vue({

​ el:'#app',

​ components:{内容}

​ })